/* =============================================================================
   NOAMER — Animations & états de révélation
   Les transitions sont pilotées par GSAP/ScrollTrigger (animations.js).
   Ce fichier ne contient que les états de départ + les fallbacks.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   États initiaux des éléments animés au scroll
   Scopés à .js : sans JavaScript (ou si le JS échoue avant de retirer .no-js),
   tout le contenu reste visible. GSAP anime ensuite jusqu'à l'état final.
   -------------------------------------------------------------------------- */
.js .reveal        { opacity: 0; transform: translateY(40px); }
.js .reveal-left   { opacity: 0; transform: translateX(-48px); }
.js .reveal-right  { opacity: 0; transform: translateX(48px); }
.js .reveal-scale  { opacity: 0; transform: scale(.92); }
.js .reveal-fade   { opacity: 0; }

/* Image reveal / mask reveal */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--navy-700);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
    z-index: 2;
}
.img-reveal.is-revealed::after { transform: scaleX(0); }
.no-js .img-reveal::after { display: none; }

/* Texte : révélation ligne par ligne (SplitText maison).
   L'état masqué est posé en JS juste avant l'animation (voir animations.js),
   jamais en CSS seul : si GSAP est indisponible, le titre reste lisible. */
.split-line { display: block; overflow: hidden; }
.split-line__inner { display: block; will-change: transform; }

/* Stagger children */
.js [data-stagger] > * { opacity: 0; transform: translateY(30px); }

/* -----------------------------------------------------------------------------
   Micro-animations autonomes
   -------------------------------------------------------------------------- */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-60px); }
}

@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(107, 172, 248, .4); }
    70%  { box-shadow: 0 0 0 22px rgba(107, 172, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(107, 172, 248, 0); }
}
.pulse-ring { animation: pulseRing 2.6s var(--ease-io) infinite; }

/* Lignes bathymétriques animées (arrière-plans) */
.bathy path {
    stroke-dasharray: 4 6;
    animation: drift 12s linear infinite;
}

/* Bouton magnétique : la transition douce est gérée en JS,
   on garde juste le will-change */
[data-magnetic] { will-change: transform; }
[data-magnetic] > span { display: inline-block; will-change: transform; }

/* Apparition du header au chargement */
.site-header { animation: headerDrop .9s var(--ease-out) both; }
@keyframes headerDrop {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Compteur : petit clignotement à l'arrivée */
.stat.is-counted .stat__value { animation: countPop .5s var(--ease-out); }
@keyframes countPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* -----------------------------------------------------------------------------
   Accessibilité — prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade,
    [data-stagger] > *,
    .split-line__inner {
        opacity: 1 !important;
        transform: none !important;
    }
    .img-reveal::after { display: none; }
    .img-reveal img,
    .editorial__media img,
    .hero__media video,
    .hero__media img,
    .split-media__img img { transform: none !important; }

    .preloader { display: none !important; }
    .hero__scroll-line::after,
    .marquee__track,
    .floaty,
    .pulse-ring,
    .bathy path { animation: none !important; }
    .cursor { display: none !important; }
}