/* =====================================================
   TorqueVault — Animations & Keyframes (High-Octane Motion)
   ===================================================== */

/* ——— Fade In ——— */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ——— Slide Up ——— */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ——— Slide In Left ——— */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ——— Skeleton Shimmer ——— */
@keyframes shimmer {
    from {
        background-position: -600px 0;
    }
    to {
        background-position: 600px 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg,
            var(--bg-card) 0%,
            var(--bg-card-2) 50%,
            var(--bg-card) 100%);
    background-size: 600px 100%;
    animation: shimmer 1.5s linear infinite;
}

/* ——— Scroll Bounce ——— */
@keyframes scroll-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

/* ——— Shimmer Line ——— */
@keyframes shimmer-line {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* ——— Float ——— */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ——— Crimson Taillight Glow Pulse ——— */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 16px rgba(230, 25, 50, 0.25);
    }
    50% {
        box-shadow: 0 0 40px rgba(230, 25, 50, 0.6), 0 0 70px rgba(117, 2, 15, 0.4);
    }
}

/* ——— Tachometer Redline Alarm Flash ——— */
@keyframes redline-flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 16px #e61932;
    }
    50% {
        opacity: 0.3;
        transform: scale(1.08);
        text-shadow: 0 0 30px #ff2642;
    }
}

/* ——— Drag Strip Tree Light Blink ——— */
@keyframes tree-pulse {
    0%, 100% {
        box-shadow: 0 0 12px currentColor;
    }
    50% {
        box-shadow: 0 0 28px currentColor, 0 0 45px currentColor;
    }
}

/* ——— Hotspot Beacon Ping ——— */
@keyframes beacon-ping {
    0% {
        transform: scale(0.85);
        opacity: 1;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ——— Button Active Ripple ——— */
.btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.25), transparent 65%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.btn--primary:active::before {
    opacity: 1;
    transform: scale(2.5);
    transition: none;
}

/* ——— Hero entry animations ——— */
.hero-anim-1 {
    animation: slideInLeft 0.8s var(--ease) both;
}

.hero-anim-2 {
    animation: slideUp 0.8s 0.12s var(--ease) both;
}

.hero-anim-3 {
    animation: slideUp 0.8s 0.25s var(--ease) both;
}

.hero-anim-4 {
    animation: slideUp 0.8s 0.38s var(--ease) both;
}

/* ——— Card stagger ——— */
.car-card:nth-child(1) { animation: fadeIn 0.5s 0.04s var(--ease) both; }
.car-card:nth-child(2) { animation: fadeIn 0.5s 0.08s var(--ease) both; }
.car-card:nth-child(3) { animation: fadeIn 0.5s 0.12s var(--ease) both; }
.car-card:nth-child(4) { animation: fadeIn 0.5s 0.16s var(--ease) both; }
.car-card:nth-child(5) { animation: fadeIn 0.5s 0.20s var(--ease) both; }
.car-card:nth-child(6) { animation: fadeIn 0.5s 0.24s var(--ease) both; }

/* ——— Neon border on card hover ——— */
.car-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #e61932, #75020f, #2b0307, #e61932);
    background-size: 250%;
    opacity: 0;
    transition: opacity var(--normal) var(--ease);
    z-index: 0;
    animation: shimmer-line 5s linear infinite;
}

.car-card:hover::before {
    opacity: 0.85;
}

/* ——— Loading dots ——— */
@keyframes loading-dot {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.loading-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: var(--space-xl);
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--accent-glow);
}

.loading-dots span:nth-child(1) { animation: loading-dot 1.2s ease 0s infinite; }
.loading-dots span:nth-child(2) { animation: loading-dot 1.2s ease 0.2s infinite; }
.loading-dots span:nth-child(3) { animation: loading-dot 1.2s ease 0.4s infinite; }

/* ——— Compare winner highlight pulse ——— */
.compare-table .winner {
    animation: glow-pulse 2.2s ease-in-out infinite;
}