/* INTRO — scene d'ouverture de la page d'accueil : chiffres-cles qui
   "pop" a l'arrivee. Une seule fois, jamais en boucle. Le logo fixe
   (.brand-mark) et le footer sont communs a toutes les pages, voir
   style.css.
   Les tokens de degrade du logo sont definis ici pour l'accueil
   (index.php), seule page a charger intro.css et a utiliser .accent-grad. */
:root {
    --brand-blue: #1E3FF0;
    --brand-violet: #833BEF;
    --brand-gradient: linear-gradient(135deg, var(--brand-blue), var(--brand-violet));
}

/* --- Scene : englobe le hero ET les sections suivantes sous un seul fond
       continu, pour que les halos ne s'arretent pas net a la fin du hero.
       Pas d'overflow:hidden ici : ca casserait le position:sticky de la
       sequence de scroll plus bas (le debordement horizontal des halos est
       coupe au niveau du body, voir tokens/base.css). --- */
.scene {
    position: relative;
    isolation: isolate;
    background: var(--canvas);
}

/* Halos doux, aux couleurs de la marque (bleu -> violet) : ancres en haut et
   en bas de TOUTE la scene (pas juste du hero) pour rester visibles au fil
   du scroll au lieu d'etre coupes a la frontiere d'une section. */
.scene__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
/* Tailles plafonnees en vw (pas juste en px) : ces halos sont volontairement
   plus larges que l'ecran, mais doivent rester proportionnes a la largeur
   reelle du viewport -- sinon sur un telephone etroit, leur largeur en dur
   peut faire deborder la page meme avec overflow-x:hidden sur body selon
   le moteur de rendu. */
.scene__glow--1 { width: min(680px, 160vw); height: min(680px, 160vw); top: -220px; left: 50%; transform: translateX(-78%); background: var(--brand-blue); opacity: .26; }
.scene__glow--2 { width: min(620px, 150vw); height: min(620px, 150vw); top: 46%; right: 50%; transform: translateX(86%); background: var(--brand-violet); opacity: .22; }
.scene__glow--3 { width: min(600px, 145vw); height: min(600px, 145vw); bottom: -240px; left: 50%; transform: translateX(-68%); background: var(--brand-blue); opacity: .2; }

.intro {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding: clamp(120px, 16vw, 168px) clamp(20px, 6vw, 48px) clamp(56px, 8vw, 88px);
    box-sizing: border-box;
}

.intro__inner {
    max-width: 780px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro__mark {
    display: block;
    width: clamp(220px, 30vw, 400px);
    height: auto;
    filter: drop-shadow(0 16px 32px rgba(94, 58, 237, .22));
}

.intro__title {
    margin-top: 28px;
    font: var(--weight-bold) clamp(26px, 7.3vw, 72px)/1.08 var(--font-ui);
    letter-spacing: var(--track-tighter);
    color: var(--ink);
}
.intro__title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.intro__tagline {
    margin-top: 16px;
    font: var(--type-lead);
    color: var(--muted);
    max-width: 46ch;
}

/* --- Reveal d'ouverture : fade + slide, une seule fois --- */
.reveal-item {
    opacity: 0;
    transform: translateY(16px);
    animation: intro-in .7s var(--ease-out) both;
    animation-delay: var(--d, 0ms);
}
@keyframes intro-in {
    to { opacity: 1; transform: translateY(0); }
}

/* --- "Pop" : leger overshoot d'echelle, reserve au mark --- */
.intro__mark.reveal-item {
    animation-name: intro-pop;
    animation-duration: .8s;
}
@keyframes intro-pop {
    0%   { opacity: 0; transform: translateY(18px) scale(.82); }
    65%  { opacity: 1; transform: translateY(-3px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-item,
    .intro__mark.reveal-item { animation: none; opacity: 1; transform: none; }
}