/* ═══════════════════════════════════════════════════════════════════
   O'Swiss — Animations V2
═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────────── */

@keyframes heroSlideIn {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroImgIn {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.7); }
}

@keyframes badgeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes ripple {
    to { transform: scale(3); opacity: 0; }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page loader */
@keyframes loaderPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}
@keyframes loaderFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; pointer-events: none; }
}

/* ── Page loader ────────────────────────────────────────────────── */
.page-loader {
    position: fixed;
    inset: 0;
    background: #050505;
    display: grid;
    place-items: center;
    z-index: 9999;
    animation: loaderFadeOut 0.5s ease 0.8s forwards;
}
.page-loader__logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    animation: loaderPulse 1s ease infinite;
}
.page-loader__logo span { color: var(--accent-orange); }

/* ── Ripple effect ──────────────────────────────────────────────── */
.btn-v2 { overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    width: 80px; height: 80px;
    margin-top: -40px; margin-left: -40px;
    animation: ripple 0.55s linear;
    pointer-events: none;
}

/* ── 3D card tilt ───────────────────────────────────────────────── */
.sp-v2__card { will-change: transform; }

/* ── Magnetic hover ─────────────────────────────────────────────── */
.btn-v2 { position: relative; }

/* ── Cursor glow ────────────────────────────────────────────────── */
.cursor-glow {
    pointer-events: none;
    position: fixed;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 9998;
    transition: opacity 0.4s;
}
@media (hover: none) { .cursor-glow { display: none; } }

/* ── Skeleton loading shimmer ───────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}