/**
 * Mascot Signature Effects — Per-house CSS animations for mascot artwork.
 * Loaded by HouseRenderer.js and dashboard.html.
 *
 * Each mascot gets:
 *   1. Idle animation (always running) — breathing, glow pulse
 *   2. Signature effect (overlay) — particles, energy, distortion
 *   3. Hover reaction — scale, glow boost, special effect
 */

/* ═══════════════════════════════════════════════════════════
   BASE: Shared mascot container setup
   ═══════════════════════════════════════════════════════════ */

.mascot-fx {
    position: relative;
    display: inline-block;
}

.mascot-fx::before,
.mascot-fx::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 16px;
}

/* ═══════════════════════════════════════════════════════════
   WEB / WEAVER — Crystalline spider: web thread shimmer
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-web {
    animation: mascotBreath 4s ease-in-out infinite;
}

.mascot-fx-web::before {
    inset: -4px;
    background: radial-gradient(circle at 30% 40%, rgba(96, 165, 250, 0.2), transparent 60%);
    animation: webShimmer 3s ease-in-out infinite;
}

.mascot-fx-web::after {
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(96, 165, 250, 0.08) 50%, transparent 60%);
    animation: webThreadSweep 5s linear infinite;
}

@keyframes webShimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes webThreadSweep {
    0% { background-position: -200% -200%; }
    100% { background-position: 200% 200%; }
}

/* ═══════════════════════════════════════════════════════════
   FORGE / EMBER — Phoenix: ember glow and heat distortion
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-forge {
    animation: mascotBreath 3.5s ease-in-out infinite;
}

.mascot-fx-forge::before {
    inset: -6px;
    background: radial-gradient(ellipse at 50% 80%, rgba(251, 191, 36, 0.25), transparent 60%);
    animation: emberGlow 2.5s ease-in-out infinite;
}

.mascot-fx-forge::after {
    inset: 0;
    box-shadow: inset 0 -20px 40px rgba(251, 191, 36, 0.1);
    animation: heatRise 4s ease-in-out infinite;
}

@keyframes emberGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes heatRise {
    0%, 100% { filter: brightness(1); }
    30% { filter: brightness(1.05); }
    60% { filter: brightness(0.98); }
}

/* ═══════════════════════════════════════════════════════════
   CLOUD / NIMBUS — Thunderbird: lightning flicker
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-cloud {
    animation: mascotBreath 4.5s ease-in-out infinite;
}

.mascot-fx-cloud::before {
    inset: -4px;
    background: radial-gradient(circle at 60% 30%, rgba(249, 115, 22, 0.15), transparent 50%);
    animation: stormPulse 6s ease-in-out infinite;
}

.mascot-fx-cloud::after {
    inset: 0;
    opacity: 0;
    background: rgba(249, 115, 22, 0.15);
    border-radius: 16px;
    animation: lightningFlash 8s ease-in-out infinite;
}

@keyframes stormPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes lightningFlash {
    0%, 94%, 96%, 98%, 100% { opacity: 0; }
    95% { opacity: 0.6; }
    97% { opacity: 0.3; }
    99% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   CODE / HELIX — Serpent: code rain overlay
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-code {
    animation: mascotBreath 5s ease-in-out infinite;
}

.mascot-fx-code::before {
    inset: -4px;
    background: radial-gradient(circle at 40% 60%, rgba(74, 222, 128, 0.15), transparent 50%);
    animation: codeGlow 3s ease-in-out infinite;
}

.mascot-fx-code::after {
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 18px,
        rgba(74, 222, 128, 0.03) 18px,
        rgba(74, 222, 128, 0.03) 20px
    );
    animation: codeScroll 2s linear infinite;
}

@keyframes codeGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes codeScroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 20px; }
}

/* ═══════════════════════════════════════════════════════════
   DARK-ARTS / NYX — Raven: shadow dissolve edges
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-dark-arts {
    animation: mascotBreath 6s ease-in-out infinite;
}

.mascot-fx-dark-arts::before {
    inset: -8px;
    background: radial-gradient(circle at 50% 50%, rgba(107, 33, 168, 0.2), transparent 60%);
    animation: shadowPulse 4s ease-in-out infinite;
    filter: blur(4px);
}

.mascot-fx-dark-arts::after {
    inset: 0;
    box-shadow:
        inset 8px 0 20px rgba(107, 33, 168, 0.15),
        inset -8px 0 20px rgba(107, 33, 168, 0.15);
    animation: shadowEdge 5s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.03); }
}

@keyframes shadowEdge {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════
   EYE / VIGIL — Owl: radar scan ring
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-eye {
    animation: mascotBreath 4s ease-in-out infinite;
}

.mascot-fx-eye::before {
    inset: -4px;
    border: 1px solid rgba(192, 132, 252, 0.15);
    border-radius: 50%;
    animation: radarSweep 4s linear infinite;
}

.mascot-fx-eye::after {
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgba(192, 132, 252, 0.12), transparent 40%);
    animation: vigilWatch 3s ease-in-out infinite;
}

@keyframes radarSweep {
    0% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 0.2; }
    100% { transform: scale(0.95); opacity: 0.6; }
}

@keyframes vigilWatch {
    0%, 100% { opacity: 0.3; }
    40% { opacity: 0.7; }
    60% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   KEY / CIPHER — Sphinx: cipher wheel rotation glow
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-key {
    animation: mascotBreath 4.5s ease-in-out infinite;
}

.mascot-fx-key::before {
    inset: -6px;
    border: 1px dashed rgba(244, 114, 182, 0.15);
    border-radius: 50%;
    animation: cipherSpin 20s linear infinite;
}

.mascot-fx-key::after {
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(244, 114, 182, 0.12), transparent 50%);
    animation: cipherPulse 3.5s ease-in-out infinite;
}

@keyframes cipherSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes cipherPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════
   SCRIPT / GLYPH — Fox: rune trail shimmer
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-script {
    animation: mascotBreath 3.5s ease-in-out infinite;
}

.mascot-fx-script::before {
    inset: -4px;
    background: linear-gradient(180deg, transparent 30%, rgba(167, 139, 250, 0.1) 70%, transparent 100%);
    animation: runeTrail 3s ease-in-out infinite;
}

.mascot-fx-script::after {
    inset: 0;
    background: radial-gradient(circle at 60% 70%, rgba(167, 139, 250, 0.1), transparent 40%);
    animation: glyphGlow 4s ease-in-out infinite;
}

@keyframes runeTrail {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.6; transform: translateY(-4px); }
}

@keyframes glyphGlow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════
   SHIELD / BASTION — Lion: force field barrier pulse
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-shield {
    animation: mascotBreath 4s ease-in-out infinite;
}

.mascot-fx-shield::before {
    inset: -6px;
    border: 2px solid rgba(248, 113, 113, 0.1);
    border-radius: 16px;
    animation: shieldBarrier 3s ease-in-out infinite;
}

.mascot-fx-shield::after {
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.08), transparent 60%);
    animation: bastionHeart 2s ease-in-out infinite;
}

@keyframes shieldBarrier {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.01); }
}

@keyframes bastionHeart {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   AI / AXIOM — Golem: neural circuit pulse
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-ai {
    animation: mascotBreath 5s ease-in-out infinite;
}

.mascot-fx-ai::before {
    inset: -4px;
    background:
        radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.1), transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.1), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(139, 92, 246, 0.1), transparent 30%);
    animation: neuralFire 3s ease-in-out infinite;
}

.mascot-fx-ai::after {
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(139, 92, 246, 0.06) 100%);
    animation: axiomProcess 4s ease-in-out infinite;
}

@keyframes neuralFire {
    0%, 100% { opacity: 0.3; }
    33% { opacity: 0.6; }
    66% { opacity: 0.4; }
}

@keyframes axiomProcess {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   DIVERGENT / FLUX — Chimera: RGB glitch distortion
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-divergent {
    animation: mascotBreath 4s ease-in-out infinite;
}

.mascot-fx-divergent::before {
    inset: -4px;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
    animation: fluxGlitch 6s ease-in-out infinite;
}

.mascot-fx-divergent::after {
    inset: 0;
    mix-blend-mode: screen;
    animation: rgbSplit 8s ease-in-out infinite;
}

@keyframes fluxGlitch {
    0%, 90%, 100% { opacity: 0.3; transform: translate(0, 0); }
    92% { opacity: 0.7; transform: translate(-2px, 1px); }
    94% { opacity: 0.4; transform: translate(2px, -1px); }
    96% { opacity: 0.8; transform: translate(-1px, -1px); }
    98% { opacity: 0.5; transform: translate(1px, 1px); }
}

@keyframes rgbSplit {
    0%, 88%, 100% { box-shadow: none; }
    90% { box-shadow: -2px 0 rgba(255, 0, 255, 0.15), 2px 0 rgba(0, 255, 255, 0.15); }
    92% { box-shadow: 2px 0 rgba(255, 0, 255, 0.1), -2px 0 rgba(0, 255, 255, 0.1); }
    94% { box-shadow: -1px 1px rgba(255, 0, 255, 0.2), 1px -1px rgba(0, 255, 255, 0.2); }
}

/* ═══════════════════════════════════════════════════════════
   MATRIX / GHOST — Wolf: Matrix code rain
   ═══════════════════════════════════════════════════════════ */

.mascot-fx-matrix {
    animation: mascotBreath 5s ease-in-out infinite;
}

.mascot-fx-matrix::before {
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 14px,
        rgba(0, 255, 65, 0.03) 14px,
        rgba(0, 255, 65, 0.03) 16px
    );
    animation: matrixRain 1.5s linear infinite;
}

.mascot-fx-matrix::after {
    inset: -4px;
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1), transparent 60%);
    animation: ghostPresence 4s ease-in-out infinite;
}

@keyframes matrixRain {
    0% { background-position: 0 0; }
    100% { background-position: 0 16px; }
}

@keyframes ghostPresence {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED: Breathing animation
   ═══════════════════════════════════════════════════════════ */

@keyframes mascotBreath {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.01); }
}

/* ═══════════════════════════════════════════════════════════
   HOVER: Enhanced glow on interaction
   ═══════════════════════════════════════════════════════════ */

.mascot-fx:hover {
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

.mascot-fx:hover::before {
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION: Respect user preferences
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .mascot-fx,
    .mascot-fx::before,
    .mascot-fx::after {
        animation: none !important;
    }
}