/* =========================================================================
   ROCK DIRECTION — COUCHE "AWARD" (v3)
   Motion design haut de gamme : écran d'intro, curseur personnalisé,
   révélation des titres mot à mot, boutons magnétiques, bande cinétique,
   parallaxe, grain, barre de progression. Tout en progressive enhancement
   (le site reste 100% lisible sans JS) et coupé si "réduire les animations".
   ========================================================================= */

/* ───────────────── ÉCRAN D'INTRO ───────────────── */
#loader{position:fixed;inset:0;z-index:10000;background:var(--navy2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem;transition:transform .85s cubic-bezier(.76,0,.24,1)}
#loader img{height:62px;width:auto;opacity:0;transform:translateY(12px) scale(.96);animation:loaderLogo .95s .15s cubic-bezier(.2,.8,.2,1) forwards}
#loader .loader-bar{width:170px;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
#loader .loader-bar i{display:block;height:100%;width:100%;background:var(--or);transform:translateX(-101%);animation:loaderBar 1.05s .25s cubic-bezier(.6,0,.2,1) forwards}
#loader.done{transform:translateY(-100%)}
@keyframes loaderLogo{to{opacity:1;transform:none}}
@keyframes loaderBar{to{transform:translateX(0)}}

/* (Curseur personnalisé retiré à la demande — souris standard partout.) */

/* ───────────────── GRAIN DE FILM ───────────────── */
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.022;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────────────── BARRE DE PROGRESSION ───────────────── */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--or),#e7c878);z-index:9999;will-change:transform}

/* ───────────────── RÉVÉLATION DES TITRES (mot à mot) ───────────────── */
.display .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .08em;margin:-.14em 0 -.08em}
.display .w-i{display:inline-block;transform:translateY(110%);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.display.in .w-i{transform:none}

@media (prefers-reduced-motion: reduce){
  #loader{display:none}
  .display .w-i{transform:none}
  #scrollProgress{display:none}
}