/* ==========================================================================
   GUIVONIZ — Mouvement
   Révélations au scroll, survols, 3D, keyframes. Tout est désactivable
   via prefers-reduced-motion (bloc en fin de fichier).
   ========================================================================== */

/* ---------------------------------------------------------- Keyframes */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.35; }
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes scan {
  0%   { top: 4%;  opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { top: 96%; opacity: 0; }
}
@keyframes unfold {
  from { opacity: 0; transform: translateZ(-60px) rotateX(-14deg); }
  to   { opacity: 1; transform: translateZ(0) rotateX(0deg); }
}
@keyframes step-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes spin-y { to { transform: rotateY(360deg); } }
@keyframes breathe {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%      { opacity: 0.22; transform: scale(1.06); }
}
@keyframes blip {
  0%   { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ------------------------------------------- Révélations au scroll (JS) */
[data-reveal] {
  --rev-delay: calc(var(--i, 0) * 70ms);
  opacity: 0;
  transition:
    opacity var(--dur-reveal) var(--ease-organic) var(--rev-delay),
    transform var(--dur-reveal) var(--ease-organic) var(--rev-delay),
    clip-path var(--dur-reveal) var(--ease-glass) var(--rev-delay);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(30px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(34px); }
[data-reveal="right"] { transform: translateX(-34px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="tilt"]  { transform: perspective(900px) rotateX(10deg) translateY(28px); }
[data-reveal="mask"]  { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; }
[data-reveal="wipe"]  { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; }
[data-reveal="blur"]  { filter: blur(14px); transform: scale(1.02); }

[data-reveal].in-view {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

/* Titres révélés mot par mot (découpés par JS).
   Pas de clipping par ligne : un titre peut passer de 1 à 3 lignes selon la
   largeur, et un overflow:hidden laisserait des mots coupés en responsive. */
[data-reveal="split"] { opacity: 1; transform: none; }
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.2deg);
  transition: opacity var(--dur-slow) var(--ease-organic), transform var(--dur-slow) var(--ease-organic);
  transition-delay: calc(var(--wi, 0) * 38ms);
  will-change: opacity, transform;
}
.in-view .split-word { opacity: 1; transform: none; }

/* Soulignement qui se trace */
.underline-draw {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.underline-draw::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%;
  background: var(--color-lime-pulse);
  scale: 0 1; transform-origin: left;
  transition: scale var(--dur-slow) var(--ease-organic) 220ms,
              height var(--dur-fast) var(--ease-organic);
}
.in-view .underline-draw::after { scale: 1 1; }
/* Quand c'est un lien : il doit se voir comme tel au survol */
a.underline-draw { cursor: pointer; }
a.underline-draw:hover::after, a.underline-draw:focus-visible::after { height: 3px; }
a.underline-draw:hover { opacity: 1; }

/* Sur petit écran, une révélation latérale pousse l'élément hors du cadre et
   crée un défilement horizontal parasite. On la bascule en vertical. */
@media (max-width: 860px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
}

/* -------------------------------------------------- Parallaxe (piloté JS) */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* ------------------------------------------- Inclinaison 3D au survol */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(var(--perspective-near))
             rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
  transition: transform var(--dur-base) var(--ease-organic);
}
[data-tilt].is-tilting { transition: transform 90ms linear; }
[data-tilt-layer] { transform: translateZ(var(--tz, 20px)); transform-style: preserve-3d; }

/* Boutons magnétiques */
[data-magnet] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform var(--dur-base) var(--ease-settle); }
[data-magnet].is-mag { transition: transform 110ms linear; }

/* ----------------------------------- Scroll-driven natif (si supporté) */
@supports (animation-timeline: view()) {
  .sticky-stack { position: sticky; top: 96px; }
  .scroll-float {
    animation: float-y 1 linear;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
  .hero-mesh { animation: breathe 1 linear both; animation-timeline: view(); }
}

/* Flottement doux en boucle */
.float { animation: float-y 7s var(--ease-glass) infinite; }
.float-slow { animation: float-y 11s var(--ease-glass) infinite; }

/* Rotation automatique du flacon tant que la carte est survolée */
.pcard:hover .jar-auto, .stage3d:hover .jar-auto { animation: spin-y 18s linear infinite; }

/* Ping de localisation sur l'illustration science */
.blip { transform-origin: center; animation: blip 2.8s var(--ease-glass) infinite; }

/* ------------------------------------------------- Transition de page */
.page-veil {
  position: fixed; inset: 0; z-index: 140;
  background: var(--color-forest-depths);
  transform-origin: bottom;
  scale: 1 0;
  pointer-events: none;
  transition: scale var(--dur-base) var(--ease-glass);
}
.page-veil.is-up { scale: 1 1; transform-origin: bottom; }
body.is-leaving .page-veil { scale: 1 1; transform-origin: top; }

/* ------------------------------------------------- Accessibilité moteur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .split-word { transform: none !important; }
  .stage3d-world { transform: rotateX(-6deg) rotateY(-16deg) !important; }
  .cursor-ring { display: none; }
  .marquee-track { animation: none !important; }
}