/* CLUB ESOX — 3 FILMS / WILD PREDATOR V6. Preserve the approved identity. */
.scene--lake{opacity:0!important}
.scene--water{opacity:1!important}
.scene__photo--water{background-image:url('../img/esox-scene-1-poster.webp');background-position:center;filter:brightness(.28) blur(9px)}
.film-stack{position:absolute;z-index:1;inset:0;overflow:hidden;background:#06140e;pointer-events:none;isolation:isolate}
.film-shot{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .72s ease,transform 1.25s var(--ease),visibility 0s linear .72s;will-change:opacity}
.film-shot.is-active{opacity:1;visibility:visible;transform:scale(1);transition:opacity .72s ease,transform 1.25s var(--ease),visibility 0s}
.film-shot::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--poster);background-position:center;background-size:cover;filter:brightness(.68);}
.film-shot__video{display:block;position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.93) saturate(1.08) contrast(1.05);pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0)}
/* Desktop films are authored with the subject right of center, to leave the copy legible. */
.scene--water::after{z-index:4;inset:0;background:linear-gradient(90deg,rgba(3,14,10,.49) 0%,rgba(3,14,10,.21) 43%,transparent 84%),linear-gradient(0deg,rgba(3,14,10,.60) 0%,transparent 30%,rgba(3,14,10,.08) 78%)}
.film-shot[data-shot="2"] .film-shot__video{filter:brightness(.78) saturate(.89) contrast(1.13)}
.story-beat:not(.is-active){visibility:hidden;transition:opacity .35s ease, transform .5s var(--ease), visibility 0s linear .35s}
.story-beat.is-active{visibility:visible}
/* Our caption acts as a guided narrative over each living scene. */
.story-caption{z-index:11}
.motion-activate{z-index:40}
@media(max-width:980px){.film-shot__video{object-position:center}}
@media(max-width:700px){
  .story-track{height:510svh;height:510dvh}
  .story-sticky{height:100svh;height:100dvh;min-height:0;overflow:hidden}
  .film-stack{inset:0;z-index:1;box-shadow:none;border:0}
  .film-shot{inset:0;transform:scale(1.01)}
  .film-shot::before{background-position:center;background-size:cover;filter:brightness(.7)}
  .film-shot__video{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;filter:brightness(.90) saturate(1.08) contrast(1.04)}
  .film-shot[data-shot="0"] .film-shot__video{object-position:51% center}
  .film-shot[data-shot="1"] .film-shot__video{object-position:51% center}
  .film-shot[data-shot="2"] .film-shot__video{object-position:50% center}
  /* Dark ONLY the type area, so the animal remains bright and clearly visible in the middle. */
  .scene--water::after{z-index:4;background:linear-gradient(180deg,rgba(3,13,10,.80) 0%,rgba(3,13,10,.61) 17%,rgba(3,13,10,.13) 39%,rgba(3,13,10,.01) 65%,rgba(3,13,10,.65) 100%)}
  .wild-video-grade{opacity:.42}
  .water-haze{opacity:.13}
  .underwater-rays{opacity:.16}
  .scene-vignette{background:radial-gradient(ellipse at 50% 54%,transparent 29%,rgba(2,9,7,.15) 76%,rgba(2,9,7,.51) 100%)}
  .story-beat,.story-beat--impact,.story-beat--end{left:19px;right:19px;width:auto;top:clamp(126px,16svh,169px);transform:translate3d(0,20px,0);text-align:left}
  .story-beat.is-active,.story-beat--impact.is-active,.story-beat--end.is-active{transform:translate3d(0,0,0)}
  .story-beat h1,.story-beat h2{font-size:clamp(47px,12.5vw,69px);line-height:.79}
  .story-beat h2{font-size:clamp(47px,12.1vw,69px)}
  .story-beat--impact h2{font-size:clamp(44px,11.6vw,64px)}
  .story-beat--end h2{font-size:clamp(43px,11.2vw,62px)}
  .story-beat p{font-size:12px;max-width:min(80vw,295px);line-height:1.47;margin-top:14px;text-shadow:0 1px 8px #051008}
  .story-beat[data-beat="0"] p{max-width:min(77vw,275px)}
  .kicker{font-size:9px;margin-bottom:15px;padding:6px 9px}
  .story-skip{top:95px;z-index:34}
  .hero-coordinate{bottom:calc(91px + env(safe-area-inset-bottom,0px))}
  .scroll-invite{bottom:calc(25px + env(safe-area-inset-bottom,0px))}
  .story-counter{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .motion-activate{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px) and (max-height:710px){
  .story-beat,.story-beat--impact,.story-beat--end{top:clamp(112px,16svh,137px)}
  .story-beat h1,.story-beat h2{font-size:clamp(43px,11.8vw,59px)}
  .story-beat--impact h2{font-size:clamp(42px,11.3vw,57px)}
  .story-beat--end h2{font-size:clamp(41px,10.9vw,56px)}
  .story-beat p{margin-top:9px;font-size:11px}
  .hero-discover{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-opt-in) .story-track{height:100svh;height:100dvh}
  html:not(.motion-opt-in) .film-shot{transition:none}
  html:not(.motion-opt-in) .film-shot__video{visibility:hidden}
  html:not(.motion-opt-in) .film-shot::before{filter:brightness(.95)}
  html:not(.motion-opt-in) .scene--water{opacity:1!important}
  html:not(.motion-opt-in) .scene--lake{opacity:0!important}
  html:not(.motion-opt-in) .story-beat[data-beat="0"]{top:clamp(126px,16svh,169px);transform:none!important}
}
/* In the opening shot, keep the moving fish below the large mobile headline. */
@media(max-width:700px){
  .film-shot[data-shot="0"] .film-shot__video{
    transform:translate3d(0,11%,0) scale(1.04);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 23%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 23%);
  }
  .film-shot[data-shot="0"]::before{filter:brightness(.25) blur(16px)}
}