/* v1.2 scenes on Gaz batch 3. Phone first; desktop from 861px.
   Layered heroes: a .canvas box reproduces object-fit:cover for the art's own aspect (9:16 phone, 16:9 desktop), so the poster and
   every layer share one coordinate system and stay registered. Only sky, haze, rays and dust move; ground and figures never do. */
.scene{--fx:.5;--fy:.5;position:relative;isolation:isolate;overflow:hidden;background:var(--ink);display:flex;flex-direction:column}
.scene-media{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:size}
.canvas{--ar:calc(1080/1920);position:absolute;width:max(100cqw,calc(100cqh*var(--ar)));height:max(100cqh,calc(100cqw/var(--ar)));
  left:calc((100cqw - max(100cqw,calc(100cqh*var(--ar))))*var(--fx));top:calc((100cqh - max(100cqh,calc(100cqw/var(--ar))))*var(--fy));transform-origin:50% 70%}
.canvas .poster,.canvas .poster img{position:absolute;inset:0;width:100%;height:100%}
.canvas .poster img{background:var(--midnight)}
.layers{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.layers img{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none;pointer-events:none}
/* bleed alternate replaces the base sky (layer-registration.json): 116.11% x 116.02% at -8.06% / -8.02% (phone) */
.layers .l-sky{width:116.11%;height:116.02%;left:-8.06%;top:-8.02%;inset:auto}
.scene.layers-on .layers{opacity:1}
.art{position:absolute;inset:0;overflow:hidden}
.art .poster,.art .poster img{position:absolute;inset:0;width:100%;height:100%}
.art .poster img{object-fit:cover;object-position:calc(var(--fx)*100%) calc(var(--fy)*100%);background:var(--midnight);transform-origin:50% 60%}
.scene-copy{position:relative;z-index:1}
.scene-note{position:absolute;left:var(--pad);bottom:.9rem;max-width:calc(100% - 5.5rem);margin:0;font-size:.74rem;line-height:1.35;color:#E6EBF2;background:rgba(7,9,14,.72);padding:.3rem .55rem;border-radius:3px;z-index:1}
.scene-toggle{position:absolute;right:.75rem;bottom:.55rem;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(7,9,14,.6);color:var(--white);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.scene-toggle:hover{border-color:var(--red);box-shadow:0 0 14px -2px var(--glow)}
.scene-toggle svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.scene-toggle .i-play{fill:currentColor;stroke:none;margin-left:2px}
.scene-toggle[aria-pressed="false"] .i-play,.scene-toggle[aria-pressed="true"] .i-pause{display:none}

/* ---------- full heroes (Home HERO-01, Documentaries HERO-02, Events + retreat HERO-03), phone: full-bleed 9:16 ---------- */
.scene-hero{min-height:max(620px,calc(100svh - var(--header) - 29px))}
.scene-hero.h-top{min-height:max(600px,calc(100svh - var(--header) - 29px))}
.scene-hero::before{content:"";position:absolute;inset:0 0 auto;height:66%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,14,.92) 0%,rgba(7,9,14,.78) 36%,rgba(7,9,14,.3) 74%,transparent)}
.scene-hero::after{content:"";position:absolute;inset:auto 0 0;height:24%;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(7,9,14,.88),transparent)}
.scene-hero .scene-copy{padding-top:clamp(1.5rem,5svh,2.75rem);padding-bottom:5rem}
.hero-title{font-size:clamp(2.6rem,12.4vw,3.6rem)!important;max-width:9.5em;margin-bottom:.45em;filter:drop-shadow(0 2px 14px rgba(0,0,0,.65))}
.hero-lede{font-size:1rem;line-height:1.5;max-width:23rem;text-shadow:0 1px 10px rgba(0,0,0,.9);margin-bottom:0}
.scene-hero .lede{text-shadow:0 1px 10px rgba(0,0,0,.9)}
/* phone: headline + lede in the calm upper sky, buttons in the dark lower band, so the figure/visitors/gateway stay clear */
.scene-hero .scene-copy{display:flex;flex-direction:column;flex:1 0 auto}
.scene-hero .actions{margin-top:auto;padding-top:1.15rem}
.scene-hero .actions .btn{flex:1 1 auto;padding-inline:1rem}
.scene-hero.h-top .scene-copy h1{font-size:clamp(2.5rem,11.6vw,3.5rem);filter:drop-shadow(0 2px 14px rgba(0,0,0,.65))}
.scene-h1{--fy:.5}.scene-h2{--fy:.62}.scene-h3{--fy:.62}

/* ---------- home split scenes, phone: 4:5 art on top, copy continues on ink ---------- */
.scene-split .scene-media{position:relative;inset:auto;aspect-ratio:4/5;max-height:72svh;width:100%;container-type:normal}
.scene-split .scene-media::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,var(--ink) 4%,rgba(7,9,14,.7) 45%,transparent)}
.scene-split .scene-copy{margin-top:-5.5rem;padding-bottom:4.5rem}
.scene-split .scene-note{top:.75rem;bottom:auto}
.scene-split .scene-toggle{top:.55rem;bottom:auto}
.scene-events{--fx:.5;--fy:.78}
.scene-docs{--fx:.5;--fy:.52}

/* ---------- desktop ---------- */
@media (min-width:861px){
  .canvas{--ar:calc(2560/1440)}
  .layers .l-sky{width:116.02%;height:116.11%;left:-8.01%;top:-8.06%}
  .scene{min-height:min(max(640px,calc(100svh - var(--header))),900px);justify-content:center}
  .scene-hero,.scene-hero.h-top{min-height:min(max(640px,calc(100svh - var(--header) - 29px)),940px)}
  .scene-hero::before{height:auto;inset:0;background:linear-gradient(90deg,rgba(7,9,14,.86) 0%,rgba(7,9,14,.62) 33%,rgba(7,9,14,.08) 62%,transparent 75%)}
  .scene-hero::after{height:30%;background:linear-gradient(0deg,rgba(7,9,14,.75),transparent)}
  .scene-h1,.scene-h2,.scene-h3{--fx:.7;--fy:.5}
  .scene .scene-copy{width:100%;padding-block:5rem}
  .scene .scene-copy>*{max-width:min(34rem,40vw)}
  .scene-hero .scene-copy>.hero-title{max-width:min(11.5em,46vw)}
  .scene-hero.h-top .scene-copy h1{font-size:clamp(3.2rem,5.2vw,5.2rem)}
  .hero-title{font-size:clamp(3.8rem,5.9vw,5.8rem)!important}
  .hero-lede{font-size:1.2rem;max-width:30rem}
  .scene-hero .actions .btn{flex:none}
  .scene-hero .scene-copy{justify-content:center;flex:0 0 auto}
  .scene-hero .actions{margin-top:1.5rem;padding-top:0}
  /* split scenes: copy left on ink, art panel right with a feathered edge */
  .scene-split::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/img/stars.svg) 0 0/520px auto,radial-gradient(80% 70% at 30% 40%,rgba(19,33,56,.8),transparent 70%),var(--ink);opacity:.9}
  .scene-split .scene-media{position:absolute;inset:0 0 0 auto;width:62%;max-height:none;height:100%;aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
  .scene-split .scene-media::after{display:none}
  .scene-split .scene-copy{margin-top:0}
  .scene-events{--fx:.72;--fy:.6}.scene-docs{--fx:.62;--fy:.5}
  .scene-note,.scene-split .scene-note{left:auto;right:4.5rem;top:auto;bottom:1.1rem;max-width:24rem}
  .scene-toggle,.scene-split .scene-toggle{top:auto;right:1.2rem;bottom:.8rem}
}

/* ---------- motion: only after scenes.js confirms it's allowed (html.motion), layers are decoded, and the scene is on screen.
   Loops alternate (ease-in-out), so they never jump. Sky drift stays inside the 8% bleed (max 2.4% of the bleed layer). ---------- */
@media (prefers-reduced-motion:no-preference){
  .motion .layers-on .l-sky{animation:lh-sky 46s ease-in-out infinite alternate}
  .motion .layers-on .l-haze{animation:lh-haze 19s ease-in-out infinite alternate}
  .motion .layers-on .l-rays{animation:lh-rays 7.5s ease-in-out infinite alternate}
  .motion .layers-on .l-dust{animation:lh-dust 16s ease-in-out infinite alternate}
  .motion .layers-on .canvas{animation:lh-push 28s ease-in-out infinite alternate}
  .motion .scene-split.fx-ready .poster img{animation:lh-push 24s ease-in-out infinite alternate}
  .scene.is-paused *,.scene.is-offscreen *{animation-play-state:paused!important}
  @keyframes lh-sky{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.4%,1.1%,0)}}
  @keyframes lh-haze{from{transform:translate3d(-2%,0,0) scale(1.07);opacity:.7}to{transform:translate3d(2%,-.6%,0) scale(1.07);opacity:1}}
  @keyframes lh-rays{from{opacity:.55}to{opacity:1}}
  @keyframes lh-dust{from{transform:translate3d(0,1%,0) scale(1.05);opacity:.65}to{transform:translate3d(.6%,-1.6%,0) scale(1.05);opacity:1}}
  @keyframes lh-push{from{transform:scale(1)}to{transform:scale(1.014)}}
}
@media (prefers-reduced-motion:reduce){.layers,.scene-toggle{display:none}}