/* Accueil en profondeur : la scène reste à l'écran pendant trois mouvements de défilement,
   puis le site commence. Sans JavaScript ou avec « moins d'animations », l'accueil reste simple. */
.hero.hx{height:100svh;overflow:clip}
.hx-on .hero.hx{height:400svh}
/* au-dessus de la 3D (z-index 5) : les reflets du sol et du néon restent derrière les textes */
.hx-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;z-index:6;pointer-events:none}
.hx-par{position:absolute;inset:0}
.hx-pin .hero-actions,.hx-pin .replay-btn,.hx-cap .btn{pointer-events:auto}

/* le néon est dans la scène 3D, accroché au mur de l'atelier */
@media (min-width:900px){
  .hx .neon{display:none}
  .hx .hero-copy{transform:translateY(-38%)!important}
  .hx .hero h1,.hx h1{font-size:clamp(2.4rem,4.8vw,4.8rem)}
}

/* Les trois temps de l'accueil */
.hx-cap{position:absolute;z-index:6;left:clamp(1.2rem,5vw,4.5rem);bottom:clamp(2.4rem,13vh,7.5rem);width:min(32rem,38vw);
  opacity:0;visibility:hidden;color:#F2F2F0}
.hx-cap.r{left:auto;right:clamp(1.2rem,5vw,4.5rem);text-align:right}
.hx-cap.c{left:50%;translate:-50% 0;text-align:center;bottom:clamp(2.6rem,9vh,5.5rem)}
.hx-cap.c p{margin:0 auto}
.hx-cap h2{font-family:var(--display);font-weight:900;font-size:clamp(2.8rem,5.4vw,5.4rem);line-height:.88;margin:0 0 1rem}
.hx-cap h2 em{font-style:normal;color:var(--jaune)}
.hx-cap p{margin:0;color:#C9C9C4;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;max-width:34ch}
.hx-cap.r p{margin-left:auto}
.hx-cap .btn{margin-top:1.5rem}
.hx-w{white-space:nowrap}

/* Invitation à défiler */
.hx-cue{position:absolute;left:50%;bottom:clamp(1.2rem,4vh,2.4rem);transform:translateX(-50%);z-index:6;display:none;
  flex-direction:column;align-items:center;gap:.55rem;color:#8d8d88;font-size:.85rem;letter-spacing:.02em}
.hx-on .hx-cue{display:flex}
.hx-cue i{display:block;width:1px;height:48px;background:linear-gradient(var(--jaune),rgba(255,194,14,0));transform-origin:top;animation:hxCue 2s cubic-bezier(.7,0,.2,1) infinite}
@keyframes hxCue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

@media (max-width:899px){
  .hx-on .hero.hx{height:300svh}
  .hx-cap,.hx-cap.r,.hx-cap.c{translate:none;left:1.2rem;right:1.2rem;bottom:calc(env(safe-area-inset-bottom,0px) + 2.2rem);width:auto;text-align:left}
  .hx-cap.r p,.hx-cap.c p{margin-left:0}
  .hx-cap h2{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hx-cue{display:none!important}
  /* grands mots derrière la photo des voitures */
  .hx-on .hx-mw{display:block}
}
@media (prefers-reduced-motion:reduce){.hx-cue i{animation:none}}

.hx-mw{display:none;position:absolute;left:0;right:0;top:44%;height:32vw;pointer-events:none}
.hx-mw span{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;
  font-family:var(--display);font-weight:900;font-size:27vw;line-height:1;text-transform:uppercase;
  color:rgba(255,194,14,.05);-webkit-text-stroke:1.5px rgba(255,194,14,.5)}
@media (max-height:820px) and (min-width:900px){.hx .hero-copy{transform:translateY(-30%)!important}}