/* ===========================================================================
   Experience — the FIRST MOCKUP (web / "Sites, shops, dashboards") is where the
   section transitions in: coming out of the cream essay, the backdrop scrubs
   from light to black WHILE real project screenshots surface one-by-one, and
   the device mockup lands as the content over them. Driven on scroll (scrubbed)
   in experience-shots.js. Later chapters keep a quiet dark grid.
   =========================================================================== */

.exp-mosaic {
    position: absolute;
    inset: 0;
    z-index: 0;                 /* under .exp-apple-text (z2) and device (z3) */
    pointer-events: none;
    overflow: hidden;
    background: #050403;        /* later chapters: dark */
    contain: layout paint style;   /* isolate paint (content-visibility thrashed on sticky) */
}

.exp-mosaic__grid {
    position: absolute;
    inset: -12%;
    column-count: 5;
    column-gap: 12px;
    /* tilted to the left — CHEAP 2D rotate (no perspective/rotateX 3D context,
       which was forcing an expensive 3D render layer per wall). */
    transform: rotate(-8deg) scale(1.16);
    transform-origin: center;
}
@media (max-width: 1100px) { .exp-mosaic__grid { column-count: 4; } }
@media (max-width: 720px)  { .exp-mosaic__grid { column-count: 3; column-gap: 8px; transform: rotate(-7deg) scale(1.2); } }

.exp-mosaic__t {
    break-inside: avoid;
    margin: 0 0 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0806;                 /* cheap flat bg instead of a blur shadow */
    opacity: 0;
    transform: scale(0.92) translateY(16px);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i) * 34ms);
}
.exp-mosaic.on .exp-mosaic__t { opacity: 0.6; transform: none; }
/* the scrubbed first mockup drives tiles inline per frame — no lag transitions */
.exp-mosaic--scrub .exp-mosaic__t,
.exp-mosaic--scrub .exp-mosaic__wash { transition: none !important; }

/* No per-image CSS filter (it was re-rasterising ~180 images) — the wall is
   dimmed by the wash instead. */
.exp-mosaic__t img { display: block; width: 100%; height: auto; }

.exp-mosaic__wash {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease 0.25s;
    background:
        radial-gradient(102% 98% at 50% 46%,
            rgba(5, 4, 3, 0.88) 0%,
            rgba(5, 4, 3, 0.66) 30%,
            rgba(5, 4, 3, 0.52) 54%,
            rgba(4, 3, 2, 0.78) 84%,
            rgba(3, 2, 2, 0.95) 100%);
}
.exp-mosaic.on .exp-mosaic__wash { opacity: 1; }

/* Foreground chapter text over the dark wall — force it light for contrast. */
.exp-pin[data-chapter] .exp-apple-eyebrow  { color: rgba(240, 232, 220, 0.66) !important; }
.exp-pin[data-chapter] .exp-apple-headline { color: rgba(250, 244, 234, 0.97) !important; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6); }
.exp-pin[data-chapter] .exp-apple-subhead  { color: rgba(242, 234, 222, 0.74) !important; }

@media (prefers-reduced-motion: reduce) {
    .exp-mosaic__t { transition-delay: 0ms !important; }
}

/* Envoi -> dark cinematic finale: the breadth of a decade of work as a wall
   behind the thesis, which resolves in white over it. */
#experience .exp-close { background: #050403 !important; }
#experience .exp-close > div:not(.exp-mosaic) { position: relative; z-index: 2; }
#experience .exp-close .exp-close-quote { color: rgba(250, 244, 234, 0.98) !important; }
#experience .exp-close .exp-close-attr  { color: rgba(226, 184, 122, 0.92) !important; }
#experience .exp-close .exp-close-meta  { color: rgba(238, 230, 218, 0.6) !important; }
#experience .exp-close .exp-close-rule  { background: rgba(226, 184, 122, 0.6) !important; }

/* (The nvim act's "black space" was actually the missing _engineering-nvim.js
   editor engine — restored — not an over-long track. Track left at its original
   690vh so the IDE camera dolly-out + compile descent play at full length.) */