/* Work section: name-marquee intro -> chrome shard burst -> WORK arrives from
   depth -> continuous right-to-left drift with 3D edge curve -> numbered
   work index (lukeandnik.co.uk-inspired, replaces the earlier bento grid)
   -> curtain transition into DJ. Piece motion source: work-rtl-3d-edge.html
   (replaces the earlier figure-8/line/spiral samba path). */

.pin-wrap{ position:relative; }
/* height:100vh alone drifts on mobile — vh is the LARGEST possible
   viewport (address bar hidden) and doesn't shrink as the bar shows/hides
   during scroll, while the actual visible viewport does. A position:sticky
   box sized to the stale, larger vh value visibly swims relative to what's
   actually on screen as you scroll. dvh tracks the real current viewport;
   the vh line stays first as a fallback for browsers without dvh support. */
.pin-stage{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.intro-stage{ background:#fff; }
.work-stage{ background:#fff; cursor:pointer; } /* round 14: was var(--ink) — Carrie: remove the brown background */
canvas.gl{ position:absolute; inset:0; display:block; }

#introPinWrap{ height:280vh; } /* round 4: tightened so the handoff into Recent feels direct */
#workPinWrap{ height:138vh; } /* round 16: was 700vh, 220vh, 170vh — Carrie: bring the extra scroll to ~35-40vh */

.reveal-panel{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; filter:blur(10px); transform:scale(.9);
  pointer-events:none; text-align:center; padding:24px; z-index:6;
}

/* Curtain-peel background: revealed as the bulletin's bottom edge clips
   away on scroll (see section-work-intro.js). Sits behind the canvas in
   DOM order so the shard burst still animates in front of it. */
.curtain-peel-bg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:1; opacity:0; will-change:opacity;
}
.curtain-peel-bg span{
  font-size:clamp(4rem,18vw,13rem); font-weight:800; letter-spacing:-0.02em; color:var(--ink);
}

/* Bulletin: the "Move On" image+text combined into one card with a soft,
   layered glow (not a hard border) — replaces the old bare <img>. */
.bulletin{ position:relative; width:min(440px, 68vw); pointer-events:none; }
.bulletin-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#000;
  box-shadow:
    0 0 40px 8px rgba(55,14,14,.16),
    0 0 90px 26px rgba(55,14,14,.10),
    0 24px 60px rgba(0,0,0,.22);
}
.bulletin-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bulletin-text{
  position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  color:#fff; text-align:left;
}
.bulletin-text h2{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.75; margin:0 0 6px; }
.bulletin-text .big{ font-size:clamp(1.3rem,4vw,2rem); font-weight:600; line-height:1.15; text-transform:capitalize; }
/* Bright edge line that travels with the peel's clip boundary. */
.bulletin-edge{
  position:absolute; left:-8px; right:-8px; height:2px; bottom:0; opacity:0;
  background:#fff;
  box-shadow:0 0 12px 3px rgba(255,255,255,.9), 0 0 32px 10px rgba(232,201,160,.55);
  pointer-events:none;
}

.work-gallery-wrap{ position:relative; max-width:1200px; margin:0 auto; padding:80px 20px; }