/* ============================================================
   SUBLIM'ART — V2 : couche d'animation "wow"
   Étend scroll-animations.css (repris intégralement ci-dessous)
   avec : curseur personnalisé, grain de film, surfaces métal
   réactives au pointeur (inspirées d'une carte 21st.dev, ré-
   implémentées en CSS/JS natif, sans React ni build), et une
   typographie cinétique plus dramatique.
   ============================================================ */

/* ---------- barre de progression ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--prism);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 999;
}

/* ---------- preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader-word {
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--white-hot);
  display: flex;
  overflow: hidden;
}

.preloader-word span {
  display: inline-block;
  transform: translateY(115%);
}

.preloader-word .pl-quote {
  background: var(--prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.preloader-bar {
  width: 140px;
  height: 2px;
  background: var(--line);
  margin-top: 26px;
  overflow: hidden;
  border-radius: 2px;
}

.preloader-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--prism);
  transform: scaleX(0);
  transform-origin: left;
}

header.nav.js-nav-ready { opacity: 0; }

/* ---------- repli élégant tant que les vraies photos ne sont pas en place ---------- */
.img-fallback {
  background: linear-gradient(155deg, var(--brushed) 0%, #cfd3d7 45%, var(--graphite) 100%);
}
.img-fallback-self {
  display: block;
  min-height: 180px;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--brushed) 0%, #cfd3d7 45%, var(--graphite) 100%);
}

/* ============================================================
   CURSEUR PERSONNALISÉ
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1001;
  transform: translate(-50%, -50%);
  display: none;
}
html.has-custom-cursor .cursor-dot,
html.has-custom-cursor .cursor-ring { display: block; }
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor select,
html.has-custom-cursor textarea { cursor: none !important; }

.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white-hot);
}
.cursor-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sheen-b);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s, opacity .25s;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  background: rgba(20, 22, 25, .05);
  border-color: var(--white-hot);
}
.cursor-ring.is-drag {
  width: 90px; height: 90px;
  background: var(--white-hot);
  border-color: var(--white-hot);
}

/* ============================================================
   GRAIN DE FILM — texture discrète sur toute la page
   ============================================================ */
.film-grain {
  position: fixed;
  inset: -10%;
  z-index: 997;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grainShift .5s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5%, 1%); }
  50%  { transform: translate(1%, -1.5%); }
  75%  { transform: translate(-1%, 1.5%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   SURFACES MÉTAL RÉACTIVES — plaque du hero + spotlight
   Technique : conic-gradient tournant + vignette radiale suivant
   le pointeur, lissés en JS (lerp/rAF), plus un bruit SVG partagé
   (#metalNoise) pour un grain de brossage fin. Inspiré d'une carte
   métallique 21st.dev, ré-écrit ici sans React ni dépendance.
   ============================================================ */
.metal-surface {
  --gradient-rotation: 0deg;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --gradient-position-x: 50%;
  --gradient-position-y: 50%;
  position: relative;
}

.metal-sheen {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .9;
  background:
    radial-gradient(ellipse 160% 120% at var(--gradient-position-x) var(--gradient-position-y), transparent 0%, rgba(0, 0, 0, .4) 100%),
    conic-gradient(from var(--gradient-rotation) at 50% 50%,
      rgba(0, 0, 0, .3) -120deg, rgba(255, 255, 255, .5) 9deg, rgba(0, 0, 0, .26) 60deg,
      rgba(0, 0, 0, .04) 107deg, rgba(0, 0, 0, .2) 131deg, rgba(0, 0, 0, 0) 188deg,
      rgba(0, 0, 0, .3) 240deg, rgba(255, 255, 255, .5) 367deg);
}

.metal-grain {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: url(#metalNoise);
  opacity: .12;
  mix-blend-mode: overlay;
}

/* la plaque du hero pilote elle-même son tilt (pas de transition CSS
   longue : le lissage se fait déjà en JS via rAF/lerp). Inclinaison de
   base (avant toute interaction) : rotateY -18deg / rotateX 4deg — le
   JS part de ces valeurs et y revient au lieu de remettre la plaque à plat. */
.plate.metal-surface {
  --rotate-x: 4deg;
  --rotate-y: -18deg;
  transform: perspective(1000px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transition: box-shadow .3s;
}
.hero-plate:hover .plate.metal-surface {
  transform: perspective(1000px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
}

/* piliers en spotlight : même traitement métal, contenu au-dessus */
.pillar.pillar-spot.metal-surface {
  overflow: hidden;
  background:
    linear-gradient(155deg, #eef0f3 0%, var(--brushed) 45%, #d8dce0 100%);
}
.pillar-content { position: relative; z-index: 3; }

/* ============================================================
   MAGNÉTISME — les boutons pilotés en JS, pas de règle requise
   au-delà d'un léger will-change pour la fluidité
   ============================================================ */
[data-magnetic] { will-change: transform; display: inline-flex; }

/* ============================================================
   L'ŒUVRE — spotlight pinné (inchangé depuis V1)
   ============================================================ */
.pillars-pin { position: relative; min-height: 320px; }
.pillars-stack { position: relative; height: 260px; }
.pillar-spot { position: absolute; inset: 0; margin: 0; }

.pillar-dots { display: flex; gap: 10px; margin-top: 26px; }
.pdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.pdot.active { background: var(--sheen-b); transform: scale(1.3); }

/* ============================================================
   MOMENT — typographie cinétique, version augmentée
   ============================================================ */
.kinetic-block {
  background: var(--white-hot);
  padding: 64px 0 150px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.kinetic-marquee {
  border-bottom: 1px solid rgba(241, 242, 244, .1);
  padding: 14px 0;
  margin-bottom: 90px;
  overflow: hidden;
}
.kinetic-marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 242, 244, .32);
  animation: kineticSlide 24s linear infinite;
}
@keyframes kineticSlide { to { transform: translateX(-50%); } }

.kinetic-wrap { position: relative; }

.kinetic-line {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(2.1rem, 7vw, 5.2rem);
  color: var(--ink);
  max-width: 1050px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.kinetic-line .word { display: inline-block; margin-right: .26em; }

.kinetic-echo {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 242, 244, .1);
  transform: translate(8px, 14px);
  pointer-events: none;
  user-select: none;
}

.kinetic-caption {
  margin-top: 34px;
  max-width: 460px;
  color: rgba(241, 242, 244, .55);
  font-size: 14px;
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
}

/* ---------- SUR-MESURE — ligne de connexion animée ---------- */
.step:not(:last-child)::before { display: none; }
.steps { position: relative; }
.steps-line {
  position: absolute; top: 20px; left: 21px; right: 21px;
  height: 1px; background: var(--line); z-index: 0;
}
.steps-line-fill {
  position: absolute; inset: 0;
  background: var(--prism);
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 960px) { .steps-line { display: none; } }

@media (max-width: 640px) {
  .kinetic-marquee { margin-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
  header.nav.js-nav-ready { opacity: 1; }
  .pillars-stack { height: auto; }
  .pillar-spot { position: relative; margin-bottom: 20px; }
  .film-grain, .cursor-dot, .cursor-ring { display: none !important; }
  .kinetic-marquee-track { animation: none; }
  .metal-sheen, .metal-grain { display: none; }
}

@media (pointer: coarse) {
  html.has-custom-cursor { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}