/* ==========================================================================
   APEX — Apparitions et filigranes
   ========================================================================== */

:root {
    --apx-ease-out: cubic-bezier(.16, 1, .3, 1);
    --apx-ease-io:  cubic-bezier(.76, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Entrée du hero (accueil)
   -------------------------------------------------------------------------- */
/* Logo : simple fondu + léger zoom (aucun flou, aucun filtre animé :
   évite tout halo ou rectangle clair sur mobile, notamment iPhone). */
.apex-motion .hero__logo-img {
    opacity: 0; transform: scale(.94);
    transition: opacity .9s var(--apx-ease-out), transform 1.2s var(--apx-ease-out);
}
.apex-motion .hero h1 {
    opacity: 0; transform: translateY(28px);
    clip-path: inset(-20% -5% 100% -5%);
    transition: opacity 1s var(--apx-ease-out) .18s, transform 1.1s var(--apx-ease-out) .18s, clip-path 1.1s var(--apx-ease-out) .18s;
}
.apex-motion .hero__wave svg {
    transform: translateY(40%);
    transition: transform 1.2s var(--apx-ease-out) .1s;
}
.apex-hero-in .hero__logo-img { opacity: 1; transform: none; }
.apex-hero-in .hero h1 { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
.apex-hero-in .hero__wave svg { transform: none; }

/* Sécurité : si le script ne s'exécute pas, le hero s'affiche quand même */
.apex-motion:not(.apex-hero-in) .hero__logo-img,
.apex-motion:not(.apex-hero-in) .hero h1,
.apex-motion:not(.apex-hero-in) .hero__wave svg { animation: apxHeroSafe .6s ease 8s forwards; }
@keyframes apxHeroSafe { to { opacity: 1; transform: none; clip-path: none; } }

/* --------------------------------------------------------------------------
   2. Apparitions au défilement (attribut data-rv posé en JS)
   -------------------------------------------------------------------------- */
.apex-motion [data-rv] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity .9s var(--apx-ease-out) var(--rv-d, 0ms),
        transform 1s var(--apx-ease-out) var(--rv-d, 0ms),
        letter-spacing 1.2s var(--apx-ease-out) var(--rv-d, 0ms);
}
/* Titres : arrivent légèrement espacés, puis se resserrent (sans flou) */
.apex-motion [data-rv="title"] {
    transform: translate3d(0, .45em, 0);
    letter-spacing: .14em;
}
.apex-motion [data-rv="line"] {
    opacity: 1;
    transform: scaleX(0);
    transition: transform 1.1s var(--apx-ease-io) var(--rv-d, 0ms);
}
.apex-motion [data-rv].is-in { opacity: 1; transform: none; }
.apex-motion [data-rv="title"].is-in { letter-spacing: 1px; }

/* --------------------------------------------------------------------------
   3. Filigranes
   Quelques symboles de maths / physique, un par section, placés uniquement
   dans les marges vides à gauche ou à droite du contenu : jamais derrière
   un texte. Ils défilent normalement avec la page. Affichés seulement sur
   les écrans assez larges pour avoir des marges libres.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .apex-wm :is(.section--cream, .section--olive, .section--olive-dark) {
        position: relative;
        isolation: isolate;               /* le symbole reste sous le contenu */
        --wm-s: clamp(76px, calc((100vw - var(--maxw)) / 2 - 40px), 130px);
        --wm-c: rgba(107, 115, 57, .24);  /* olive foncé sur fond crème */
        --wm-y: 18%;
        --wm-r: -8deg;
        --wm-i: url("../images/filigranes/pi.svg");
    }
    .apex-wm .section--olive      { --wm-c: rgba(58, 61, 42, .22); }
    .apex-wm .section--olive-dark { --wm-c: rgba(250, 244, 216, .18); }

    .apex-wm :is(.section--cream, .section--olive, .section--olive-dark)::before,
    .apex-wm :is(.section--cream, .section--olive, .section--olive-dark):only-of-type::after {
        content: "";
        position: absolute; z-index: -1; pointer-events: none;
        width: var(--wm-s); height: var(--wm-s);
        top: max(12px, min(var(--wm-y), calc(100% - var(--wm-s) - 12px)));
        /* centré dans la marge libre (entre le bord de l'écran et le texte) */
        left: calc((100% - var(--maxw)) / 4 + 12px - var(--wm-s) / 2);
        background-color: var(--wm-c);
        -webkit-mask: var(--wm-i) center / contain no-repeat;
                mask: var(--wm-i) center / contain no-repeat;
        transform: rotate(var(--wm-r));
    }

    /* Une section sur deux : symbole à droite */
    .apex-wm :is(.section--cream, .section--olive, .section--olive-dark):nth-of-type(even)::before {
        left: auto;
        right: calc((100% - var(--maxw)) / 4 + 12px - var(--wm-s) / 2);
    }

    /* Page d'une seule section (ex. Stages) : un second symbole, de l'autre côté, plus bas */
    .apex-wm :is(.section--cream, .section--olive, .section--olive-dark):only-of-type::after {
        left: auto;
        right: calc((100% - var(--maxw)) / 4 + 12px - var(--wm-s) / 2);
        top: max(12px, min(62%, calc(100% - var(--wm-s) - 12px)));
        -webkit-mask-image: url("../images/filigranes/courbe.svg");
                mask-image: url("../images/filigranes/courbe.svg");
        transform: rotate(6deg);
    }

    /* Variété : symbole, hauteur et inclinaison changent d'une section à l'autre */
    .apex-wm section:nth-of-type(7n+2) { --wm-i: url("../images/filigranes/sigma.svg");     --wm-y: 30%; --wm-r: 7deg; }
    .apex-wm section:nth-of-type(7n+3) { --wm-i: url("../images/filigranes/atome.svg");     --wm-y: 14%; --wm-r: -12deg; }
    .apex-wm section:nth-of-type(7n+4) { --wm-i: url("../images/filigranes/racine.svg");    --wm-y: 40%; --wm-r: -6deg; }
    .apex-wm section:nth-of-type(7n+5) { --wm-i: url("../images/filigranes/integrale.svg"); --wm-y: 22%; --wm-r: 8deg; }
    .apex-wm section:nth-of-type(7n+6) { --wm-i: url("../images/filigranes/emc2.svg");      --wm-y: 34%; --wm-r: -10deg; }
    .apex-wm section:nth-of-type(7n+7) { --wm-i: url("../images/filigranes/courbe.svg");    --wm-y: 20%; --wm-r: 4deg; }
}

/* --------------------------------------------------------------------------
   4. Accessibilité : aucune animation si l'utilisateur les a réduites
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .apex-motion [data-rv],
    .apex-motion .hero__logo-img,
    .apex-motion .hero h1 { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}