/* ══════════════════════════════════════════════════════════════
   PORTFOLIO GALLERY — full-page scroll background

   The real sites, as browser windows standing on a slow 3D carousel
   in the same dark green-lit studio as the laptop and the tower PC.
   Built from screenshots and CSS 3D transforms: no video, ~300 KB.

   gallery.js writes one number, --a (ring angle in degrees), onto
   .g-ring, and a per-card --f (0 = facing camera, 1 = turned away)
   used for dimming. The page reuses body.explode from explode.css for
   the dark palette, glass footer/CTA/related cards and .pc-band.
   ══════════════════════════════════════════════════════════════ */

.g-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 48% at 50% 36%, rgba(16, 201, 138, 0.20), rgba(16, 201, 138, 0) 70%),
        radial-gradient(ellipse 80% 30% at 50% 100%, rgba(16, 201, 138, 0.08), rgba(16, 201, 138, 0) 70%),
        #0d110f;
    perspective: 2000px;
    perspective-origin: 50% 38%;
}

/* card width drives everything: ring radius, height, floor line */
.g-stage {
    --w: min(44vw, 72vh, 780px);
    --h: calc(var(--w) * 0.625 + 30px);   /* 16:10 shot + browser bar */
    --r: calc(var(--w) * 1.08);           /* 6 cards at 60deg: chord = r */
}

/* --x/--y: where the ring stands. gallery.js moves it from beside the
   hero copy (right on wide screens, lower on narrow ones) to centre
   as the hero scrolls away. */
.g-ring {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 47%);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform: scale3d(var(--k, 1), var(--k, 1), var(--k, 1)) translateZ(calc(var(--r) * -1)) rotateY(calc(var(--a, 0) * -1deg));
}

.g-card {
    position: absolute;
    left: calc(var(--w) / -2);
    top: calc(var(--h) / -2);
    width: var(--w);
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #111713;
    border: 1px solid rgba(16, 201, 138, 0.28);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 60px -10px rgba(16, 201, 138, calc(0.35 * (1 - var(--f, 0))));
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--r));
    backface-visibility: hidden;
    /* soft floor reflection (Chromium/WebKit; others just skip it) */
    -webkit-box-reflect: below 18px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.16));
}
/* turning away from the camera = into the dark */
.g-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0a0e0c;
    opacity: calc(var(--f, 0) * 0.78);
}

.g-bar {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    background: #171e1a;
    border-bottom: 1px solid rgba(240, 240, 237, 0.08);
}
.g-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2d3a33; }
.g-bar i:first-child { background: #10c98a; }
.g-bar span {
    margin-left: 10px;
    flex: 1;
    max-width: 60%;
    height: 18px;
    border-radius: 9px;
    background: rgba(240, 240, 237, 0.06);
    font: 10px/18px 'Space Mono', monospace;
    letter-spacing: 0.5px;
    color: rgba(240, 240, 237, 0.55);
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
}
.g-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* floor: a faint glossy horizon under the ring */
.g-floor {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--y, 47%) + var(--h) * 0.42);
    bottom: 0;
    background: linear-gradient(rgba(16, 201, 138, 0.06), rgba(13, 17, 15, 0) 40%);
    border-top: 1px solid rgba(16, 201, 138, 0.10);
}

/* legibility: darker at the left where the hero copy sits, and a
   general vignette so the side cards melt into the room */
.g-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 9, 0.72) 0%, rgba(8, 11, 9, 0.25) 42%, rgba(8, 11, 9, 0) 60%),
        radial-gradient(ellipse 75% 70% at 50% 45%, rgba(8, 11, 9, 0), rgba(8, 11, 9, 0.55) 100%);
}

/* ── PAGE CONTENT ON TOP ── */
body.gallery .page-hero { background: transparent; }
body.gallery main > section:not(.cta-band) { background: transparent; }
body.gallery .case {
    background: var(--glass-strong);
}
body.gallery .case-fact { background: rgba(255, 255, 255, 0.03); }
body.gallery .prose.g-note {
    max-width: none;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    padding: 40px 40px 36px;
}
body.gallery .prose.g-note > * { max-width: 760px; }

/* Wide screens: copy in a left column so the site on the right, the one
   being described, stays in view. Matches wideMq in gallery.js. */
@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
    body.gallery .case,
    body.gallery .prose.g-note { max-width: min(600px, 44vw); }
    body.gallery .prose.g-note .related-grid { grid-template-columns: 1fr; }
    body.gallery .case-facts { grid-template-columns: 1fr; }
    body.gallery .case .price-cta { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
    body.gallery .pc-band { justify-content: flex-start; padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}

@media (max-width: 700px) {
    .g-stage { --w: 80vw; --r: calc(var(--w) * 1.12); perspective: 1200px; }
    body.gallery .prose.g-note { padding: 28px 22px; }
}