/* ====================================================================
   DAISYWORLD — Animations & états de révélation
   Les éléments .reveal-line / .reveal-block / .img-reveal sont animés
   par js/animations.js (GSAP + ScrollTrigger, fallback IntersectionObserver).
   ==================================================================== */

/* ------------------------- Écran d'introduction -------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--background);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.preloader__word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  animation: preloaderWord 1.4s var(--ease) both;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

@keyframes preloaderWord {
  0%   { opacity: 0; transform: translateY(26px); letter-spacing: 0.44em; }
  100% { opacity: 1; transform: none; letter-spacing: 0.24em; }
}

/* --------------------- États initiaux des reveals ------------------ */
/* Les classes ne masquent le contenu que si JS est présent (html.has-js),
   afin de rester lisible sans JavaScript. */
.has-js .reveal-line > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
}
.has-js .reveal-block {
  opacity: 0;
  transform: translateY(34px);
}
.has-js .hero__title-line > span {
  opacity: 0;
  transform: translateY(110%);
}
.reveal-line { display: block; overflow: hidden; }

/* révélation d'image par masque */
.has-js .img-reveal {
  clip-path: inset(12% 6% 12% 6% round var(--radius));
  opacity: 0;
  transform: translateY(30px) scale(0.985);
}
/* État révélé.
   ATTENTION : le clip-path arrondi ne doit s'appliquer QU'aux images
   (.img-reveal). Appliqué à un bloc de texte, l'arrondi des coins rogne
   les premières lettres des lignes situées près des angles. */
.has-js .img-reveal.is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round var(--radius));
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease),
    clip-path 1.1s var(--ease);
}

.has-js .reveal-line.is-visible > span,
.has-js .reveal-block.is-visible,
.has-js .hero__title-line.is-visible > span {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}

/* décalage en cascade optionnel */
.is-visible[data-stagger] { transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* ------------------------------ Keyframes --------------------------- */
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------ Mouvement réduit -------------------------- */
@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;
  }

  .has-js .reveal-line > span,
  .has-js .reveal-block,
  .has-js .img-reveal,
  .has-js .hero__title-line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .planning__track { animation: none; transform: none; }
  .hero__canvas { display: none; }
  .preloader { display: none; }
}