/*
 * THE PIT WALL — SHARED PREMIUM CSS
 * Linked by all sub-pages via: <link rel="stylesheet" href="pitwall/premium.css">
 * Pure visual upgrade. Zero functional changes.
 */

/* GLOBAL PREMIUM VARIABLES */
:root {
    --premium-ease: cubic-bezier(.16, 1, .3, 1);
    --spring-ease:  cubic-bezier(.34, 1.56, .64, 1);
    --carbon-fibre:
        repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px);
    --blueprint-grid:
        repeating-linear-gradient(90deg, rgba(30,65,255,.04) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(30,65,255,.04) 0 1px, transparent 1px 48px);
}

/* PREMIUM KEYFRAMES */
@keyframes shimmerSweep {
    0%   { transform: translateX(-130%) skewX(-20deg); }
    100% { transform: translateX(230%) skewX(-20deg); }
}
@keyframes holographic {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
    0%,100% { opacity: .7; }
    50%      { opacity: 1; }
}
@keyframes counterReveal {
    from { opacity: 0; transform: translateY(8px) scale(.93); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes borderFlickerPremium {
    0%,100% { opacity: .94; filter: drop-shadow(0 0 7px var(--team-color)) drop-shadow(0 0 20px var(--team-color)); }
    18% { opacity: .62; }
    32% { opacity: 1; filter: drop-shadow(0 0 11px var(--team-color)) drop-shadow(0 0 32px var(--team-color)); }
    48% { opacity: .76; }
    64% { opacity: 1; }
}

/* BODY — richer atmosphere + carbon overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--carbon-fibre);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}
.page, .shell { position: relative; z-index: 1; }

/* BODY TOP ACCENT — refined tri-color racing stripe */
body::before {
    background: linear-gradient(90deg, #1e41ff 0 30%, #e8002d 30% 76%, #ffd400 76% 100%) !important;
    height: 3px !important;
    z-index: 900 !important;
}

/* PAGE HEADING */
h1 { text-shadow: 0 4px 24px rgba(0,0,0,.4); }
h1 em { font-style: normal; text-shadow: 0 0 32px rgba(232,0,45,.42), 0 4px 24px rgba(0,0,0,.4); }

/* TOPBAR TABS */
.tabs a {
    color: rgba(184,193,212,.72);
    border-bottom: 2px solid rgba(255,255,255,.14);
    transition: color .2s ease, border-color .2s ease;
    position: relative;
}
.tabs a:hover { color: rgba(255,255,255,.88); border-bottom-color: rgba(255,255,255,.32); }
.tabs .active { color: #fff; border-bottom-color: #e8002d; text-shadow: 0 0 16px rgba(232,0,45,.28); }

/* STATUS LINE */
.status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(184,193,212,.55) !important;
}
.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e8002d;
    box-shadow: 0 0 10px rgba(232,0,45,.6);
    animation: glowPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* BACK BUTTON — premium glass */
.back {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
    transition: transform .22s var(--spring-ease), border-color .22s ease, background .22s ease, box-shadow .22s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.back:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.11) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* DRIVER / TEAM CARDS — holographic shimmer */
.driver-card,
.team-card {
    border-radius: 12px !important;
    transition: transform .28s var(--premium-ease), box-shadow .28s var(--premium-ease), border-color .25s ease !important;
}
.driver-card:hover,
.team-card:hover {
    transform: translateY(-9px) scale(1.024) !important;
    border-color: color-mix(in srgb, var(--team-color) 74%, #fff) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 30px 80px rgba(0,0,0,.66),
        0 0 52px color-mix(in srgb, var(--team-color) 46%, transparent) !important;
}
.driver-card::after,
.team-card::after {
    border-radius: 11px !important;
    box-shadow:
        inset 0 0 16px color-mix(in srgb, var(--team-color) 44%, transparent),
        0 0 16px color-mix(in srgb, var(--team-color) 80%, transparent),
        0 0 36px color-mix(in srgb, var(--team-color) 62%, transparent) !important;
}
.driver-card:hover::after,
.team-card:hover::after {
    animation: borderFlickerPremium 1.1s steps(2, end) infinite !important;
}
.driver-card.p1,
.team-card.p1 {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 64px rgba(0,0,0,.44), 0 0 44px rgba(255,212,0,.12);
}
.driver-card.p1:hover,
.team-card.p1:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 38px 96px rgba(0,0,0,.68),
        0 0 72px rgba(255,212,0,.22),
        0 0 110px color-mix(in srgb, var(--team-color) 34%, transparent) !important;
}

/* MINI CARDS */
.mini-card {
    border-radius: 10px !important;
    transition: transform .26s var(--premium-ease), border-color .26s ease, box-shadow .26s ease !important;
}
.mini-card:hover {
    transform: translateY(-6px) scale(1.016) !important;
    border-color: color-mix(in srgb, var(--team-color) 72%, #fff) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.54), 0 0 34px color-mix(in srgb, var(--team-color) 38%, transparent) !important;
}
.mini-card::after {
    border-radius: 9px !important;
}
.mini-card:hover::after {
    animation: borderFlickerPremium 1.1s steps(2, end) infinite !important;
}

/* POINTS — counter reveal animation */
.points {
    animation: counterReveal .7s ease both;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* TICKER PREMIUM */
.ticker-wrap {
    background:
        linear-gradient(90deg, rgba(30,65,255,.09), transparent 20%, rgba(232,0,45,.07), rgba(255,212,0,.04)),
        rgba(4,6,14,.97) !important;
    border-bottom: 1px solid rgba(255,212,0,.4) !important;
    box-shadow: 0 0 0 0.5px rgba(232,0,45,.3), 0 6px 24px rgba(0,0,0,.4) !important;
    backdrop-filter: blur(18px) !important;
}
.tick {
    border-right: 1px solid rgba(255,255,255,.11);
    height: 38px;
}
.tick .sym { color: #ffd400 !important; font-weight: 900 !important; letter-spacing: .2em !important; }

/* PROFILE TABS */
.tab-btn {
    border-radius: 8px;
    transition: transform .22s var(--spring-ease), background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn.active {
    background: linear-gradient(135deg, #ffd400 0%, #fff 44%, #ff4c67 100%) !important;
    color: #03050d !important;
    border-color: transparent !important;
    box-shadow: 0 6px 24px rgba(232,0,45,.24), 0 0 20px rgba(255,212,0,.18) !important;
}

/* RACE CALENDAR ROWS */
.race-row,
.race-card {
    border-radius: 12px;
    transition: transform .26s var(--premium-ease), box-shadow .26s var(--premium-ease), border-color .22s ease;
    overflow: hidden;
}
.race-row:hover,
.race-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0,0,0,.48), 0 0 28px rgba(30,65,255,.18);
}

/* PREMIUM SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(3,5,13,.8); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #e8002d, #1e41ff); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff4c67, #4466ff); }

/* SELECTION */
::selection { background: rgba(232,0,45,.28); color: #fff; }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .driver-card, .team-card, .mini-card, .back, .tab-btn { transition: none !important; animation: none !important; }
}