/* ============================================================
   Terrexo — Film "La maison qui se transforme"
   Une seule maison, transformée en continu au scroll.
   Scène sticky unique + cross-fade des frames (0 dépendance).
   ============================================================ */

.film{position:relative;background:#000;height:1000vh;}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#05060A;}

/* ---- frames empilées ---- */
.fr{position:absolute;inset:0;opacity:0;will-change:opacity;}
.fr-img{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;transform:scale(1.05);will-change:transform;}
.fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0d10;}

/* vignette + dégradé bas pour la lisibilité des légendes (non mis à l'échelle) */
.fr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,0) 60%),
    radial-gradient(135% 120% at 50% 38%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%);}

/* ---- légendes ---- */
.cap{position:absolute;left:clamp(20px,5vw,76px);bottom:clamp(72px,12vh,128px);
  max-width:min(820px,82vw);z-index:5;opacity:0;transform:translateY(26px);
  will-change:opacity,transform;pointer-events:none;}
.cap-k{display:block;font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.22em;font-size:.7rem;color:var(--gold-soft);margin-bottom:16px;opacity:.92;}
.cap-t{font-size:clamp(1.95rem,5.2vw,4.4rem);line-height:1.03;letter-spacing:-.025em;
  font-weight:600;color:#fff;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.55);}
.cap-t em{color:var(--gold-soft);font-weight:500;}

/* ---- barre de progression ---- */
.film-prog{position:absolute;left:0;bottom:0;height:2px;width:0;z-index:7;
  background:linear-gradient(90deg,var(--wood),var(--gold-soft));box-shadow:0 0 14px rgba(198,168,106,.7);}

/* ---- indice de scroll ---- */
.film-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:rgba(255,255,255,.62);transition:opacity .5s var(--ease);}
.film-hint b{font-weight:400;font-size:1.05rem;line-height:1;animation:fhint 1.8s var(--ease) infinite;}
@keyframes fhint{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* ---- CTA finale (sur la dernière frame) ---- */
.film-cta{position:absolute;left:50%;bottom:clamp(46px,9vh,104px);transform:translateX(-50%) translateY(22px);
  z-index:8;opacity:0;will-change:opacity,transform;}
.film-cta .btn-gold{box-shadow:0 14px 50px rgba(0,0,0,.5);}

/* ============================================================
   Repli accessible : sans JS ou mouvement réduit
   → la scène devient un storyboard vertical statique et lisible.
   ============================================================ */
html.no-js .film,html.reduced .film{height:auto;}
html.no-js .film-stage,html.reduced .film-stage{position:static;height:auto;overflow:visible;}
html.no-js .fr,html.reduced .fr{position:relative;opacity:1;height:100svh;}
html.no-js .fr-img,html.reduced .fr-img{transform:none;}
html.no-js .cap,html.reduced .cap{opacity:1;transform:none;}
html.no-js .film-prog,html.reduced .film-prog,
html.no-js .film-hint,html.reduced .film-hint{display:none;}
html.no-js .film-cta,html.reduced .film-cta{position:absolute;opacity:1;transform:translateX(-50%);}

/* ============================================================
   En-tête immersif : pendant le film, seul le logo reste.
   Le CTA n'apparaît qu'une fois sur les sections claires.
   ============================================================ */
.hd-cta{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;}
.hd.on-light .hd-cta{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
html.no-js .hd-cta{opacity:1;visibility:visible;transform:none;pointer-events:auto;}

/* ---- responsive ---- */
@media (max-width:860px){
  .cap{left:clamp(18px,6vw,40px);bottom:clamp(88px,14vh,140px);max-width:88vw;}
  .cap-t{font-size:clamp(1.7rem,8vw,2.6rem);}
}
@media (max-width:520px){
  .cap-k{margin-bottom:10px;}
}