/* =========================================================
   MIAOUTICK — EVENT DESIGN SYSTEM 2.0
   Ambiances saisonnières, animations et interface thématique
   À charger APRÈS style.css
   ========================================================= */

:root {
    --event-primary: #69d5ff;
    --event-secondary: #8b9dff;
    --event-glow: rgba(105, 213, 255, .28);
    --event-bg: #071b34;
    --event-surface: rgba(7, 38, 75, .76);
    --event-border: rgba(145, 226, 255, .24);
    --event-text: #f5fbff;
    --event-particle-opacity: .66;
    --event-speed: 24s;
}

/* Le thème bleu de base reste le thème par défaut. */
body {
    --event-primary: #69d5ff;
    --event-secondary: #8b9dff;
    --event-glow: rgba(105, 213, 255, .28);
    --event-bg: #071b34;
    --event-surface: rgba(7, 38, 75, .76);
    --event-border: rgba(145, 226, 255, .24);
    --event-text: #f5fbff;
    background-color: var(--event-bg);
    transition: background-color .6s ease, color .4s ease;
}

/* Décorations en couches : n'interceptent jamais les clics. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    user-select: none;
    opacity: var(--event-particle-opacity);
    background-image:
        radial-gradient(circle, var(--event-primary) 1px, transparent 1.8px),
        radial-gradient(circle, var(--event-secondary) 1.2px, transparent 2px);
    background-size: 95px 125px, 145px 175px;
    background-position: 0 0, 42px 60px;
    animation: event-particles-drift var(--event-speed) linear infinite;
    mix-blend-mode: screen;
}

/* Transitions coordonnées pour les principaux composants existants. */
.site-header,
.navbar,
.brand-icon,
.nav-link::after,
.twitch-button,
.btn-main,
.btn-secondary-custom,
.status-badge,
.content-section,
.about-card,
.platform-card,
.live-panel,
.social-buttons a,
.contact-email,
.contact-form,
.contact-form .form-control,
.contact-submit,
.site-footer,
.section-heading > span,
.section-heading h2 strong,
.contact-label,
.contact-content h2 span {
    transition:
        background .55s ease,
        background-color .55s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        color .45s ease,
        text-shadow .45s ease,
        filter .45s ease,
        transform .25s ease;
}

body[class*="theme-"] .site-header {
    background: linear-gradient(110deg, color-mix(in srgb, var(--event-bg) 91%, transparent), color-mix(in srgb, var(--event-secondary) 18%, var(--event-bg))) !important;
    border-bottom-color: color-mix(in srgb, var(--event-primary) 42%, transparent);
    box-shadow: 0 12px 38px color-mix(in srgb, var(--event-glow) 45%, transparent);
}

body[class*="theme-"] .navbar-collapse {
    background: color-mix(in srgb, var(--event-bg) 94%, transparent);
    border-color: var(--event-border);
}

body[class*="theme-"] .brand-icon,
body[class*="theme-"] .about-icon {
    background: linear-gradient(135deg, var(--event-primary), var(--event-secondary)) !important;
    box-shadow: 0 0 28px var(--event-glow);
}

body[class*="theme-"] .nav-link::after {
    background: linear-gradient(90deg, var(--event-primary), var(--event-secondary));
}

body[class*="theme-"] .hero-section {
    background:
        radial-gradient(ellipse at 18% 78%, color-mix(in srgb, var(--event-primary) 22%, transparent), transparent 38%),
        radial-gradient(ellipse at 82% 20%, color-mix(in srgb, var(--event-secondary) 23%, transparent), transparent 42%),
        linear-gradient(140deg, var(--event-bg), color-mix(in srgb, var(--event-bg) 70%, var(--event-secondary)) 58%, color-mix(in srgb, var(--event-bg) 60%, var(--event-primary))) !important;
}

body[class*="theme-"] .hero-section::before {
    background:
        linear-gradient(color-mix(in srgb, var(--event-primary) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--event-primary) 7%, transparent) 1px, transparent 1px);
    background-size: 70px 70px;
}

body[class*="theme-"] .hero-section::after {
    background: radial-gradient(circle 460px at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--event-glow), transparent 68%);
}

body[class*="theme-"] .hero-glow,
body[class*="theme-"] .character-glow {
    background: radial-gradient(circle, var(--event-glow), color-mix(in srgb, var(--event-secondary) 13%, transparent) 48%, transparent 73%);
}

body[class*="theme-"] .hero-orbit,
body[class*="theme-"] .character-ring {
    border-color: color-mix(in srgb, var(--event-primary) 44%, transparent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--event-glow) 50%, transparent);
}

body[class*="theme-"] .hero-title span,
body[class*="theme-"] .hero-text h1 span {
    background: linear-gradient(135deg, #fff 5%, var(--event-primary) 52%, var(--event-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 8px 24px var(--event-glow));
}

body[class*="theme-"] .status-badge,
body[class*="theme-"] .floating-card {
    border-color: var(--event-border);
    background: color-mix(in srgb, var(--event-bg) 78%, transparent);
    box-shadow: 0 15px 42px rgba(0, 0, 0, .2), 0 0 24px color-mix(in srgb, var(--event-glow) 45%, transparent);
}

body[class*="theme-"] .btn-main,
body[class*="theme-"] .twitch-button,
body[class*="theme-"] .contact-submit {
    color: var(--event-bg) !important;
    background: linear-gradient(120deg, var(--event-primary), var(--event-secondary)) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--event-glow) 80%, transparent);
}

body[class*="theme-"] .btn-main:hover,
body[class*="theme-"] .twitch-button:hover,
body[class*="theme-"] .contact-submit:hover {
    filter: brightness(1.08);
    box-shadow: 0 16px 42px var(--event-glow);
    transform: translateY(-3px);
}

body[class*="theme-"] .btn-secondary-custom,
body[class*="theme-"] .social-buttons a,
body[class*="theme-"] .contact-email {
    border-color: var(--event-border);
    background-color: color-mix(in srgb, var(--event-surface) 85%, transparent);
}

body[class*="theme-"] .content-section {
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--event-primary) 12%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--event-bg) 80%, var(--event-secondary)), var(--event-bg));
}

body[class*="theme-"] .social-section {
    background:
        radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--event-secondary) 17%, transparent), transparent 40%),
        linear-gradient(180deg, var(--event-bg), color-mix(in srgb, var(--event-bg) 78%, #000));
}

body[class*="theme-"] .about-card,
body[class*="theme-"] .platform-card,
body[class*="theme-"] .live-panel,
body[class*="theme-"] .contact-form {
    border-color: var(--event-border);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .22), 0 0 28px color-mix(in srgb, var(--event-glow) 32%, transparent);
}

body[class*="theme-"] .platform-card:hover,
body[class*="theme-"] .about-card:hover {
    border-color: var(--event-primary);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28), 0 0 32px var(--event-glow);
}

body[class*="theme-"] .platform-icon,
body[class*="theme-"] .platform-card > span,
body[class*="theme-"] .section-heading > span,
body[class*="theme-"] .section-heading h2 strong,
body[class*="theme-"] .live-label,
body[class*="theme-"] .contact-label,
body[class*="theme-"] .contact-content h2 span,
body[class*="theme-"] .contact-email i {
    color: var(--event-primary);
}

body[class*="theme-"] .contact-form .form-control:focus {
    border-color: var(--event-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--event-primary) 17%, transparent), 0 0 25px var(--event-glow);
}

body[class*="theme-"] .site-footer {
    background: color-mix(in srgb, var(--event-bg) 90%, #000);
    border-top-color: var(--event-border);
}

/* Animations décoratives : différentes vitesses pour donner de la profondeur. */
@keyframes event-particles-drift {
    from { background-position: 0 -160px, 42px -260px; }
    to   { background-position: 95px 100vh, -103px 120vh; }
}

@keyframes event-soft-pulse {
    0%, 100% { filter: drop-shadow(0 0 7px var(--event-glow)); }
    50%      { filter: drop-shadow(0 0 19px var(--event-glow)); }
}

@keyframes event-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

body[class*="theme-"] .brand-icon {
    animation: event-soft-pulse 4.5s ease-in-out infinite;
}

body[class*="theme-"] .character-glow {
    animation: event-soft-pulse 5s ease-in-out infinite;
}

body[class*="theme-"] .floating-card {
    animation: event-float 6s ease-in-out infinite;
}

body[class*="theme-"] .card-bottom { animation-delay: -2s; }
body[class*="theme-"] .card-chill  { animation-delay: -4s; }

/* ========================= HALLOWEEN ========================= */
body.theme-halloween {
    --event-primary: #ff9b3d;
    --event-secondary: #b65cff;
    --event-glow: rgba(255, 105, 25, .36);
    --event-bg: #10091e;
    --event-surface: rgba(31, 15, 48, .82);
    --event-border: rgba(255, 155, 61, .35);
    --event-speed: 17s;
}
body.theme-halloween::after {
    opacity: .8;
    background-image:
        radial-gradient(circle, #ffad4a 1.5px, transparent 2px),
        radial-gradient(circle, #c28bff 1.4px, transparent 2px);
    background-size: 110px 135px, 170px 190px;
}
body.theme-halloween .hero-section {
    background:
        radial-gradient(ellipse at 15% 75%, rgba(255, 105, 25, .26), transparent 35%),
        radial-gradient(ellipse at 80% 25%, rgba(153, 68, 255, .28), transparent 42%),
        linear-gradient(140deg, #10091e, #17102b 55%, #29133a) !important;
}
body.theme-halloween .site-header { background: linear-gradient(110deg, #160d29, #2a1240) !important; }
body.theme-halloween .btn-main,
body.theme-halloween .twitch-button,
body.theme-halloween .contact-submit { background: linear-gradient(120deg, #ff8a26, #a855f7) !important; color: #fff !important; }
body.theme-halloween .hero-section::before { background-color: rgba(30, 10, 45, .12); }

/* ============================ NOËL =========================== */
body.theme-noel {
    --event-primary: #8ee8ff;
    --event-secondary: #5ee0a0;
    --event-glow: rgba(174, 236, 255, .38);
    --event-bg: #081c32;
    --event-surface: rgba(7, 43, 54, .82);
    --event-border: rgba(142, 232, 255, .34);
    --event-speed: 13s;
}
body.theme-noel::after {
    opacity: .82;
    background-image:
        radial-gradient(circle, #fff 1.6px, transparent 2.5px),
        radial-gradient(circle, #a9eaff 1.2px, transparent 2px);
    background-size: 70px 90px, 115px 140px;
}
body.theme-noel .hero-section {
    background:
        radial-gradient(ellipse at 75% 20%, rgba(94, 224, 160, .2), transparent 40%),
        radial-gradient(ellipse at 15% 80%, rgba(142, 232, 255, .23), transparent 38%),
        linear-gradient(140deg, #081c32, #103550 60%, #0b303b) !important;
}
body.theme-noel .site-header { background: linear-gradient(110deg, #071a2c, #103b42) !important; }
body.theme-noel .btn-main,
body.theme-noel .twitch-button,
body.theme-noel .contact-submit { background: linear-gradient(120deg, #8ee8ff, #5ee0a0) !important; color: #08263a !important; }

/* ======================= SAINT-VALENTIN ====================== */
body.theme-valentin {
    --event-primary: #ff83c1;
    --event-secondary: #c7a0ff;
    --event-glow: rgba(255, 131, 193, .34);
    --event-bg: #20112e;
    --event-surface: rgba(54, 24, 64, .82);
    --event-border: rgba(255, 131, 193, .34);
    --event-speed: 22s;
}
body.theme-valentin::after {
    opacity: .55;
    background-image:
        radial-gradient(circle, #ff83c1 1.7px, transparent 2.5px),
        radial-gradient(circle, #e6baff 1.2px, transparent 2px);
    background-size: 125px 155px, 180px 205px;
}
body.theme-valentin .hero-section {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(199, 160, 255, .25), transparent 42%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 105, 180, .24), transparent 40%),
        linear-gradient(140deg, #20112e, #292044 60%, #411c48) !important;
}
body.theme-valentin .site-header { background: linear-gradient(110deg, #27102f, #411c48) !important; }
body.theme-valentin .btn-main,
body.theme-valentin .twitch-button,
body.theme-valentin .contact-submit { background: linear-gradient(120deg, #ff83c1, #bd8cff) !important; color: #32183c !important; }

/* ============================ ÉTÉ ============================ */
body.theme-ete {
    --event-primary: #53e6ef;
    --event-secondary: #ffd875;
    --event-glow: rgba(83, 230, 239, .34);
    --event-bg: #07345a;
    --event-surface: rgba(5, 75, 104, .8);
    --event-border: rgba(83, 230, 239, .34);
    --event-speed: 28s;
}
body.theme-ete::after {
    opacity: .48;
    background-image:
        radial-gradient(circle, #bafaff 1.4px, transparent 2px),
        radial-gradient(circle, #ffe6a1 1.5px, transparent 2px);
    background-size: 130px 145px, 185px 210px;
}
body.theme-ete .hero-section {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(255, 216, 117, .26), transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(83, 230, 239, .24), transparent 40%),
        linear-gradient(140deg, #07345a, #087ca7 60%, #075985) !important;
}
body.theme-ete .site-header { background: linear-gradient(110deg, #07345a, #087ca7) !important; }
body.theme-ete .btn-main,
body.theme-ete .twitch-button,
body.theme-ete .contact-submit { background: linear-gradient(120deg, #53e6ef, #ffd875) !important; color: #07345a !important; }

/* ============================ PÂQUES ========================= */
body.theme-paques {
    --event-primary: #ffb8d2;
    --event-secondary: #b9a5ff;
    --event-glow: rgba(255, 184, 210, .34);
    --event-bg: #182442;
    --event-surface: rgba(44, 48, 91, .8);
    --event-border: rgba(255, 184, 210, .35);
    --event-speed: 25s;
}
body.theme-paques::after {
    opacity: .58;
    background-image:
        radial-gradient(circle, #ffc7df 1.5px, transparent 2.3px),
        radial-gradient(circle, #c7f2d8 1.2px, transparent 2px);
    background-size: 125px 155px, 180px 190px;
}
body.theme-paques .hero-section {
    background:
        radial-gradient(ellipse at 15% 25%, rgba(255, 184, 210, .28), transparent 40%),
        radial-gradient(ellipse at 80% 30%, rgba(190, 174, 255, .29), transparent 42%),
        radial-gradient(ellipse at 50% 100%, rgba(151, 231, 205, .21), transparent 45%),
        linear-gradient(135deg, #182442, #273c68 60%, #354b75) !important;
}
body.theme-paques .site-header { background: linear-gradient(110deg, #202544, #34345e) !important; }
body.theme-paques .btn-main,
body.theme-paques .twitch-button,
body.theme-paques .contact-submit { background: linear-gradient(120deg, #ffb8d2, #c1b0ff, #a8ead5) !important; color: #252849 !important; }

/* =========================== AUTOMNE ========================= */
body.theme-automne {
    --event-primary: #ffad62;
    --event-secondary: #d46b3d;
    --event-glow: rgba(255, 153, 66, .32);
    --event-bg: #20162a;
    --event-surface: rgba(59, 31, 38, .82);
    --event-border: rgba(255, 173, 98, .34);
    --event-speed: 19s;
}
body.theme-automne::after {
    opacity: .66;
    background-image:
        radial-gradient(ellipse, #ffc078 1.6px, transparent 2.6px),
        radial-gradient(ellipse, #e7a06b 1.2px, transparent 2px);
    background-size: 105px 135px, 155px 185px;
}
body.theme-automne .hero-section {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(212, 107, 61, .26), transparent 42%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 173, 98, .22), transparent 40%),
        linear-gradient(140deg, #20162a, #38202d 60%, #43252c) !important;
}
body.theme-automne .site-header { background: linear-gradient(110deg, #211426, #43252c) !important; }
body.theme-automne .btn-main,
body.theme-automne .twitch-button,
body.theme-automne .contact-submit { background: linear-gradient(120deg, #ffad62, #d46b3d) !important; color: #2b1721 !important; }

/* Accessibilité et performances sur mobile. */
@media (max-width: 768px) {
    body::after {
        opacity: calc(var(--event-particle-opacity) * .55);
        background-size: 125px 155px, 180px 210px;
    }

    body[class*="theme-"] .floating-card {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body::after,
    body[class*="theme-"] .brand-icon,
    body[class*="theme-"] .character-glow,
    body[class*="theme-"] .floating-card {
        animation: none !important;
    }

    body,
    body * ,
    body *::before,
    body *::after {
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   MIAOUTICK EVENTS 2.1 — DÉCORATIONS PAR SAISON
   Remplace les particules génériques par des motifs thématiques.
   ========================================================= */

/* Couche décorative discrète, toujours transparente aux clics. */
body::after {
    z-index: 20;
    display: block;
    inset: -12vh 0 0;
    overflow: hidden;
    white-space: pre;
    font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: clamp(18px, 2.1vw, 30px);
    line-height: 2.5;
    letter-spacing: clamp(12px, 3vw, 42px);
    padding: 0 2vw;
    color: var(--event-primary);
    opacity: .26;
    text-shadow: 0 0 16px var(--event-glow);
    background: none;
    background-image: none;
    mix-blend-mode: screen;
    animation: event-theme-decorations 32s linear infinite;
}

/* Les caractères sont répartis sur plusieurs lignes pour créer
   une pluie décorative plutôt qu'un motif de points uniforme. */
body.theme-halloween::after {
    content: "🎃       🦇       ✦       🕸️\A   🦇        🕯️       🎃\A ✦       🕷️       🦇       ✧\A    🎃       🦇       🕸️\A 🦇       ✦       🎃       🕯️\A    🕸️       🦇       ✧";
    color: #ffad4a;
    opacity: .34;
    text-shadow: 0 0 18px rgba(255, 105, 25, .7);
    animation-duration: 23s;
}

body.theme-noel::after {
    content: "❄️       ✨       ❅       🎄\A   ❄️        ✧       ❄️\A ✨       ❄️       🎁       ❅\A    🎄       ❄️       ✨\A ❅       ❄️       ✧       🎁\A    ❄️       🎄       ❄️";
    color: #dff8ff;
    opacity: .48;
    text-shadow: 0 0 16px rgba(174, 236, 255, .75);
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 2px);
    background-size: 65px 80px;
    animation-duration: 17s;
}

body.theme-valentin::after {
    content: "♡       💗       ✧       💕\A   💖       ♡       💗\A ✧       💕       ♡       💖\A    💗       ✦       💕\A ♡       💖       ✧       💗\A    💕       ♡       💖";
    color: #ff9fce;
    opacity: .31;
    text-shadow: 0 0 18px rgba(255, 105, 180, .65);
    animation-duration: 28s;
}

body.theme-paques::after {
    content: "🌸       🦋       🌷       ✧\A   🐣       🌼       🥚\A 🐰       🌸       🥚       🦋\A    🌷       🐣       🌼\A 🌸       🥚       🦋       ✦\A    🐰       🌷       🌸";
    color: #ffd5e6;
    opacity: .36;
    text-shadow: 0 0 16px rgba(200, 145, 255, .65);
    animation-duration: 30s;
}

body.theme-ete::after {
    content: "☀️       🫧       ✦       🐚\A   🐠       🫧       ☀️\A ✧       🐚       🫧       🌊\A    ☀️       🐠       ✦\A 🫧       🌊       🐚       ☀️\A    🐠       ✧       🫧";
    color: #bafaff;
    opacity: .28;
    text-shadow: 0 0 18px rgba(83, 230, 239, .65);
    animation-duration: 36s;
}

body.theme-automne::after {
    content: "🍂       🍁       ✦       🍂\A   🍁       ✧       🍃\A 🍂       🍁       🍃       ✦\A    🍁       🍂       ✧\A 🍃       🍂       🍁       🍂\A    ✦       🍁       🍂";
    color: #ffc078;
    opacity: .38;
    text-shadow: 0 0 18px rgba(255, 153, 66, .6);
    animation-duration: 25s;
}

/* Thème bleu normal : étoiles et petites pattes, sans pluie saisonnière. */
body:not([class*="theme-"])::after {
    content: "✦       ✧       🐾       ✦\A   ✧       ✦       ✧\A 🐾       ✦       ✧       🐾\A    ✦       ✧       ✦\A ✧       🐾       ✦       ✧";
    color: #8eeaff;
    opacity: .16;
    text-shadow: 0 0 18px rgba(105, 213, 255, .5);
    animation-duration: 38s;
}

@keyframes event-theme-decorations {
    0%   { transform: translate3d(0, -8%, 0) rotate(0deg); background-position: 0 0; }
    50%  { transform: translate3d(1.2%, 45%, 0) rotate(2deg); background-position: 30px 45vh; }
    100% { transform: translate3d(-1%, 100%, 0) rotate(-2deg); background-position: -20px 100vh; }
}

@media (max-width: 768px) {
    body::after {
        font-size: 17px;
        letter-spacing: 13px;
        line-height: 3;
        opacity: .2;
    }

    body.theme-noel::after,
    body.theme-halloween::after,
    body.theme-valentin::after,
    body.theme-paques::after,
    body.theme-ete::after,
    body.theme-automne::after {
        opacity: .22;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none !important;
    }
}