/* One sliding handoff into the portfolio, followed by ordinary page scrolling. */
@supports (position:sticky){
  @media(prefers-reduced-motion:no-preference){
    .hero-scroll{height:calc(var(--scene-height) + 100svh)}
    .hero-scroll .hero.hero-photo{position:sticky;top:min(0px,calc(100svh - var(--scene-height)))}
    .hero-scroll .hero-photo-media{transform:scale(calc(1 + var(--handoff,0) * .035));transform-origin:50% 80%}
    .hero-scroll .hero.hero-photo:after{content:'';display:block;position:absolute;inset:0;z-index:4;pointer-events:none;background:#090c09;opacity:calc(var(--handoff,0) * .34)}
    .cases-section{margin-top:calc(-100svh - 40px);box-shadow:0 -24px 56px -30px rgba(0,0,0,.75)}
    @media(max-width:767px){.cases-section{margin-top:calc(-100svh - 24px)}}
  }
}
/* A closing statement with emphasis on the structure supporting each event. */
.case-closing-scene{position:relative;isolation:isolate;background:#111310}
.case-closing-scene .case-text-stage{overflow:hidden}
.case-cinema .case-closing{min-height:clamp(460px,58svh,620px);padding-block:100px 88px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.case-closing-scene #closing-title{width:100%;max-width:1000px;margin:0 auto;line-height:1.1;letter-spacing:-.04em}
.closing-opening-mask,.closing-bridge-mask,.closing-brand-mask{display:block;overflow:hidden;padding-block:.06em}
.case-closing-scene .closing-opening{display:block;font-size:clamp(25px,2.8vw,38px);font-weight:400;line-height:1.25;color:#d6ddcc;letter-spacing:-.035em}
.case-closing-scene #closing-title .closing-accent{display:flex;justify-content:center;align-items:baseline;gap:22px;margin-top:18px}
.case-closing-scene .closing-bridge{display:block;font-size:clamp(32px,3.8vw,54px);font-weight:400;color:var(--text);letter-spacing:-.04em}
.case-closing-scene .closing-brand{display:block;font-size:clamp(60px,6.5vw,88px);font-weight:650;line-height:1.05;color:var(--yellow);letter-spacing:-.04em}
.closing-trace{display:block;width:min(640px,80%);height:auto;overflow:visible;margin-top:56px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.closing-rail{stroke:#68713b;stroke-width:1;opacity:.55}
.closing-current{stroke:var(--yellow);stroke-width:2;opacity:.7;stroke-dasharray:1;stroke-dashoffset:0}
@media(max-width:767px){
  .case-cinema .case-closing{min-height:450px;padding-block:78px 70px}
  .case-closing-scene #closing-title .closing-accent{flex-direction:column;align-items:center;gap:3px;margin-top:19px}
  .case-closing-scene .closing-opening{font-size:clamp(24px,6.3vw,32px)}
  .case-closing-scene .closing-bridge{font-size:clamp(28px,7.5vw,38px)}
  .case-closing-scene .closing-brand{font-size:clamp(48px,14vw,70px)}
  .closing-trace{width:calc(100% - 32px);margin-top:44px}
}


/* Fade in the statement, then uncover the sliding word inside its own mask.
   Space is reserved throughout; unlike the demo, no width or margins animate. */
@media(prefers-reduced-motion:no-preference){
  .closing-reveal-ready .closing-opening{animation:closing-showup 7s linear infinite}
  .closing-reveal-ready .closing-bridge{animation:closing-bridge-showup 7s linear infinite}
  .closing-reveal-ready .closing-brand-mask{animation:closing-uncover 7s linear infinite}
  .closing-reveal-ready .closing-brand{animation:closing-slidein 7s linear infinite}
  .closing-reveal-ready .closing-opening,
  .closing-reveal-ready .closing-bridge,
  .closing-reveal-ready .closing-brand-mask,
  .closing-reveal-ready .closing-brand{animation-play-state:paused}
  .closing-reveal-running .closing-opening,
  .closing-reveal-running .closing-bridge,
  .closing-reveal-running .closing-brand-mask,
  .closing-reveal-running .closing-brand{animation-play-state:running}
}
@keyframes closing-showup{
  0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}
}
@keyframes closing-bridge-showup{
  0%,10%{opacity:0}25%,85%{opacity:1}100%{opacity:0}
}
@keyframes closing-uncover{
  0%,20%{opacity:0;clip-path:inset(0 100% 0 0)}
  21%{opacity:1;clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  36%,85%{opacity:1;clip-path:inset(0)}
  100%{opacity:0;clip-path:inset(0)}
}
@keyframes closing-slidein{
  0%,20%{transform:translateX(-105%);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  38%,100%{transform:translateX(0)}
}