/* Hero rail v1 (2026-09-26). James: "can we implement a load bar for the hero? On mobile its unclear when to start
   scrolling", and "the pause/skip buttons stack weird". One rail on the film's bottom edge: the bar fills while the
   opening frames arrive ("Loading the film"), says "Scroll to play" when they are in, then shows playback; the chapter
   name sits on the left, Pause and Skip on the right. Driven by app-coral-hero-v3.js. */
.film-progress{overflow:hidden}
.film-progress::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--load,0) * 100%);background:rgb(255 255 255 / .55);transition:width .35s ease}
.film-progress i{position:relative;background:var(--tube-sat,#ff3d9a)!important;box-shadow:0 0 6px var(--n70,transparent)}
body.film-loading .film-progress i{opacity:0}
body.film-loading #chapter{font-variant-numeric:tabular-nums}
body.film-ready #chapter::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);animation:rail-nudge 1.4s ease-in-out infinite}
@keyframes rail-nudge{0%,100%{translate:0 0}50%{translate:0 3px}}
@media (max-width:800px) and (orientation:portrait){
  body .film-tools{top:calc(var(--hero-top) + var(--film-h) - 44px)!important;bottom:auto!important;left:0!important;right:0!important;height:44px;margin:0!important;padding:0 16px!important;
    display:flex!important;justify-content:space-between!important;align-items:center;gap:12px;z-index:4;color:#fff!important;
    background:linear-gradient(180deg,transparent,rgb(10 10 14 / .58))!important;text-shadow:0 1px 2px rgb(0 0 0 / .45)!important;font-size:12px!important;font-weight:600}
  body .film-tools>#chapter{display:inline-flex!important;align-items:center;white-space:nowrap}
  body .film-tools>div{background:none!important;border:0!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;gap:16px!important;box-shadow:none!important}
  body .film-tools button,body .film-tools a{color:#fff!important;background:none!important;border:0!important;padding:0!important;min-height:44px;font-size:12px!important;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
  body .film-progress{top:calc(var(--hero-top) + var(--film-h) - 3px)!important;bottom:auto!important;height:3px!important;z-index:5;background:rgb(255 255 255 / .22)!important}
}
/* the smallest phones: scrolling is the skip, and the page keeps its own skip link */
@media (max-width:374px) and (orientation:portrait){body .film-tools>div>a{display:none!important}}
@media (prefers-reduced-motion:reduce){body.film-ready #chapter::after{animation:none}.film-progress::before{transition:none}}