/* ==========================================================================
   Animations — démo 1 « Luxe sobre »
   --------------------------------------------------------------------------
   Pilotées par js/main.js :
     data-reveal                 apparition : fondu + montée 24px + flou léger
     data-reveal="mask"          image révélée par le bas + léger dézoom
     data-reveal-stagger         enfants révélés en cascade (80 ms)
     data-reveal-delay="120"     décalage en millisecondes
     data-parallax               parallaxe douce de l'image dans son cadre
     .statement                  texte qui se colore mot à mot au scroll
     .hero                       vidéo qui s'élargit au scroll (--p)
     .stack__panel               panneaux qui s'empilent (--stack-scale)
     .journey                    ligne du parcours (--progress)
   Sans JavaScript, tout reste lisible. Désactivé avec prefers-reduced-motion.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease),
    filter 1s var(--ease),
    transform 1.1s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="mask"] {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(100% 0 0 0 round var(--radius-md));
  transition: clip-path 1.4s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="mask"] > img {
  transform: scale(1.12);
  transition: transform 1.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  filter: none;
  transform: none;
}

.js [data-reveal="mask"].is-revealed {
  clip-path: inset(0 0 0 0 round var(--radius-md));
}

.js [data-reveal="mask"].is-revealed > img {
  transform: scale(1);
}

/* Dans un cadre parallaxe, l'image garde sa translation (pas de dézoom) */
.js .frame--parallax [data-reveal="mask"] > img {
  transform: translate3d(0, var(--parallax, 0px), 0);
  transition: none;
}

/* Le texte « statement » n'est coloré que si le JS a découpé les mots */
.statement:not(.is-split) .word {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal="mask"],
  .js [data-reveal="mask"] > img {
    opacity: 1;
    filter: none;
    clip-path: none;
    transform: none;
    transition: none;
  }

  .hero {
    height: auto;
  }

  .hero__sticky {
    position: relative;
  }

  .hero__media {
    --p: 1;
  }

  .hero__scroll::after {
    animation: none;
  }

  .stack__panel {
    position: relative;
    top: auto;
    transform: none;
  }

  .frame--parallax > img {
    transform: none;
  }

  .statement .word {
    color: inherit;
  }

  .btn::before,
  .offer,
  .accordion__panel,
  .site-header__menu,
  .main-nav__list li {
    transition: none;
  }
}