/* ===========================================================================
   WESTPORTS — Animations (LOT 09)

   Principe : l'état initial masqué n'est appliqué que si JavaScript est actif
   ET si l'utilisateur n'a pas demandé de réduire les animations. Sans cela,
   un visiteur sans JS verrait une page vide — inacceptable.
   =========================================================================== */

/* GSAP ajoute .js-anim sur <html> une fois prêt. */
.js-anim [data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

.js-anim [data-anim='fade-up']    { transform: translateY(28px); }
.js-anim [data-anim='fade-down']  { transform: translateY(-20px); }
.js-anim [data-anim='fade-left']  { transform: translateX(28px); }
.js-anim [data-anim='fade-right'] { transform: translateX(-28px); }
.js-anim [data-anim='scale-in']   { transform: scale(0.96); }

/* Révélation d'image par voile glissant. */
.wp-reveal {
    position: relative;
    overflow: hidden;
}

.js-anim .wp-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wp-bg);
    transform-origin: right;
    z-index: 2;
}

/* Révélation de texte ligne par ligne. */
.js-anim [data-anim='lines'] .wp-line {
    display: block;
    overflow: hidden;
}

.js-anim [data-anim='lines'] .wp-line > span {
    display: block;
    transform: translateY(100%);
}

/* Parallaxe léger : la translation reste faible pour ne pas fatiguer l'œil
   ni provoquer de recalcul de mise en page. */
[data-parallax] {
    will-change: transform;
}

/* Une fois l'animation jouée, on libère le compositeur. */
[data-anim].is-revealed,
.wp-reveal.is-revealed {
    will-change: auto;
}

/* Apparition sans JavaScript ni GSAP : transition CSS simple sur les cartes. */
@media (prefers-reduced-motion: no-preference) {
    .wp-card,
    .wp-location,
    .wp-gallery__item {
        transition-duration: var(--wp-duration-base);
    }
}

/* Réduction de mouvement : tout état masqué est annulé, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .js-anim [data-anim],
    .js-anim [data-anim='lines'] .wp-line > span {
        opacity: 1 !important;
        transform: none !important;
    }

    .js-anim .wp-reveal::after {
        display: none;
    }

    [data-parallax] {
        transform: none !important;
    }

    .wp-pulse::after {
        animation: none;
    }
}

/* Séquence d'ouverture du hero : jouée en CSS pour ne pas dépendre du chargement
   de GSAP, avec un décalage qui suit la lecture naturelle. */
.wp-hero__content > * {
    animation: wp-hero-in var(--wp-duration-reveal) var(--wp-ease-out) backwards;
}

.wp-hero__content > *:nth-child(1) { animation-delay: 0.10s; }
.wp-hero__content > *:nth-child(2) { animation-delay: 0.20s; }
.wp-hero__content > *:nth-child(3) { animation-delay: 0.30s; }
.wp-hero__content > *:nth-child(4) { animation-delay: 0.40s; }
.wp-hero__content > *:nth-child(5) { animation-delay: 0.50s; }

.wp-hero__meta {
    animation: wp-hero-in var(--wp-duration-reveal) var(--wp-ease-out) 0.6s backwards;
}

@keyframes wp-hero-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wp-hero__content > *,
    .wp-hero__meta {
        animation: none;
    }
}

/* Lent zoom du visuel de hero : 20 s, imperceptible mais vivant. */
@media (prefers-reduced-motion: no-preference) {
    .wp-hero__media img {
        animation: wp-hero-zoom 24s var(--wp-ease) forwards;
    }
}

@keyframes wp-hero-zoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Transition de page discrète au clic sur un lien interne. */
.wp-page-fade {
    animation: wp-page-in var(--wp-duration-base) var(--wp-ease-out);
}

@keyframes wp-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}