/* ============================================================
   DevCo · §04 "Our Role" — STICKY SCROLL-SCENE  (CONTAINED)
   ------------------------------------------------------------
   Void-proof mechanic (UNCHANGED):
   - .dc-role-scene  : a tall outer TRACK.
   - .dc-role-scene__stage : position:sticky; top:0; height:100vh.
       Because it is CSS sticky AND exactly 100vh, it ALWAYS
       fills the viewport — it physically cannot show a void.
       (No GSAP ScrollTrigger pin is used — pin caused the void
       failures in 3 prior attempts.)
   - .dc-role-scene__panel : the 3 role panels, absolutely
       stacked in the same box (inset:0). Exactly one active.

   TRACK LENGTH (weighted — per client request):
   - The track is 240vh, a modest bump from 200vh. Its scrollable
     distance (height - 100vh) is mapped by the JS driver into
     three panel zones, and EACH zone holds an arrive sub-zone
     plus a longer HOLD sub-zone where the panel sits fully
     composed and still. The extra length funds those holds so
     every panel has real weight and an even, deliberate rhythm
     — the user cannot flick straight to panel 03. The bump is
     restrained: the section stays a pleasant length, not a
     burden. Panel 03's zone still ends exactly at the sticky
     release, so there is no empty dark void at any position.

   LAYOUT (refined per client feedback):
   - No longer full-bleed. Each panel is a CONTAINED two-column
     layout sitting on the section's dark ground with generous
     padding — like the elyse-residence "amenities" section:
       LEFT  : role number, label, serif heading, body paragraph
               — sitting on the dark ground (no photo behind it).
       RIGHT : the role photo CONTAINED in a frame, with a small
               overlapping accent image for layered depth.
   - The full-bleed Apple scrim is gone — text is on dark ground.

   BACKGROUND MOTION (new):
   - A faint coordinate grid and a large ghost word drift slowly
     with scroll progress while the scene is pinned, plus a quiet
     parallax on the framed images, so the user can always SEE
     they are scrolling even though the stage is held. Desktop
     only; quiet and premium. Disabled for reduced-motion.

   EVERY rule is scoped under .dc-role-scene so this file can be
   auto-enqueued site-wide and affect nothing else.

   Degrades:
   - prefers-reduced-motion : track collapses, 3 roles render as
       a normal, fully-visible readable stack, no background drift.
   - <= 760px : a clean stacked version (sticky scene is heavy
       on small phones; the stacked fallback is fully readable).
   ============================================================ */

/* — The outer TRACK — tall, gives the scene its scroll length —
   Height is content-matched: scrollable distance = height - 100vh.
   240vh track => 140vh of scroll, mapped by the JS driver into
   three panel zones, each an arrive sub-zone + a weighted HOLD
   sub-zone, so every panel sits composed and still for a real
   stretch of scroll. The final zone still ends at the sticky
   release so panel 03 is fully composed through it (no void).
   The 200vh -> 240vh bump is deliberately modest: enough to give
   each panel weight, restrained enough to stay pleasant. */
.dc-role-scene{
  position:relative;
  height:240vh;
  background:var(--ink, #14120E);
}

/* — The STAGE — the void-proof hold. Sticky + exactly 100vh. — */
.dc-role-scene__stage{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--ink, #14120E);
}

/* — The deck — the box every panel is absolutely stacked into — */
.dc-role-scene__deck{
  position:absolute;
  inset:0;
}

/* ── BACKGROUND MOTION LAYER ──────────────────────────────────
   Sits behind every panel inside the stage. Two quiet elements:
   a faint coordinate grid and a very large ghost word. The JS
   driver drifts them with scroll progress so the pinned scene
   never "feels stuck". Pointer-events off; aria-hidden in markup
   would be ideal but this layer is injected by JS. */
.dc-role-scene__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
/* faint coordinate grid — a quiet construction-drawing motif */
.dc-role-scene__grid{
  position:absolute;
  /* oversized so the drift never exposes an edge */
  left:-10%;
  top:-30%;
  width:120%;
  height:160%;
  background-image:
    linear-gradient(to right,  rgba(237,230,214,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,230,214,.05) 1px, transparent 1px);
  background-size:96px 96px;
  will-change:transform;
}
/* a single large ghost word, set off to one edge, drifting */
.dc-role-scene__ghost{
  position:absolute;
  right:-2%;
  bottom:4%;
  margin:0;
  font-family:var(--font-display, Georgia, serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(140px,20vw,300px);
  line-height:.8;
  letter-spacing:-.03em;
  color:rgba(237,230,214,.035);
  white-space:nowrap;
  will-change:transform;
  user-select:none;
}

/* ── A ROLE PANEL ─────────────────────────────────────────────
   All 3 panels occupy the SAME box. The panel is a flex centring
   frame: it holds the CONTAINED two-column layout in the middle
   of the dark stage with padding. Padding is kept vh-aware AND
   capped so the content column ALWAYS fits inside the 100vh
   stage — copy must never clip. */
.dc-role-scene__panel{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  /* vertical padding tightened + capped (was up to 128px) so the
     tallest panel content still fits within 100vh; horizontal
     padding unchanged. */
  padding:clamp(40px,6vh,72px) clamp(24px,5vw,80px);
  opacity:0;
  visibility:hidden;
  /* default state for non-JS / pre-init: hidden, JS reveals #1 */
}
.dc-role-scene__panel.is-active{
  opacity:1;
  visibility:visible;
}

/* ── THE CONTAINED TWO-COLUMN LAYOUT ──────────────────────────
   A bounded inner shell — text-left / image-right. Sits inside
   the section, never bleeds edge to edge. */
.dc-role-scene__inner{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(36px,5vw,88px);
  width:100%;
  max-width:1240px;
  margin:0 auto;
}

/* ── LEFT COLUMN — text on the dark ground ────────────────────*/
.dc-role-scene__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* — line-mask wrapper: each animated line clips its own slide — */
.dc-role-scene__line{
  display:block;
  overflow:hidden;
}
.dc-role-scene__line > span{
  display:block;
  will-change:transform;
}

/* — Number + label lead row — */
.dc-role-scene__lead{
  display:flex;
  align-items:baseline;
  gap:clamp(16px,2vw,24px);
  /* tightened so the content column fits the 100vh stage */
  margin-bottom:clamp(12px,1.8vh,22px);
}
.dc-role-scene__num{
  font-family:var(--font-display, Georgia, serif);
  font-weight:400;
  /* capped a touch smaller so the lead row never forces overflow */
  font-size:clamp(46px,4.4vw,74px);
  line-height:.82;
  letter-spacing:-.04em;
  color:var(--bone, #EDE6D6);
}
.dc-role-scene__label{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:var(--fs-mono, .6875rem);
  letter-spacing:var(--tracking-mono, .15em);
  text-transform:uppercase;
  color:var(--rust, #A85A3A);
  padding-bottom:.35em;
}

/* — Heading —
   Sized with a vh-aware upper bound so it cannot, together with
   the number row and the 3-line body, exceed the 100vh stage. */
.dc-role-scene__heading{
  font-family:var(--font-display, Georgia, serif);
  font-weight:400;
  font-size:clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height:1.07;
  letter-spacing:var(--tracking-display, -.018em);
  color:var(--bone, #EDE6D6);
  margin:0 0 clamp(12px,1.8vh,22px);
  max-width:18ch;
}

/* — Body — */
.dc-role-scene__body{
  font-family:var(--font-sans, system-ui, sans-serif);
  font-size:clamp(1rem, .96rem + .26vw, 1.14rem);
  line-height:1.6;
  color:var(--bone-soft, rgba(237,230,214,.64));
  margin:0;
  max-width:46ch;
}

/* ── RIGHT COLUMN — the CONTAINED, framed role image ──────────
   A bounded media frame (NOT a full-bleed background). A large
   primary image with a smaller overlapping accent for layered
   depth, in the elyse-residence manner. */
.dc-role-scene__media{
  position:relative;
  width:100%;
  /* a calm portrait-leaning frame, capped so it never dominates
     and never forces the panel past 100vh. */
  aspect-ratio:4 / 3.4;
  max-height:min(58vh,520px);
  justify-self:center;
}

/* primary contained image */
.dc-role-scene__frame{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid var(--bone-hair, rgba(237,230,214,.16));
  background:#221d18;
}
.dc-role-scene__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* a touch of scale gives the cross-dissolve quiet life; the JS
     parallax nudges this further with translateY on scroll. */
  transform:scale(1.06);
  will-change:transform,opacity;
}

/* small overlapping accent image — layered-depth cue */
.dc-role-scene__accent{
  position:absolute;
  right:clamp(-14px,-1.4vw,-26px);
  bottom:clamp(-16px,-1.8vw,-30px);
  width:clamp(110px,15vw,176px);
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid var(--bone-hair, rgba(237,230,214,.16));
  background:#221d18;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
}
.dc-role-scene__accent .dc-role-scene__img{
  transform:scale(1.12);
  object-position:center;
}

/* a hairline corner tick on the frame — quiet construction motif */
.dc-role-scene__media::after{
  content:"";
  position:absolute;
  top:clamp(-9px,-1vw,-14px);
  left:clamp(-9px,-1vw,-14px);
  width:clamp(22px,3vw,40px);
  height:clamp(22px,3vw,40px);
  border-top:1px solid var(--rust, #A85A3A);
  border-left:1px solid var(--rust, #A85A3A);
  pointer-events:none;
}

/* ── PROGRESS INDICATOR ───────────────────────────────────────
   Subtle: three ticks + a fill rail at the side of the stage. */
.dc-role-scene__progress{
  position:absolute;
  top:50%;
  right:clamp(18px,3vw,44px);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:5;
}
.dc-role-scene__tick{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:var(--fs-mono-sm, .625rem);
  letter-spacing:var(--tracking-mono, .15em);
  color:var(--bone-faint, rgba(237,230,214,.42));
  transition:color .5s var(--ease, ease);
}
.dc-role-scene__tick-rail{
  position:relative;
  display:block;
  width:36px;
  height:2px;
  background:var(--bone-hair, rgba(237,230,214,.16));
  overflow:hidden;
}
.dc-role-scene__tick-fill{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:scaleX(0);
  background:var(--rust, #A85A3A);
}
.dc-role-scene__tick.is-active{
  color:var(--bone, #EDE6D6);
}
.dc-role-scene__tick.is-done .dc-role-scene__tick-fill{
  transform:scaleX(1);
}

/* — A whisper-line "scroll" cue on the very first panel — */
.dc-role-scene__cue{
  position:absolute;
  left:clamp(24px,5vw,80px);
  top:clamp(36px,6vh,72px);
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:var(--fs-mono-sm, .625rem);
  letter-spacing:var(--tracking-mono, .15em);
  text-transform:uppercase;
  color:var(--bone-faint, rgba(237,230,214,.42));
  z-index:5;
}

/* ── ENHANCED-MODE PRIMING ────────────────────────────────────
   When JS is active it adds .dc-role-scene--ready. Until then,
   panels just render with #1 visible so no-JS users see content. */
.dc-role-scene:not(.dc-role-scene--ready) .dc-role-scene__panel:first-of-type{
  opacity:1;
  visibility:visible;
}
.dc-role-scene:not(.dc-role-scene--ready) .dc-role-scene__img{
  transform:scale(1);
}

/* ── Mid-width: keep two columns but tighten ──────────────────*/
@media (max-width:1100px) and (min-width:761px){
  .dc-role-scene__inner{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.92fr);
    gap:clamp(28px,4vw,56px);
  }
  .dc-role-scene__media{
    max-height:min(52vh,440px);
  }
}

/* ── Short viewports: protect the copy from clipping ──────────
   On a short-but-wide window the 100vh stage gets tight. Pull
   the panel padding and media in further so the content column
   always fits and the copy never clips. */
@media (min-width:761px) and (max-height:760px){
  .dc-role-scene__panel{
    padding-block:clamp(24px,4vh,44px);
  }
  .dc-role-scene__num{
    font-size:clamp(40px,3.6vw,58px);
  }
  .dc-role-scene__heading{
    font-size:clamp(1.7rem,1.1rem + 1.8vw,2.6rem);
  }
  .dc-role-scene__media{
    max-height:min(64vh,420px);
  }
  .dc-role-scene__ghost{
    font-size:clamp(120px,16vw,220px);
  }
}

/* ============================================================
   DEGRADE 1 — prefers-reduced-motion
   The track collapses to auto height; the sticky stage releases;
   the 3 roles render as a normal, fully-visible readable stack.
   The background drift layer is removed entirely.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .dc-role-scene{
    height:auto;
  }
  .dc-role-scene__stage{
    position:static;
    height:auto;
    overflow:visible;
  }
  .dc-role-scene__deck{
    position:static;
    display:flex;
    flex-direction:column;
  }
  .dc-role-scene__panel{
    position:relative;
    inset:auto;
    opacity:1;
    visibility:visible;
    padding-block:clamp(56px,9vh,104px);
  }
  .dc-role-scene__bg{
    display:none;
  }
  .dc-role-scene__img{
    transform:scale(1);
  }
  .dc-role-scene__accent .dc-role-scene__img{
    transform:scale(1.06);
  }
  .dc-role-scene__line > span{
    transform:none !important;
  }
  .dc-role-scene__progress,
  .dc-role-scene__cue{
    display:none;
  }
}

/* ============================================================
   DEGRADE 2 — small phones (<= 760px)
   A clean stacked version. The sticky scene is heavy on small
   phones; a fully-readable stack is the accepted fallback.
   role-scene.js detects this width and skips the scroll driver.
   The contained layout stacks: text, then framed image.
   Background drift layer is removed — mobile stays simple.
   ============================================================ */
@media (max-width:760px){
  .dc-role-scene{
    height:auto;
  }
  .dc-role-scene__stage{
    position:static;
    height:auto;
    overflow:visible;
  }
  .dc-role-scene__deck{
    position:static;
    display:flex;
    flex-direction:column;
  }
  .dc-role-scene__bg{
    display:none;
  }
  .dc-role-scene__panel{
    position:relative;
    inset:auto;
    opacity:1;
    visibility:visible;
    padding:clamp(48px,8vh,80px) clamp(20px,6vw,32px);
  }
  .dc-role-scene__inner{
    grid-template-columns:1fr;
    gap:clamp(32px,7vw,44px);
    max-width:520px;
  }
  .dc-role-scene__media{
    order:2;
    aspect-ratio:4 / 3.2;
    max-height:none;
  }
  .dc-role-scene__content{
    order:1;
  }
  .dc-role-scene__accent{
    width:clamp(88px,26vw,124px);
    right:-12px;
    bottom:-16px;
  }
  .dc-role-scene__img{
    transform:scale(1);
  }
  .dc-role-scene__accent .dc-role-scene__img{
    transform:scale(1.06);
  }
  .dc-role-scene__line > span{
    transform:none !important;
  }
  .dc-role-scene__progress{
    display:none;
  }
  .dc-role-scene__cue{
    display:none;
  }
}