/* home-film-hero (v14): full-bleed film that fills the first screen and loops forever, four narration lines in every loop, and a title strip along the bottom.
   Hero banner exceptions (named in manifest.json and APPROVED-DEVIATIONS.md): no 120px root padding,
   no 50px section H2 size, no 75% title width. The hero keeps its own rhythm.
   From 1280px wide the hero is clamp(640px, 100svh - menu, 1080px) tall and holds one stage 1920 design px wide and as tall as the hero needs, scaled to the section width, as the source.
   Below 1280px the height is automatic (poster at 16:9 plus the strip).
   Below 1280px, with no JavaScript, or when the film cannot run: the poster still and the title strip, stacked, no film. */

.home-film-hero{
  position:relative;isolation:isolate;container-type:inline-size;
  box-sizing:border-box;width:100%;overflow:hidden;
  color:var(--paper);
}
.home-film-hero__stage{position:relative}
.home-film-hero__photo{position:relative;overflow:hidden}
.home-film-hero__still,
.home-film-hero__film{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}

.home-film-hero__strip{position:relative;background:rgba(12,12,12,.72);border-top:1px solid rgba(212,175,55,.4);overflow:hidden}
.home-film-hero__title{
  margin:0;
  font-family:var(--display);font-weight:400;letter-spacing:0;color:var(--paper);
  text-shadow:0 0 calc(var(--g,0) * 44px) rgba(212,175,55,calc(var(--g,0) * .6));
}
.home-film-hero__phrase-end{white-space:nowrap}
.home-film-hero__gold{display:inline-block;color:var(--gold-pure);transform:skewX(-8deg);transform-origin:0 100%}
.home-film-hero__sweep{
  position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;opacity:0;visibility:hidden;
  background:linear-gradient(90deg,rgba(212,175,55,0) 0%,rgba(255,226,150,.30) 50%,rgba(212,175,55,0) 100%);
}
.home-film-hero__pause:focus-visible{outline:2px solid var(--gold-pure);outline-offset:4px}

/* ---- below 1280px: the poster, then the title strip. No film, no narration, no glow, no pause button ---- */
@media (max-width:1279.98px){
  .home-film-hero{display:flex;flex-direction:column;background:var(--ink)}
  .home-film-hero__stage{display:flex;flex-direction:column}
  .home-film-hero__photo{aspect-ratio:1920/1080;background:var(--grey-dark)}
  .home-film-hero__still{position:absolute;inset:0}
  .home-film-hero__film,
  .home-film-hero__sweep,
  .home-film-hero__words,
  .home-film-hero__pause{display:none}
  .home-film-hero__title{
    box-sizing:border-box;width:var(--shell);margin:0 auto;padding:clamp(28px,5vw,48px) 0;
    font-size:clamp(34px,7.2vw,64px);line-height:1.1;text-wrap:balance;
  }
  .home-film-hero__gold{margin-left:0;padding-right:.1em}
}
@media (max-width:600px){
  .home-film-hero__title{font-size:clamp(32px,9.2vw,40px);padding:24px 0 28px}
}

/* ---- from 1280px: the 1920 x 824 design, scaled to the section width ---- */
@media (min-width:1280px){
  /* the hero fills the first screen under the site menu; the page sets --site-header-h to the real menu height */
  .home-film-hero{container-type:size;height:clamp(640px,calc(100svh - var(--site-header-h,72px)),1080px)}
  .home-film-hero__stage{
    position:absolute;left:0;top:0;overflow:hidden;
    /* safari-css-check: ignore trig-relative-units. Reason: JS sizes the hero in Safari; this is the no-JS fallback. */
    width:1920px;height:calc(100cqh / tan(atan2(100cqw,1920px)));background:var(--grey-dark);
    /* safari-css-check: ignore trig-relative-units. Reason: JS sizes the hero in Safari; this is the no-JS fallback. */
    transform-origin:0 0;transform:scale(tan(atan2(100cqw,1920px)));
  }
  .home-film-hero__photo{
    position:absolute;inset:0;z-index:0;
    -webkit-mask-image:linear-gradient(to bottom,var(--grey-dark) calc(100% - 30px),rgba(24,24,24,0) 100%);
    mask-image:linear-gradient(to bottom,var(--grey-dark) calc(100% - 30px),rgba(24,24,24,0) 100%);
  }
  .home-film-hero__still{position:absolute;inset:0}
  .home-film-hero__film{position:absolute;inset:0;background:var(--grey-dark)}
  /* title strip: 232px of the 824px hero, always on */
  .home-film-hero__strip{position:absolute;left:0;right:0;bottom:0;height:232px;z-index:6;box-sizing:border-box}
  .home-film-hero__title{
    position:absolute;left:80px;top:0;bottom:0;display:flex;align-items:center;
    font-size:88px;line-height:1;white-space:nowrap;
  }
  .home-film-hero__gold{margin-left:.26em;padding-right:.1em}

  /* narration lines and the pause button: shown only while the script runs the film */
  .home-film-hero__words,
  .home-film-hero__pause{display:none}
  .home-film-hero.is-film-live .home-film-hero__words{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
  .home-film-hero.is-film-live .home-film-hero__pause{
    display:block;position:absolute;right:80px;top:50%;transform:translateY(-50%);z-index:2;
    min-width:64px;width:64px;height:64px;padding:0;
    color:var(--paper);background:rgba(24,24,24,.5);border:1px solid rgba(255,255,255,.5);cursor:pointer;
  }
  .home-film-hero.is-film-live .home-film-hero__pause::before{content:"";position:absolute;left:calc(50% - 7px);top:50%;width:5px;height:22px;transform:translateY(-50%);background:currentColor;box-shadow:9px 0 currentColor}
  .home-film-hero.is-film-live .home-film-hero__pause.is-paused::before{left:calc(50% - 5px);width:0;height:0;background:transparent;box-shadow:none;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:19px solid currentColor}
  .home-film-hero.is-film-live .home-film-hero__pause:hover,
  .home-film-hero.is-film-live .home-film-hero__pause:focus-visible{border-color:var(--gold-pure)}
  .home-film-hero__phrase{position:absolute;left:0;top:0;visibility:hidden;opacity:0}
  .home-film-hero__ink{position:absolute;left:0;top:0;width:100%;height:100%;color:var(--paper)}
  .home-film-hero__ink--soft{text-shadow:0 2px 16px rgba(24,24,24,.5)}
  .home-film-hero__logo{position:absolute;display:block;width:auto;filter:drop-shadow(0 2px 14px rgba(24,24,24,.55));will-change:transform,opacity}
  .home-film-hero__mask{position:absolute;overflow:hidden;font-family:var(--display);font-weight:400;letter-spacing:.02em;font-kerning:normal;white-space:nowrap}
  .home-film-hero__text{display:block;white-space:pre}
  .home-film-hero__char{display:inline-block;will-change:transform,opacity}
}

/* ---- reduced motion: no film, no narration, no glow, no button. The poster and the strip show ---- */
@media (prefers-reduced-motion:reduce){
  .home-film-hero__film,
  .home-film-hero__sweep{display:none !important}
}

/* The title retains its start position; added copy grows the band downward. */
.home-film-hero__intro{font-family:var(--body);font-size:18px;color:var(--paper);line-height:1.4}
@media (max-width:1279.98px){
  .home-film-hero__intro{width:var(--shell);margin:0 auto;padding:0 0 clamp(28px,5vw,48px)}
}
@media (max-width:600px){
  .home-film-hero__intro{padding-bottom:28px}
}
@media (min-width:1280px){
  /* safari-css-check: ignore trig-relative-units. Reason: JS sizes the hero in Safari; this is the no-JS fallback. */
  .home-film-hero{container-type:inline-size;height:auto;--hero-first-height:clamp(640px,calc(100svh - var(--site-header-h,72px)),1080px);--hero-scale:tan(atan2(100cqw,1920px))}
  /* safari-css-check: ignore zoom-dynamic. Reason: JS sizes the hero in Safari; this is the no-JS fallback. */
  .home-film-hero__stage{position:relative;height:auto;transform:none;zoom:var(--hero-scale);padding-top:calc(var(--hero-first-height) / var(--hero-scale) - 232px);box-sizing:border-box}
  .home-film-hero__photo,.home-film-hero.is-film-live .home-film-hero__words{height:calc(var(--hero-first-height) / var(--hero-scale));bottom:auto}
  .home-film-hero__strip{position:relative;bottom:auto;height:auto;padding:63px 296px 63px 80px}
  .home-film-hero__title{position:static;display:block;white-space:normal;font-size:88px;line-height:1.08}
  .home-film-hero__gold{margin-left:0}
  .home-film-hero__intro{max-width:1320px;margin:24px 0 0;font-size:24px}
  .home-film-hero.is-film-live .home-film-hero__pause{top:116px}
}