/* Hero Cinematic — the site's one hero device.
   Behaviour: assets/js/components/hero-cinematic.js
   Notes: docs/component-hero-cinematic-notes.md
   Children are optional; a page emits the ones it needs. */

/* ── Base ── */

.hero-cinematic{
  position:relative;
  min-height:max(100vh,700px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--charcoal);
  overflow:hidden;
  padding:14rem 2rem 7rem;
  text-align:center;
}
/* Gold glow. Switched off on --media. */
.hero-cinematic::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(ellipse 70% 60% at 50% 32%,rgba(254,192,39,.07),transparent 62%);
  pointer-events:none;
}
/* Fade into the body below. */
.hero-cinematic::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  height:120px;
  background:linear-gradient(180deg,transparent,#faf9f6);
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1000px;
  margin:0 auto;
}
.hero-spark{
  font-family:var(--display);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.6rem;
}
.hero-headline{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,5rem);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.hero-headline .gold{color:var(--gold)}
.hero-sub{
  font-family:var(--body);
  font-size:clamp(1rem,1.5vw,1.25rem);
  font-weight:300;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  max-width:660px;
  margin:1.7rem auto 0;
}
.hero-cta{
  display:inline-block;
  margin-top:2.4rem;
  font-family:var(--display);
  font-size:clamp(.8rem,1.2vw,.95rem);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#000;
  background:var(--gold);
  padding:1.1rem 3.4rem;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
  position:relative;
  overflow:hidden;
  transition:filter .3s,box-shadow .3s,transform .3s;
}
.hero-cta::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .5s ease;
}
.hero-cta:hover::before{left:100%}
.hero-cta:hover{
  filter:brightness(1.12);
  box-shadow:0 8px 35px rgba(254,192,39,.4);
  transform:translateY(-2px);
}

@media(max-width:768px){
  .hero-cinematic{padding:10rem 1.5rem 4.5rem}
}

/* ── --compact ── */

/* Legal pages. New boxes get a modifier, not a page override. */
.hero-cinematic--compact{
  min-height:0;
}

/* ── --media ── */

/* Order: media 0, overlay 1, content 2. */
.hero-cinematic--media .hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-cinematic--media .hero-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.28;
}
/* Scoped to --media; the pair switches together. */
.hero-cinematic--media::before{display:none}
.hero-cinematic--media .hero-media-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 32%,rgba(254,192,39,.07),transparent 62%);
}

/* ── --feature ── */

.hero-cinematic--feature .hero-fallback{opacity:1}
/* Gold glow + top scrim + flat pull. */
.hero-cinematic--feature .hero-media-overlay{
  background:
    radial-gradient(ellipse 70% 60% at 50% 32%,rgba(254,192,39,.07),transparent 62%),
    linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 34%),
    linear-gradient(rgba(10,10,10,.4),rgba(10,10,10,.4));
}
.hero-cinematic--feature::after{
  height:64px;
  background:linear-gradient(180deg,transparent,rgba(250,249,246,.85));
}

.hero-cinematic--feature .hero-spark{
  font-family:var(--body);
  font-size:.875rem;
  font-weight:800;
  color:var(--gold-dark);
  margin-bottom:1.75rem;
  text-shadow:0 0 12px rgba(0,0,0,.9),0 0 24px rgba(230,173,31,.25);
}
.hero-cinematic--feature .hero-headline{
  font-size:clamp(2.8rem,6.5vw,6rem);
  letter-spacing:.05em;
  line-height:1.08;
  text-shadow:
    0 0 40px rgba(0,0,0,.95),
    0 0 80px rgba(0,0,0,.8),
    0 2px 4px rgba(0,0,0,.9),
    0 4px 60px rgba(0,0,0,.6);
}

.hero-cinematic--feature .hero-sub{
  font-family:var(--display);
  font-size:clamp(1rem,1.6vw,1.55rem);
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.55;
  max-width:880px;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.6);
}
.hero-cinematic--feature .hero-cta{
  font-size:clamp(.8rem,1.2vw,1rem);
  padding:1.2rem 4rem;
  margin-top:2rem;
}

/* ── --video ── */

/* Black, then the video fades in when it is really playing. The still is
   failure-only and is NOT the LCP element any more — traded away deliberately. */
.hero-cinematic--video .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  /* Fades in FROM BLACK, not from the still. opacity:1-from-the-start was tried
     and rejected: Safari paints the first decoded frame as soon as it has one, so
     a static frame sat there and then jittered into motion. Held at 0 until the
     'playing' event means the reveal only ever happens over real, moving frames,
     and with the still display:none there is nothing behind it but --charcoal.
     Notes: docs/component-hero-cinematic-notes.md */
  opacity:0;
  transition:opacity .5s ease;
}
.hero-cinematic--video .hero-video.visible{opacity:1}

/* The still is a fallback, not a curtain. ORDERING: these must stay after the
   --feature rule above that sets .hero-fallback{opacity:1} — same specificity,
   so source order is what demotes it. */
/* display:none, not opacity:0 or visibility:hidden. Safari was observed painting
   the still during load with opacity:0;visibility:hidden — not reproducible in
   Chromium, where computed style read opacity:0/visibility:hidden throughout.
   display:none cannot be painted by any engine, which ends the class of bug.
   It also drops the element from compositing entirely.
   Trade: no fade on the retreat. A snap to the still on failure is fine. */
.hero-cinematic--video .hero-fallback{display:none}

/* Retreat. hero-cinematic.js puts .is-fallback on the section when playback
   stalls or errors. The video sits ABOVE the still in DOM order, so it has to be
   hidden for the still to be seen — THC does not need this because its markup
   orders the pair the other way. */
.hero-cinematic--video.is-fallback .hero-video{opacity:0}
.hero-cinematic--video.is-fallback .hero-fallback{display:block;opacity:1}

/* Both of these drop the video entirely, so the still has to come back or the
   hero renders black. THC ships neither rule; do not copy that. */
@media(prefers-reduced-motion:reduce){
  .hero-cinematic--video .hero-video{display:none}
  .hero-cinematic--video .hero-fallback{display:block;opacity:1}
}
.no-js .hero-cinematic--video .hero-video{display:none}
.no-js .hero-cinematic--video .hero-fallback{display:block;opacity:1}

/* ── Page treatments ── */

/* /about/ */
.hero-cinematic--about.hero-cinematic--feature .hero-media-overlay{
  background:
    radial-gradient(ellipse 70% 60% at 50% 32%,rgba(254,192,39,.007),transparent 62%),
    linear-gradient(180deg,rgba(10,10,10,.045) 0%,rgba(10,10,10,0) 34%),
    linear-gradient(rgba(10,10,10,.15),rgba(10,10,10,.15));
}
/* /about/, phone crop. */
@media(max-width:768px){
  .hero-cinematic--about .hero-fallback{object-position:72% center}
}

/* /games/. Notes: docs/page-games-notes.md */
.hero-cinematic--ticket.hero-cinematic--feature .hero-media-overlay{
  background:
    radial-gradient(ellipse 70% 60% at 50% 32%,rgba(254,192,39,.07),transparent 62%),
    linear-gradient(rgba(10,10,10,.6),rgba(10,10,10,.6));
}

/* ── --article ── */

/* single.php only. An article hero is a BAND, not a landing screen: the reader
   came for the text, so the image frames the headline instead of replacing the
   first screen. Sized by aspect-ratio rather than vh, because the box is an
   image crop — and the ratio steps down as the viewport narrows, since 21:9 at
   375px is 160px tall and cannot hold a headline. Content taller than the box
   grows it; aspect-ratio is a preferred size, not a cap. */
/* The ratio is expressed as HEIGHT MATH, not `aspect-ratio`, and that is not a
   style preference.

   `aspect-ratio` with a `max-height` cap resizes the WRONG AXIS: when the cap
   binds, the browser preserves the ratio by narrowing the box, so at 1920 the
   height clamps to 605px and the width collapses to 605 x 21/9 = 1412px,
   left-aligned with the page showing through beside it. Multiplying the
   viewport width instead keeps the box full-bleed and caps only the height.

   42.857vw is 9/21 of the width. The cap is min(), so whichever is shorter
   wins: the band ratio on a normal screen, half the viewport on a tall one.
   min-height rather than height, so a long headline grows the box instead of
   being clipped by the base overflow:hidden. */
.hero-cinematic--article{
  min-height:min(56vh,42.857vw);
  padding:9.5rem 2rem 3.5rem;
}
.hero-cinematic--article .hero-headline{
  text-transform:none;
  letter-spacing:.01em;
  font-size:clamp(1.9rem,4vw,3.2rem);
}
/* Declared after --feature so this wins on source order at equal specificity:
   an article keeps the 3.2rem ceiling, not --feature's 6rem. */
.hero-cinematic--article .hero-spark{
  margin-bottom:1rem;
}
/* 16:9 — 9/16 of the width. 21:9 below 900px is too short to hold a headline. */
@media(max-width:900px){
  .hero-cinematic--article{min-height:min(56vh,56.25vw)}
}
/* 3:2 — 2/3 of the width. Portrait phones need the extra depth. */
@media(max-width:600px){
  .hero-cinematic--article{
    min-height:min(56vh,66.667vw);
    padding:8.5rem 1.5rem 3rem;
  }
}

/* ── --card ── */

/* The featured banner on /articles/. --article sizes a hero the fixed site
   header overlays, so its top padding clears that header; this box sits
   mid-page inside the grid and its padding is symmetric instead.
   Declared last so it wins on source order against --feature and --article at
   equal specificity — same reason --article is declared after --feature. */
.hero-cinematic--card{
  min-height:min(42vh,34vw);
  padding:3.5rem 2rem;
}
/* The base ::after fades into #faf9f6 below the hero. A banner ends at its own
   edge with grid gap under it, so there is nothing to fade into. */
.hero-cinematic--card::after{display:none}
.hero-cinematic--card .hero-headline{
  text-transform:none;
  letter-spacing:.01em;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
}
.hero-cinematic--card .hero-spark{margin-bottom:.9rem}
.hero-cinematic--card .hero-sub{
  font-size:clamp(.95rem,1.2vw,1.15rem);
  max-width:660px;
  margin-top:1.2rem;
}
/* 16:9, then 3:2 — the 21:9-ish band is too shallow to hold a headline and a
   deck once the box narrows. Mirrors --article's two steps. */
@media(max-width:900px){
  .hero-cinematic--card{min-height:min(42vh,46vw)}
}
@media(max-width:600px){
  .hero-cinematic--card{
    min-height:min(46vh,62vw);
    padding:3rem 1.5rem;
  }
}