/* ==============================================================================
   fonts.css - Typography & Creative Font Customisation Styles
   Includes: Social Media Defaults, Normal, Glowing, and RGB Animated Fonts
   ============================================================================== */

/* Perf: the Google Fonts families these classes use (Bebas Neue, Comic Neue, Dancing Script, Fira Code, Inter,
   Merriweather, Orbitron, Press Start 2P, Roboto) are now loaded by the combined Google Fonts <link> in
   Views/Shared/_Layout.cshtml. As an import here, the browser could only start that download after this file
   had arrived, delaying the first paint. Keep the two lists in sync if you add a font. */

/* --- 1. Social Media Defaults (Free) --- */
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.font-roboto {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.font-merriweather {
    font-family: 'Merriweather', Georgia, Cambria, serif !important;
}

/* --- 2. Normal Fonts --- */
.font-arcade {
    font-family: 'Press Start 2P', monospace, cursive !important;
    font-size: 0.88em !important;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.font-mono {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: -0.3px;
}

.font-comic {
    font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif !important;
}

.font-bebas {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 1px;
    font-size: 1.08em;
}

.font-dancing {
    font-family: 'Dancing Script', cursive, handwriting !important;
    font-size: 1.15em;
}

.font-orbitron {
    font-family: 'Orbitron', monospace, sans-serif !important;
    letter-spacing: 0.75px;
}

/* --- 3. Glowing Fonts (Neon Text Shadows) --- */
.font-glow-cyan {
    font-family: 'Orbitron', monospace, sans-serif !important;
    color: #e0f2fe !important;
    text-shadow: 0 0 4px #06b6d4, 0 0 10px #0891b2, 0 0 20px #0e7490, 0 0 32px #06b6d4 !important;
}

.font-glow-emerald {
    font-family: 'Inter', sans-serif !important;
    color: #ecfdf5 !important;
    text-shadow: 0 0 4px #10b981, 0 0 10px #059669, 0 0 20px #047857, 0 0 32px #10b981 !important;
}

.font-glow-solar {
    font-family: 'Bebas Neue', sans-serif !important;
    color: #fffbeb !important;
    text-shadow: 0 0 4px #f59e0b, 0 0 12px #ea580c, 0 0 24px #dc2626, 0 0 36px #ea580c !important;
    letter-spacing: 1px;
}

.font-glow-amethyst {
    font-family: 'Dancing Script', cursive !important;
    color: #faf5ff !important;
    text-shadow: 0 0 4px #c084fc, 0 0 12px #9333ea, 0 0 24px #7e22ce, 0 0 36px #9333ea !important;
    font-size: 1.15em;
}

.font-glow-diamond {
    font-family: 'Inter', sans-serif !important;
    color: #ffffff !important;
    text-shadow: 0 0 4px #e2e8f0, 0 0 12px #38bdf8, 0 0 24px #0284c7, 0 0 36px #38bdf8 !important;
}

/* --- 4. Premium RGB Animated Fonts (Chromatic Gradients) --- */
.font-rgb-chroma {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #ff0055, #ff7700, #ffdd00, #00dd77, #0099ff, #bb00ff, #ff0055);
    background-size: 300% 100%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: font-rgb-shift 4s linear infinite !important;
}

.font-rgb-holo {
    font-family: 'Orbitron', monospace, sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #a5f3fc, #f472b6, #c084fc, #38bdf8, #a5f3fc);
    background-size: 250% 250%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: font-rgb-shift 5s ease-in-out infinite !important;
}

.font-rgb-cosmic {
    font-family: 'Merriweather', serif !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #818cf8, #c084fc, #fbbf24, #f43f5e, #818cf8);
    background-size: 300% 100%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: font-rgb-shift 6s linear infinite !important;
}

.font-rgb-glitch {
    font-family: 'Fira Code', monospace !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #00ffff, #ff00ff, #00ff66, #ffff00, #00ffff);
    background-size: 300% 100%;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: font-rgb-shift 2.5s steps(15, end) infinite !important;
}

@keyframes font-rgb-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}