/* Altiarc. Le héros défilant, uniquement sur l'accueil. */

.hero{position:relative;height:360vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,13,20,0) 30%,rgba(10,13,20,.7) 100%)}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,13,20,.74) 0%,rgba(10,13,20,0) 22%,rgba(10,13,20,0) 60%,rgba(10,13,20,.9) 100%)}

.ring{position:absolute;right:var(--gut);bottom:36px;width:42px;height:42px;color:var(--accent);opacity:.8;
  transform:rotate(-90deg);transition:opacity .6s var(--ease)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:opacity .6s var(--ease)}
.cue span{display:block;width:1px;height:32px;background:linear-gradient(to bottom,var(--dim),transparent);
  animation:cue 3.4s var(--ease) -1s infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.3;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
@media (max-height:560px){.cue{display:none}}

.band{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;opacity:0}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 46% 44% at 50% 50%,rgba(6,8,14,.8) 0%,rgba(6,8,14,.5) 52%,rgba(6,8,14,0) 78%)}
.band .inner{position:relative;width:min(760px,100% - var(--gut)*2);margin-inline:auto;text-align:center}
.band p{font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(29px,4.4vw,64px);line-height:1.03;margin:0 auto;max-width:17ch;
  text-align:center;text-shadow:var(--tshadow)}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* une entrée par bande, en écho au film */
.b1 .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
.b2 .sharp{opacity:var(--k,0)}
.b2 .soft{opacity:calc(1 - var(--k,0));filter:blur(13px);position:absolute;inset:0}
.b3 .inner p{--kc:clamp(0,var(--k,0)*1.15,1);opacity:var(--kc);
  transform:scale(calc(.82 + .18*var(--kc)))}
.b4 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 28px))}
.b4 .settle{--kb:clamp(0,(var(--k,0) - .62)*3.6,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 16px));pointer-events:auto;
  margin-top:28px;display:flex;gap:15px;flex-direction:column;align-items:center}
.b4 .settle .note{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  max-width:44ch;line-height:1.6;text-align:center;text-shadow:0 1px 3px rgba(5,6,12,.85);
  background:rgba(10,13,20,.6);border:1px solid rgba(92,100,122,.3);
  border-radius:10px;backdrop-filter:blur(10px);padding:9px 13px}
.b4 .btn{text-shadow:none}

/* accueil fixe : téléphones, tablettes en portrait, mouvement réduit */
.still{display:none;position:relative;min-height:100svh;align-items:flex-end;overflow:hidden;
  background-size:cover;background-position:center;padding:0 0 clamp(44px,9vw,92px)}
/* Sur téléphone, l'image fixe ne défile plus avec la page mais elle respire :
   un léger zoom continu, porté par une couche à part pour que le texte et le
   bouton, eux, ne bougent pas. La couche reprend l'image posée par hero.js. */
.still::before{content:"";position:absolute;inset:0;
  background-image:inherit;background-size:cover;background-position:center;
  animation:plateZoom 28s ease-in-out -6s infinite alternate;will-change:transform}
.still::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,13,20,.72) 0%,rgba(10,13,20,.26) 32%,rgba(10,13,20,.96) 88%)}
.still .wrap{position:relative;z-index:2}
.still h1{margin:0 0 16px;max-width:13ch;text-shadow:var(--tshadow)}
.still p{color:var(--muted);margin:0 0 26px;max-width:40ch;text-shadow:var(--tshadow)}

@media (prefers-reduced-motion:reduce){
  .band{opacity:1}
  .b1 .c,.b4 .w{opacity:1;transform:none}
  .b3 .inner p{opacity:1;transform:none}
  .b2 .soft{opacity:0}.b2 .sharp{opacity:1}
  .b4 .settle{opacity:1;transform:none}
}