/* Animations : révélations lentes et atmosphériques, transitions de survol courtes et sobres.
   Les classes sont activées par /assets/js/motion.js. Tout est neutralisé si le visiteur
   a demandé à réduire les animations (prefers-reduced-motion). */

/* Apparition au scroll : fondu + léger flou + petite montée */
.js [data-reveal] {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--dur-reveal) var(--ease-reveal), filter var(--dur-reveal) var(--ease-reveal), transform calc(var(--dur-reveal) * 1.2) var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='scale'] { transform: scale(0.96); }
.js [data-reveal].is-visible { opacity: 1; filter: none; transform: none; }

/* Titres révélés mot par mot (fondu flou, sans rebond) */
.split-word { display: inline-block; white-space: pre; }
.split-word > span {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(0.22em);
  transition: opacity 0.9s var(--ease-reveal), filter 0.9s var(--ease-reveal), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * 0.045s + var(--delay, 0s));
}
.is-visible .split-word > span, .split-word.is-visible > span { opacity: 1; filter: none; transform: none; }

/* Fondu atmosphérique du hero (2,5 s) */
.atmo-in { animation: atmo-in var(--dur-atmo) var(--ease-reveal) both; animation-delay: var(--delay, 0s); }
@keyframes atmo-in { from { opacity: 0; filter: blur(14px); transform: translateY(14px); } }

/* Barre de progression du scroll */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 1px; z-index: 70; background: var(--color-pure); transform-origin: left; transform: scaleX(var(--progress, 0)); opacity: 0.6; }

/* Contour lumineux qui fait le tour d'un élément (« border trace ») */
@property --trace-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
[data-trace] { position: relative; isolation: isolate; }
[data-trace]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--trace-angle), transparent 0 70%, rgba(255, 255, 255, 0.9) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-turn 6s linear infinite;
}
@keyframes border-turn { to { --trace-angle: 360deg; } }

/* Lueur douce qui suit le curseur sur les cartes */
[data-glow] { position: relative; }
[data-glow]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
[data-glow]:hover::after { opacity: 1; }

/* Ligne qui se dessine */
.draw-line { height: 1px; background: var(--color-line-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-reveal); }
.is-visible .draw-line, .draw-line.is-visible { transform: scaleX(1); }

/* Élément piloté par le scroll : --scroll va de 0 (entre dans l'écran) à 1 (sort) */
[data-scroll] { --scroll: 0; }

[data-count] { font-variant-numeric: tabular-nums; }

/* Révélation par rideau arrondi (tuiles, grands blocs) */
.js [data-reveal='clip'] {
  opacity: 1; filter: none; transform: translate3d(0, 60px, 0);
  clip-path: inset(100% 0 0 0 round var(--radius-lg));
  transition: clip-path 1.1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal='clip'].is-visible { clip-path: inset(0 0 0 0 round var(--radius-lg)); transform: none; }

/* Inclinaison 3D au survol (valeurs posées en JS) */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
}
/* Éléments inclinables : l'apparition ne déplace pas l'élément (le transform est réservé à l'inclinaison,
   lissée en JS) — seuls le fondu et le rideau sont animés */
.js [data-reveal][data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: opacity var(--dur-reveal) var(--ease-reveal), filter var(--dur-reveal) var(--ease-reveal), clip-path 1.1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
/* Reflet lumineux qui suit le curseur (éléments sans [data-glow], qui a déjà sa lueur) */
[data-tilt]:not([data-glow])::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.35), transparent 50%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.5s var(--ease);
}
[data-tilt]:not([data-glow]):hover::after { opacity: 1; }
.js [data-reveal][data-tilt].is-visible { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }

/* Boutons magnétiques */
[data-magnetic] { transition: transform 0.5s var(--ease-out), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

/* Texte qui s'allume mot par mot au fil du scroll */
.scroll-word { opacity: 0.14; transition: opacity 0.4s var(--ease); }
.scroll-word.is-lit { opacity: 1; }
.scroll-word em { font-style: italic; }

/* Bandeau défilant en serif */
.marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; animation: marquee var(--marquee-speed, 45s) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.5em; padding-right: 0.5em;
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(48px, 8vw, 120px); line-height: 1.1; color: var(--color-cloud);
  transition: color var(--dur-fast) var(--ease);
}
.marquee__item:nth-child(even) { font-style: italic; color: var(--color-fog); }
.marquee__item:hover { color: var(--tile-iris); }
.marquee__item::after { content: '✦'; font-size: 0.3em; color: var(--color-fog); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Flottement doux */
.float { animation: float 6s ease-in-out infinite; animation-delay: var(--float-delay, 0s); }
@keyframes float { 50% { transform: translateY(-12px); } }

/* Transition entre les pages : fondu vers le noir */
.page-fade { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--color-obsidian); opacity: 0; transition: opacity 0.35s var(--ease); }
.page-fade.is-active { opacity: 1; }

/* Projecteur qui suit la souris (sections sombres) */
[data-spotlight] { position: relative; }
[data-spotlight]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: radial-gradient(600px circle at var(--sx, 50%) var(--sy, 50%), rgba(132, 125, 255, 0.12), transparent 60%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .split-word > span { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; }
  .scroll-word { opacity: 1; }
  .marquee__track, .float { animation: none; }
}