/**
 * @file style.css
 * @description Core stylesheet for PC Building Battle Card Creator (miguelparamos.com/creador-de-cartas).
 * Contains typography, base variables, video background, animated mparamos links,
 * pure CSS internationalization flags, and layout support classes.
 * Encapsulated in standard CSS Cascade Layers to guarantee Tailwind CSS v4 utility precedence.
 * @author Miguel Páramos
 */

/* =========================================
   1. CASCADE LAYERS DECLARATION & VARIABLES
   ========================================= */
@layer base, components, utilities;

:root {
    --bg-color: #0b0f19;
    --card-bg: rgba(13, 17, 23, 0.85);
    --border-color: #1f2937;
    --accent-color: #3b82f6;
    --text-primary: #f3f4f6;
    --text-muted: #9ca3af;
}

/* =========================================
   2. CUSTOM TYPOGRAPHY
   ========================================= */
@font-face {
    font-family: 'FlorenceSans';
    src: url('../font/sfflorencesans.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FlorenceSans';
    src: url('../font/sfflorencesansblack.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
}

/* =========================================
   3. BASE STYLES & RESET (Tailwind Preflight Safe)
   ========================================= */
@layer base {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        background-color: var(--bg-color);
        color: var(--text-primary);
    }
}

/* =========================================
   4. COMPONENTS & DECORATIVE ELEMENTS
   ========================================= */
@layer components {
    /* Custom Scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: #1f2937 #0b0f19;
    }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0b0f19; }
    ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

    /* Video Background */
    .video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        overflow: hidden;
        background-color: var(--bg-color);
    }

    #bg-video {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        opacity: 0.3;
    }

    @media (prefers-reduced-motion: reduce) {
        #bg-video {
            display: none;
        }
    }

    /* Header & Footer Structural Accents */
    header, footer {
        background-color: rgba(11, 15, 25, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    header {
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #10b981, #3b82f6) 1;
    }
    footer {
        border-top: 3px solid transparent;
        border-image: linear-gradient(to right, #10b981, #3b82f6) 1;
    }

    /* MParamos Decorative Elements & Links */
    .mparamos-line {
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, #10b981, #3b82f6);
        border-radius: 2px;
    }

    a.mparamos-link {
        display: inline-block;
        vertical-align: baseline;
        color: #10b981;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    a.mparamos-link:hover {
        transform: scale(1.05);
        color: transparent;
        font-weight: bold;
        background-image: linear-gradient(90deg, #10b981, #3b82f6, #10b981);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        animation: rotarColores 3s linear infinite;
    }

    /* Pure CSS Flags (I18N) */
    .flag-btn {
        width: 32px;
        height: 22px;
        border: 2px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        padding: 0;
        outline: none;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.6);
        display: block;
    }

    .flag-btn:hover {
        transform: scale(1.15);
        border-color: #666;
    }

    .flag-btn.active {
        border-color: #00ff88;
        transform: scale(1.15);
        box-shadow: 0 0 10px rgba(0,255,136,0.7);
        z-index: 2;
    }

    .flag-es {
        background: linear-gradient(to bottom, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75%);
    }

    .flag-fr {
        background: linear-gradient(to right, #002395 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ed2939 66.6%);
    }

    .flag-en {
        background: #fff;
    }

    .flag-en::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background:
            linear-gradient(to right, #3C3B6E 45%, transparent 45%) 0 0 / 100% 50% no-repeat,
            repeating-linear-gradient(to bottom, #B22234 0, #B22234 11.11%, #fff 11.11%, #fff 22.22%);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    .flag-en::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background:
            linear-gradient(to bottom, transparent 40%, #C8102E 40%, #C8102E 60%, transparent 60%),
            linear-gradient(to right, transparent 43%, #C8102E 43%, #C8102E 57%, transparent 57%),
            linear-gradient(to bottom, transparent 33%, #fff 33%, #fff 67%, transparent 67%),
            linear-gradient(to right, transparent 36%, #fff 36%, #fff 64%, transparent 64%),
            linear-gradient(35deg, transparent 46%, #C8102E 46%, #C8102E 54%, transparent 54%),
            linear-gradient(-35deg, transparent 46%, #C8102E 46%, #C8102E 54%, transparent 54%),
            linear-gradient(35deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
            linear-gradient(-35deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
            #012169;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .flag-en-separator {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to top left, transparent 47%, #222 47%, #222 53%, transparent 53%);
        z-index: 10;
        pointer-events: none;
    }
}

/* =========================================
   5. KEYFRAME ANIMATIONS
   ========================================= */
@keyframes rotarColores {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes brilloAzul {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================================
   6. UTILITIES
   ========================================= */
@layer utilities {
    .bg-mparamos-bg { background-color: var(--bg-color); }
    .bg-mparamos-card { background-color: var(--card-bg); }
    .border-mparamos-border { border-color: var(--border-color); }
    .text-mparamos-accent { color: var(--accent-color); }
    .text-mparamos-text { color: var(--text-primary); }
    .text-mparamos-text-muted { color: var(--text-muted); }
    .animate-fade-in {
        animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}