/* SportsGenV4 — Global Styles, Themes & Animations */

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #111;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

/* Font smoothing */
* {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}

/* Fonts */
.font-oswald {
    font-family: 'Oswald', sans-serif;
}

.font-roboto {
    font-family: 'Roboto Condensed', sans-serif;
}

/* Grid for standings */
.standings-grid {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) repeat(7, 52px);
    gap: 8px;
    align-items: center;
}

/* ============ BASE ANIMATION RESET ============ */
.anim-slide,
.anim-slide-left,
.anim-slide-up,
.anim-fadeup,
.anim-zoom,
.anim-flip,
.anim-bounce,
.anim-roll,
.anim-blur,
.anim-wipe,
.anim-bounce-drop,
.anim-split,
.anim-reveal {
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* ============ EXISTING ANIMATIONS ============ */
@keyframes slide-in {
    from {
        transform: translateX(-80px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slide-left-in {
    from {
        transform: translateX(80px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slide-up-in {
    from {
        transform: translateY(60px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes fadeup-in {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes flip-in {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(0.5);
        opacity: 0
    }

    60% {
        transform: scale(1.1)
    }

    80% {
        transform: scale(0.95)
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes roll-in {
    from {
        transform: translateX(-100px) rotate(-180deg);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.anim-slide {
    animation: slide-in var(--anim-dur, 0.6s) ease both;
}

.anim-slide-left {
    animation: slide-left-in var(--anim-dur, 0.6s) ease both;
}

.anim-slide-up {
    animation: slide-up-in var(--anim-dur, 0.6s) ease both;
}

.anim-fadeup {
    animation: fadeup-in var(--anim-dur, 0.6s) ease both;
}

.anim-zoom {
    animation: zoom-in var(--anim-dur, 0.5s) ease both;
}

.anim-flip {
    animation: flip-in var(--anim-dur, 0.6s) ease both;
}

.anim-bounce {
    animation: bounce-in var(--anim-dur, 0.8s) ease both;
}

.anim-roll {
    animation: roll-in var(--anim-dur, 0.7s) ease both;
}

/* ============ NEW ANIMATIONS ============ */
@keyframes blur-in {
    from {
        filter: blur(12px);
        opacity: 0;
        transform: scale(1.05)
    }

    to {
        filter: none;
        opacity: 1;
        transform: none
    }
}

@keyframes wipe-right {
    from {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0 0% 0 0)
    }
}

@keyframes bounce-drop {
    0% {
        transform: translateY(-60px);
        opacity: 0
    }

    60% {
        transform: translateY(10px);
        opacity: 1
    }

    80% {
        transform: translateY(-5px)
    }

    100% {
        transform: none
    }
}

@keyframes split-in {
    from {
        clip-path: inset(0 50% 0 50%);
        opacity: 0
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

@keyframes reveal-up {
    from {
        clip-path: inset(100% 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes typewriter {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.anim-blur {
    animation: blur-in var(--anim-dur, 0.8s) ease both;
}

.anim-wipe {
    animation: wipe-right var(--anim-dur, 0.6s) ease both;
}

.anim-bounce-drop {
    animation: bounce-drop var(--anim-dur, 0.8s) ease both;
}

.anim-split {
    animation: split-in var(--anim-dur, 0.6s) ease both;
}

.anim-reveal {
    animation: reveal-up var(--anim-dur, 0.6s) cubic-bezier(.16, 1, .3, 1) both;
}

.anim-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter var(--anim-dur, 1.2s) steps(30, end) both;
}

/* ============ CARD THEMES ============ */

/* 1. Dark */
.theme-dark {
    --th-hbg: #0a0a0a;
    --th-ht: #fff;
    --th-rbg: #16181c;
    --th-ra: #1d1f24;
    --th-rt: #e0e0e0;
    --th-acc: #facc15;
    --th-bdr: #2f3039;
    background: #0a0a0a;
    color: #e0e0e0;
}

/* 2. Glass */
.theme-glass {
    --th-hbg: rgba(255, 255, 255, .08);
    --th-ht: #fff;
    --th-rbg: rgba(255, 255, 255, .04);
    --th-ra: rgba(255, 255, 255, .08);
    --th-rt: #f0f0f0;
    --th-acc: #60a5fa;
    --th-bdr: rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, #1e2238, #111827);
    color: #f0f0f0;
}

.theme-glass .card-row {
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
}

.theme-glass .card-header {
    backdrop-filter: blur(12px);
}

/* 3. Neon */
.theme-neon {
    --th-hbg: #0d001a;
    --th-ht: #f0f;
    --th-rbg: #100020;
    --th-ra: #150028;
    --th-rt: #e0e0ff;
    --th-acc: #f0f;
    --th-bdr: #7700ff;
    background: #0d001a;
    color: #e0e0ff;
}

.theme-neon .card-header {
    box-shadow: 0 0 30px #f0f5;
    border-bottom: 2px solid #f0f;
}

/* 4. Broadcast */
.theme-broadcast {
    --th-hbg: #003580;
    --th-ht: #fff;
    --th-rbg: #001f4e;
    --th-ra: #002766;
    --th-rt: #ddeeff;
    --th-acc: #ffcb00;
    --th-bdr: #004090;
    background: #001f4e;
    color: #ddeeff;
}

.theme-broadcast .card-header {
    background: linear-gradient(to right, #003580, #00518a) !important;
    border-bottom: 3px solid #ffcb00;
}

/* 5. Minimal */
.theme-minimal {
    --th-hbg: #f8f8f8;
    --th-ht: #111;
    --th-rbg: #fff;
    --th-ra: #f5f5f5;
    --th-rt: #333;
    --th-acc: #111;
    --th-bdr: #e0e0e0;
    background: #f0f0f0;
    color: #333;
}

.theme-minimal .card-header {
    border-bottom: 2px solid #111;
}

/* 6. Newspaper */
.theme-newspaper {
    --th-hbg: #111;
    --th-ht: #fffde7;
    --th-rbg: #faf6e9;
    --th-ra: #f2ecd4;
    --th-rt: #2a1f00;
    --th-acc: #b8860b;
    --th-bdr: #c8b860;
    background: #faf6e9;
    color: #2a1f00;
    font-family: Georgia, serif;
}

.theme-newspaper .card-header {
    background: #111 !important;
    border-bottom: 3px double #b8860b;
}

/* 7. Retro */
.theme-retro {
    --th-hbg: #ff6b35;
    --th-ht: #1a0000;
    --th-rbg: #2d1b2e;
    --th-ra: #3a2040;
    --th-rt: #ffd5c8;
    --th-acc: #ff6b35;
    --th-bdr: #ff6b3544;
    background: linear-gradient(180deg, #1a0011, #2d1b2e);
    color: #ffd5c8;
}

.theme-retro .card-header {
    background: linear-gradient(90deg, #ff6b35, #f7c59f) !important;
}

/* 8. Vibrant */
.theme-vibrant {
    --th-hbg: #7c3aed;
    --th-ht: #fff;
    --th-rbg: #131426;
    --th-ra: #1a1c38;
    --th-rt: #e0e7ff;
    --th-acc: #a78bfa;
    --th-bdr: #4f46e5;
    background: linear-gradient(180deg, #0d0f1e, #131426);
    color: #e0e7ff;
}

.theme-vibrant .card-header {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
}

/* Infinite Breathing Animation */
@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.animate-breathe {
    animation: breathe 4s ease-in-out infinite;
    display: block;
    /* Ensures transform origin works correctly */
}