/* =========================================================
   Project browser frames (cards + case-study popup)
   ========================================================= */
.mock { background: #0d0f18; }
.mock__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 2;
  display: flex; gap: 6px; align-items: center; padding: 0 12px;
  background: rgba(20, 22, 32, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mock__bar > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mock__bar > i:nth-child(1) { background: #ff5f57; }
.mock__bar > i:nth-child(2) { background: #febc2e; }
.mock__bar > i:nth-child(3) { background: #28c840; }
.mock__url {
  display: block; margin: 0 auto 0 8px; max-width: calc(100% - 110px);
  height: 17px; line-height: 17px; padding: 0 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.07);
  font: 500 10px/17px var(--f-mono); color: rgba(255, 255, 255, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock__url svg { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mock__view { position: absolute; inset: 28px 0 0 0; overflow: hidden; }

/* Live client sites: real screenshot on the card, the actual site embedded in the popup */
.mock--shot { background: #120c08; }
.mock--shot picture, .mock--shot img { display: block; width: 100%; height: 100%; }
.mock--shot img { object-fit: cover; object-position: top center; transform-origin: top center; will-change: transform; }
.mock__live {
  position: absolute; right: 12px; display: inline-flex; align-items: center; gap: 5px;
  font: 600 9px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #6ee7a7;
}
.mock__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ee7a7; box-shadow: 0 0 8px #6ee7a7; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }
.modal__live iframe { position: absolute; inset: 28px 0 0 0; width: 100%; height: calc(100% - 28px); border: 0; background: #120c08; }