/* ==========================================================================
   Animations — démo 4 « Maison de nuit »
   --------------------------------------------------------------------------
     data-split          titre découpé en mots qui montent de derrière un masque
     data-reveal         fondu + montée 30px
     data-reveal="clip"  image dévoilée par un rideau du bas vers le haut
     data-reveal-delay   décalage en ms
     data-parallax="0.1" vitesse de parallaxe (collage, photos)
   Désactivé avec prefers-reduced-motion ; tout reste visible sans JS.
   ========================================================================== */

/* Mots qui montent */
.js [data-split] .w {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: top;
}

.js [data-split] .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms + var(--reveal-delay, 0ms));
}

.js [data-split].is-revealed .w > span {
  transform: none;
}

/* Apparition simple */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

/* Rideau sur image */
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-in-out);
  transition-delay: var(--reveal-delay, 0ms);
}

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

/* Lettres du grand logotype de pied de page */
.js .site-footer__wordmark span {
  transform: translateY(100%);
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms);
}

.js .site-footer__wordmark.is-revealed span {
  transform: none;
}

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

  .js .intro {
    display: none;
  }

  .js [data-split] .w > span,
  .js [data-reveal],
  .js [data-reveal="clip"],
  .js .site-footer__wordmark span {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }

  .hero {
    height: auto;
  }

  .hero__sticky {
    position: relative;
  }

  .hero__mask,
  .hero__hint {
    display: none;
  }

  .hero__content {
    opacity: 1;
    transform: none;
  }

  .hero__veil {
    opacity: 1;
  }

  .hscroll {
    height: auto;
  }

  .hscroll__sticky {
    position: relative;
    height: auto;
    padding-block: var(--section-space);
  }

  .hscroll__track {
    flex-wrap: wrap;
    padding-right: var(--gutter);
    transform: none;
  }

  .collage__item,
  .page-head__media img,
  .vision__photo img,
  .closing__bg img {
    transform: none;
  }

  .menu,
  .menu__link,
  .offer,
  .offer__details,
  .deck__card,
  .button::before {
    transition: none;
  }
}