/* ============================================================
   Effets d'ambiance du thème (choisis par tournoi dans le Wizard)
   Couches décoratives au-dessus du contenu mais transparentes aux clics,
   sous le header (z-index 1040). Couleurs tirées du thème (--jc-…).
   Les couches sont créées par theme_effets.js, qui sert aussi aux aperçus du Wizard.
   ============================================================ */

.jc-ambiance { position: fixed; inset: 0; z-index: 1030; pointer-events: none; overflow: hidden; }
.jc-ambiance > * { position: absolute; pointer-events: none; }
/* Aperçu d'un effet dans le Wizard : la même couche, enfermée dans sa vignette */
.jc-ambiance--apercu { position: absolute; z-index: 1; border-radius: inherit; }

/* ---- Particules et apparitions (dessinées en canvas par theme_effets.js) ---- */
.jc-ambiance__canvas { inset: 0; width: 100%; height: 100%; }

/* ---- Vignette : bords assombris ---- */
.jc-ambiance__vignette {
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---- Brume : trois nappes qui dérivent à des vitesses différentes ---- */
.jc-ambiance__brume {
    left: -50%;
    bottom: -12%;
    width: 200%;
    height: 42%;
    opacity: 0.55;
    background:
        radial-gradient(ellipse 18% 55% at 12% 70%, rgba(var(--jc-secondary-rgb, 140, 160, 180), 0.22), transparent 70%),
        radial-gradient(ellipse 22% 60% at 38% 80%, rgba(255, 255, 255, 0.10), transparent 70%),
        radial-gradient(ellipse 20% 50% at 63% 75%, rgba(var(--jc-accent-rgb, 160, 160, 180), 0.14), transparent 70%),
        radial-gradient(ellipse 25% 60% at 88% 78%, rgba(255, 255, 255, 0.09), transparent 70%);
    filter: blur(14px);
    animation: jc-brume 38s linear infinite;
}
.jc-ambiance__brume--2 { bottom: -18%; height: 36%; opacity: 0.4; animation-duration: 55s; animation-direction: reverse; }
.jc-ambiance__brume--3 { bottom: -22%; height: 30%; opacity: 0.3; animation-duration: 75s; }
@keyframes jc-brume {
    from { transform: translateX(0); }
    to { transform: translateX(25%); }
}
.jc-ambiance--apercu .jc-ambiance__brume { filter: blur(6px); bottom: 0; opacity: 0.9; animation-duration: 12s; }

/* ---- Toiles d'araignée dans les coins ---- */
.jc-ambiance__toile { width: 190px; height: 190px; color: rgba(255, 255, 255, 0.16); }
.jc-ambiance__toile--gauche { top: 70px; left: 0; }
.jc-ambiance__toile--droite { top: 70px; right: 0; transform: scaleX(-1); }
.jc-ambiance__araignee { top: 70px; right: 64px; width: 2px; height: 0; background: rgba(255, 255, 255, 0.25); animation: jc-fil 9s ease-in-out infinite; }
.jc-ambiance__araignee::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: -6px;
    width: 14px;
    height: 12px;
    border-radius: 50%;
    background: #0b0610;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 8px rgba(var(--jc-accent-rgb, 255, 117, 24), 0.35);
}
@keyframes jc-fil {
    0%, 100% { height: 30px; }
    50% { height: 120px; }
}
@media (max-width: 768px) {
    .jc-ambiance__toile { width: 110px; height: 110px; }
    .jc-ambiance__araignee { right: 34px; }
}
.jc-ambiance--apercu .jc-ambiance__toile { top: 0; width: 48px; height: 48px; color: rgba(255, 255, 255, 0.3); }
.jc-ambiance--apercu .jc-ambiance__araignee { top: 0; right: 26px; animation-name: jc-fil-apercu; }
.jc-ambiance--apercu .jc-ambiance__araignee::after { bottom: -6px; left: -4px; width: 9px; height: 8px; }
@keyframes jc-fil-apercu {
    0%, 100% { height: 10px; }
    50% { height: 45px; }
}

/* ---- Grain de film ---- */
.jc-ambiance__grain {
    inset: -50%;
    opacity: 0.11;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: jc-grain 0.9s steps(6) infinite;
}
.jc-ambiance--apercu .jc-ambiance__grain { opacity: 0.22; }
@keyframes jc-grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-6%, 4%); }
    40% { transform: translate(5%, -7%); }
    60% { transform: translate(-3%, 8%); }
    80% { transform: translate(7%, 2%); }
    100% { transform: translate(-5%, -4%); }
}

/* ---- Écran rétro : lignes de balayage, bande lumineuse qui descend, petits sauts d'image ---- */
.jc-ambiance__scanlines {
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
    animation: jc-crt 6s steps(1) infinite;
}
.jc-ambiance__scanlines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(var(--jc-secondary-rgb, 120, 200, 255), 0.07), transparent);
    animation: jc-balayage 7s linear infinite;
}
.jc-ambiance--apercu .jc-ambiance__scanlines::after { background: linear-gradient(180deg, transparent, rgba(var(--jc-secondary-rgb, 120, 200, 255), 0.18), transparent); animation-duration: 3s; }
@keyframes jc-balayage { from { top: -20%; } to { top: 105%; } }
@keyframes jc-crt { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.7; } 98% { opacity: 1; } 99% { opacity: 0.8; } }

/* ---- Effets de texte (classes posées sur <html>, ou sur la vignette d'aperçu, par theme_effets.js) ----
   Cumulables : chacun fournit son animation dans une variable, les titres les jouent ensemble. */
.jc-vacillement { --jc-anim-vacille: jc-vacille 7s infinite; }
.jc-glitch { --jc-anim-glitch: jc-glitch 4.5s infinite; }
.jc-neon { --jc-anim-neon: jc-neon 3.2s ease-in-out infinite; }
:is(.jc-vacillement, .jc-glitch, .jc-neon) :is(.hero-title, h1, h2, .jc-apercu-titre) {
    animation: var(--jc-anim-vacille, none), var(--jc-anim-glitch, none), var(--jc-anim-neon, none);
}
.jc-vacillement .hero-title {
    filter: drop-shadow(0 0 18px rgba(var(--jc-accent-rgb, 255, 117, 24), 0.45));
}
.jc-neon :is(.hero-title, h1, h2, .jc-apercu-titre) { color: #fff; }
@keyframes jc-vacille {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.35; }
    21% { opacity: 0.8; }
}
@keyframes jc-glitch {
    0%, 7%, 11%, 51%, 55%, 100% { transform: none; filter: none; }
    8% { transform: translate(-3px, 1px) skewX(-8deg); filter: drop-shadow(3px 0 0 rgba(255, 0, 80, 0.85)) drop-shadow(-3px 0 0 rgba(0, 240, 255, 0.85)); }
    9% { transform: translate(3px, -1px); filter: drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.85)) drop-shadow(2px 0 0 rgba(0, 240, 255, 0.85)); }
    10% { transform: translate(-1px, 0) skewX(5deg); filter: drop-shadow(2px 0 0 rgba(255, 0, 80, 0.7)); }
    52% { transform: translate(2px, 0) skewX(6deg); filter: drop-shadow(-3px 0 0 rgba(0, 240, 255, 0.85)) drop-shadow(3px 0 0 rgba(255, 0, 80, 0.85)); }
    53% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 0 rgba(255, 0, 80, 0.85)); }
}
@keyframes jc-neon {
    0%, 100% {
        text-shadow: 0 0 4px #fff, 0 0 10px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.9),
            0 0 24px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.7), 0 0 46px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.5);
    }
    50% {
        text-shadow: 0 0 2px #fff, 0 0 6px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.6),
            0 0 14px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.4), 0 0 26px rgba(var(--jc-accent-rgb, 212, 175, 55), 0.25);
    }
}

/* Moins d'animations demandées par le visiteur : on garde l'ambiance, sans mouvement */
@media (prefers-reduced-motion: reduce) {
    .jc-ambiance__brume, .jc-ambiance__araignee, .jc-ambiance__grain, .jc-ambiance__scanlines, .jc-ambiance__scanlines::after,
    :is(.jc-vacillement, .jc-glitch, .jc-neon) :is(.hero-title, h1, h2, .jc-apercu-titre) { animation: none !important; }
}