/* ==========================================================================
   Animations — démo 3 « Luxe éditorial »
   --------------------------------------------------------------------------
   Système piloté par js/main.js (IntersectionObserver) :
     data-reveal                 texte : opacity 0 → 1, translateY 12px → 0 (900 ms)
     data-reveal="clip"          image : masque vertical + scale 1.02 → 1 (1200 ms)
     data-reveal="clip-x"        image : masque horizontal (hero)
     data-reveal="line"          filet : largeur 0 → 100 % (1200 ms)
     data-reveal-delay="120"     décalage en millisecondes
   Easing unique : cubic-bezier(0.22, 1, 0.36, 1). Sans rebond.
   Sans JavaScript, tout reste visible.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="fade"] {
  transform: none;
}

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

.js [data-reveal="clip-x"] {
  clip-path: inset(0 0 0 100%);
  transition-duration: 1.4s;
}

.js [data-reveal="clip"] > img,
.js [data-reveal="clip-x"] > img,
.js [data-reveal="clip-x"] > video {
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

.js [data-reveal="clip"].is-revealed,
.js [data-reveal="clip-x"].is-revealed {
  clip-path: inset(0 0 0 0);
}

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

/* Les histoires gardent leur zoom de survol une fois révélées */
.js .story [data-reveal].is-done > img {
  transition: transform 0.9s var(--ease);
  transition-delay: 0ms;
}

.js .story:hover [data-reveal].is-done > img {
  transform: scale(1.025);
}

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

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

  .timeline__progress {
    transform: none;
  }

  .js .quote,
  .accordion__panel,
  .story .photo > img,
  .site-header__menu {
    transition: none;
  }
}