/* ============================================================
   ZAAP FX — Le Zaap du Savoir
   Effets décoratifs : particules d'énergie site-wide + scène
   héroïque autour de l'image réelle du Zaap (img/zaap-night.png).
   À charger APRÈS css/style.css. Compagnon de js/zaap-fx.js.
   ============================================================ */

/* ------------------------------------------------------------
   1. STACKING — le canvas de particules vit en z-index:0,
   le contenu passe au-dessus (z-index:1+). Les particules ne
   sont donc visibles que sur le fond, entre les blocs.
   ------------------------------------------------------------ */

.zaap-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.header,
main,
.main,
.footer {
    position: relative;
    z-index: 1;
}

/* .nav est déjà position:sticky + z-index:100 dans style.css :
   on ne touche pas à sa position (sticky serait cassé),
   on réaffirme seulement son z-index — UNIQUEMENT en desktop :
   en mobile ≤768px la nav devient un tiroir z-index:9999 qui doit
   passer AU-DESSUS du voile .nav-overlay (sinon menu incliquable). */
@media (min-width: 769px) {
    .nav {
        z-index: 100;
    }
}

/* Le hero accueille la scène en absolu */
.hero {
    position: relative;
}

/* Le contenu du hero passe devant la scène */
.hero-content,
.hero-stats {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   2. SCÈNE ZAAP (injectée par js/zaap-fx.js dans .hero)
   Image réelle du portail + lueur battante sur le vortex,
   éclairs SVG, particules qui s'échappent, brume, runes.
   Centre du vortex dans l'image : 56% / 52%.
   ------------------------------------------------------------ */

.zaap-scene {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 460px;
    aspect-ratio: 585 / 517;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* --- L'image du vrai Zaap --- */
.zaap-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 26px rgba(79, 124, 255, 0.35))
            drop-shadow(0 10px 34px rgba(34, 211, 238, 0.18));
}

/* --- Cœur battant du vortex ---
   Positionné SUR le centre du vortex (56% / 52%).
   Double battement rapproché puis pause (rythme cardiaque). */
.zaap-heart {
    position: absolute;
    left: 56%;
    top: 52%;
    width: 176px;
    height: 190px;
    margin: -95px 0 0 -88px;   /* recentrage sans transform (le
                                   transform est réservé au scale) */
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(214, 234, 255, 0.9) 0%,
        rgba(120, 170, 255, 0.55) 26%,
        rgba(79, 124, 255, 0.42) 52%,
        rgba(139, 92, 246, 0.25) 72%,
        transparent 100%);
    filter: blur(14px);
    opacity: 0.55;
    animation: zaap-heartbeat 2.2s ease-in-out infinite;
    will-change: transform, opacity;
}

/* --- Halo large qui respire lentement, en décalé --- */
.zaap-heart-halo {
    position: absolute;
    left: 56%;
    top: 52%;
    width: 330px;
    height: 340px;
    margin: -170px 0 0 -165px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(96, 176, 255, 0.26) 0%,
        rgba(79, 124, 255, 0.18) 40%,
        rgba(139, 92, 246, 0.10) 62%,
        transparent 78%);
    filter: blur(22px);
    opacity: 0.5;
    animation: zaap-halo-breathe 6.5s ease-in-out -2.4s infinite;
    will-change: transform, opacity;
}

/* --- Particules qui s'échappent du vortex ---
   Variables inline posées par le JS : --angle / --dist (info),
   --tx / --ty (déplacement précalculé), --dur / --delay, --sz. */
.zaap-escape {
    position: absolute;
    left: 56%;
    top: 52%;
    width: var(--sz, 4px);
    height: var(--sz, 4px);
    border-radius: 50%;
    background: var(--clr, #9be8ff);
    box-shadow: 0 0 8px 2px var(--glow, rgba(34, 211, 238, 0.75));
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: zaap-escape var(--dur, 3.4s) ease-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}

/* --- Brume animée en bas de la scène ---
   Grandes taches floutées (blur statique), dérive lente
   horizontale + légère montée, désynchronisées. */
.zaap-mist {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.zaap-mist-1 {
    left: -6%;
    bottom: -14%;
    width: 62%;
    height: 42%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(79, 124, 255, 0.26) 0%,
        rgba(34, 211, 238, 0.11) 55%,
        transparent 78%);
    filter: blur(26px);
    animation: zaap-mist-a 26s ease-in-out infinite alternate;
}

.zaap-mist-2 {
    left: 30%;
    bottom: -18%;
    width: 70%;
    height: 46%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(139, 92, 246, 0.23) 0%,
        rgba(79, 124, 255, 0.09) 55%,
        transparent 78%);
    filter: blur(30px);
    animation: zaap-mist-b 33s ease-in-out -9s infinite alternate;
}

.zaap-mist-3 {
    left: 12%;
    bottom: -8%;
    width: 52%;
    height: 34%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(34, 211, 238, 0.14) 0%,
        rgba(139, 92, 246, 0.06) 55%,
        transparent 78%);
    filter: blur(20px);
    animation: zaap-mist-a 21s ease-in-out -14s infinite alternate;
}

.zaap-mist-4 {
    left: 44%;
    bottom: -4%;
    width: 44%;
    height: 30%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(79, 124, 255, 0.13) 0%,
        rgba(34, 211, 238, 0.05) 55%,
        transparent 78%);
    filter: blur(18px);
    animation: zaap-mist-b 29s ease-in-out -21s infinite alternate;
}

/* --- Runes flottantes près de l'arche ---
   Position horizontale / délai / durée via variables inline. */
.zaap-rune {
    position: absolute;
    left: var(--rx, 50%);
    bottom: 18%;
    font-size: var(--rs, 15px);
    line-height: 1;
    color: rgba(155, 232, 255, 0.9);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.9),
                 0 0 18px rgba(79, 124, 255, 0.6);
    opacity: 0;
    animation: zaap-rune-rise var(--rt, 11s) linear infinite;
    animation-delay: var(--rd, 0s);
    will-change: transform, opacity;
}

/* --- Couche SVG des éclairs (arcs générés par le JS) --- */
.zaap-arcs {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    overflow: visible;
    pointer-events: none;
}

.zaap-arc {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.9));
    opacity: 0;
}

/* ------------------------------------------------------------
   3. KEYFRAMES (transform / opacity uniquement)
   ------------------------------------------------------------ */

/* Battement cardiaque : deux pulses rapprochés puis repos */
@keyframes zaap-heartbeat {
    0%   { transform: scale(1);    opacity: 0.55; }
    12%  { transform: scale(1.18); opacity: 0.9; }
    24%  { transform: scale(1.05); opacity: 0.7; }
    36%  { transform: scale(1.22); opacity: 1; }
    55%  { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1);    opacity: 0.55; }
}

@keyframes zaap-halo-breathe {
    0%, 100% { transform: scale(1);    opacity: 0.35; }
    50%      { transform: scale(1.08); opacity: 0.65; }
}

/* Particule qui s'échappe : naît au centre du vortex, file en
   trajectoire radiale, s'estompe et rétrécit */
@keyframes zaap-escape {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    10% { opacity: 0.95; }
    70% { opacity: 0.55; }
    100% {
        transform: translate(calc(-50% + var(--tx, 120px)),
                             calc(-50% + var(--ty, -120px))) scale(0.15);
        opacity: 0;
    }
}

/* Deux dérives de brume distinctes pour désynchroniser */
@keyframes zaap-mist-a {
    0%   { transform: translate(0, 0);         opacity: 0.35; }
    45%  { opacity: 0.6; }
    100% { transform: translate(52px, -16px);  opacity: 0.3; }
}

@keyframes zaap-mist-b {
    0%   { transform: translate(0, 0);         opacity: 0.3; }
    55%  { opacity: 0.55; }
    100% { transform: translate(-64px, -22px); opacity: 0.35; }
}

@keyframes zaap-rune-rise {
    0%   { transform: translateY(0) scale(0.9);      opacity: 0; }
    12%  { opacity: 0.85; }
    60%  { opacity: 0.45; }
    100% { transform: translateY(-150px) scale(1.1); opacity: 0; }
}

/* ------------------------------------------------------------
   4. RESPONSIVE + ACCESSIBILITÉ
   ------------------------------------------------------------ */

/* Scène masquée sur écrans étroits */
@media (max-width: 900px) {
    .zaap-scene {
        display: none;
    }
}

/* Mouvement réduit : image + lueur fixes, brume fixe.
   (js/zaap-fx.js ne crée ni canvas, ni éclairs, ni particules,
   ni runes dans ce cas.) */
@media (prefers-reduced-motion: reduce) {
    .zaap-heart,
    .zaap-heart-halo,
    .zaap-escape,
    .zaap-mist,
    .zaap-rune {
        animation: none !important;
    }

    .zaap-heart      { opacity: 0.7; }
    .zaap-heart-halo { opacity: 0.45; }
    .zaap-mist       { opacity: 0.4; }
}