/* KODA 4 Kids — the hero film (replaces the tilted photograph in .hero__art).
   Loaded after koda.css. Everything is scoped to .hero__art--film / .hero__film; nothing global moves.

   The film has a white plate, not an alpha channel. mix-blend-mode:multiply makes that white vanish into
   whatever sits behind it (the hero's yellow and teal washes included), so the children stand on the page
   itself. Multiply only sees through to the hero background if no ancestor between them forms a stacking
   context, which is why the wrap's z-index, the art box's isolation/perspective and the .reveal transform
   are all switched off for this variant. */
.hero--film > .wrap { z-index:auto }
.hero__art--film { isolation:auto;perspective:none;opacity:1;transform:none;transition:none }

.hero__film-stage { position:relative }
.hero__film { position:relative;aspect-ratio:3/2;width:118%;margin-left:-9%;
  mix-blend-mode:multiply;filter:brightness(1.015); /* lifts any 254 to 255, so the plate is truly invisible */
  pointer-events:none;user-select:none;-webkit-user-select:none }
.hero__film-still,.hero__film-video { position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain }
.hero__film-still img { display:block;width:100%;height:100%;object-fit:contain }
.hero__film-still--end { display:none }

/* No JS, reduced motion, autoplay refused or a failed file: the finished winter still, never a blank box. */
html:not(.js) .hero__film-video,html:not(.js) .hero__film-still--start,
.hero__film.is-static .hero__film-video,.hero__film.is-static .hero__film-still--start { display:none }
html:not(.js) .hero__film-still--end,.hero__film.is-static .hero__film-still--end { display:block }
@media (prefers-reduced-motion:reduce) {
  .hero__film-video,.hero__film-still--start { display:none }
  .hero__film-still--end { display:block }
}

/* The seal stays, a size down, tucked under the film's bottom-left corner on the empty floor below the
   children's boots - the pointer parallax moves it a few pixels, so it keeps a margin from them. */
.hero__art--film .hero__sealwrap { top:auto;bottom:-3.9rem;left:-1.6rem;width:clamp(6.75rem,9vw,7.75rem) }
.hero__art--film .hero__seal b { font-size:clamp(1.45rem,2.2vw,1.8rem) }
.hero__art--film .hero__seal span { font-size:clamp(.5rem,.62vw,.56rem);padding:0 1.1rem }

.hero__film-controls { display:flex;justify-content:flex-end;gap:.25rem;margin-top:.35rem;min-height:2.2rem;position:relative;z-index:1 }
.hero__film-btn { font:700 .8rem/1 var(--body);color:var(--ink-soft);background:transparent;border:0;
  padding:.6rem .5rem;cursor:pointer;border-radius:var(--r-sm) }
.hero__film-btn:hover { color:var(--ink);text-decoration:underline;text-underline-offset:4px }
.hero__film-btn:focus-visible { outline:3px solid var(--teal);outline-offset:3px }
.hero__film-btn svg { display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;margin-right:.3em }
.hero__film-btn[hidden] { display:none }
@media (prefers-reduced-motion:reduce) { .hero__film-controls { display:none } }

@media (max-width:900px) {
  .hero__art--film { max-width:560px }
  .hero__film { width:112%;margin-left:-6% }
  /* one column: the seal sits centred on the floor below the boots, the controls under it */
  .hero__art--film .hero__sealwrap { left:50%;translate:-50% 0;bottom:-4.8rem }
  .hero__film-controls { justify-content:center;margin-top:5.4rem }
}
@media (max-width:640px) {
  .hero__film { width:110%;margin-left:-5% }
}