/*
 * Animations modernes - scroll reveal, counter, parallax, transitions.
 *
 * Philosophie : subtil et intentionnel. Chaque animation doit servir la
 * lecture ou la hierarchie, jamais distraire. Toutes respectent
 * prefers-reduced-motion.
 */

/* =====================================================================
   Barre de progression scroll (top, fuchsia)
   ===================================================================== */

.mam-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: var(--z-header);
    pointer-events: none;
    background: transparent;
}

.mam-scroll-progress__bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--c-fuchsia-deep), var(--c-fuchsia-soft));
    transform-origin: left;
    /* Pilote en transform: scaleX(0..1) en JS : GPU-cheap vs width qui
       forcerait un repaint a chaque frame. */
    transform: scaleX(0);
    transition: transform 120ms var(--ease-editorial);
    box-shadow: 0 0 8px rgba(198, 59, 149, 0.4);
    will-change: transform;
}

/* =====================================================================
   Scroll reveal - fade-in + translate avec stagger
   ===================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms var(--ease-editorial),
                transform 800ms var(--ease-editorial);
    will-change: opacity, transform;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger : items enfants apparaissent en cascade */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-editorial),
                transform 700ms var(--ease-editorial);
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }

/* =====================================================================
   Image reveal - clip-path unveil depuis le bas
   ===================================================================== */

[data-reveal-image] {
    overflow: hidden;
    position: relative;
}

[data-reveal-image] img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08);
    transition: clip-path 1200ms var(--ease-luxury),
                transform 1800ms var(--ease-editorial);
    will-change: clip-path, transform;
}

[data-reveal-image].is-revealed img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* =====================================================================
   Parallax - hero background image se decale subtilement au scroll.
   Le transform complet (translate + scale) est defini dans components.css
   via hero-reveal + parallax-offset partage en CSS custom prop.
   ===================================================================== */

.mam-hero__media {
    will-change: transform;
}

/* =====================================================================
   Counter animation - chiffres cles qui comptent de 0 a la valeur cible
   ===================================================================== */

.mam-stats__num {
    font-variant-numeric: tabular-nums;
}

[data-counter] {
    display: inline-block;
    min-width: 2ch;
    text-align: left;
}

/* =====================================================================
   Titres Fraunces : apparition word-by-word au reveal
   ===================================================================== */

[data-split-words] .mam-hero__line,
[data-split-words] .t-display,
[data-split-words] .t-hero {
    overflow: hidden;
    display: inline-block;
}

.mam-hero__line {
    overflow: hidden;
    display: block;
}

/* =====================================================================
   Smooth scroll natif
   ===================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h, 96px);
}

/* =====================================================================
   Card hover - lift subtil en cartes zones/réalisations
   ===================================================================== */

.mam-zone-card {
    transition: border-color var(--dur-hover) var(--ease-editorial),
                transform 400ms var(--ease-editorial),
                box-shadow 400ms var(--ease-editorial);
}

.mam-zone-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 12px 32px -12px rgba(10, 10, 10, 0.18);
}

/* =====================================================================
   Respect de prefers-reduced-motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > *,
    [data-reveal-image] img {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .mam-hero__media {
        transform: scale(1.04) !important;
    }

    html {
        scroll-behavior: auto;
    }

    .mam-btn:hover {
        transform: none !important;
    }
}

/* =====================================================================
   Loader decoratif - trait fuchsia qui court en top au chargement
   ===================================================================== */

@keyframes page-load-bar {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(1); transform-origin: left; }
    51%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

.mam-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: var(--z-mega-menu);
    background: var(--c-fuchsia-soft);
    transform: scaleX(0);
    pointer-events: none;
}

.mam-page-loader.is-loading {
    animation: page-load-bar 1.4s var(--ease-editorial) forwards;
}