/* ============================================================
   GetDunk — Animations & Transitions
   ============================================================ */

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal-up {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-35px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── Gradient text shimmer ────────────────────────────────── */
@keyframes gradientShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--accent-primary),
        var(--accent-secondary),
        var(--accent-tertiary),
        var(--accent-secondary),
        var(--accent-primary)
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShimmer 6s ease infinite;
}

/* ── Pulse glow ───────────────────────────────────────────── */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
    50% { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px rgba(212, 227, 48, 0.15); }
}

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

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

.float {
    animation: float 4s ease-in-out infinite;
}

/* ── Spin slow ────────────────────────────────────────────── */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-slow {
    animation: spinSlow 20s linear infinite;
}

/* ── Counter animation ────────────────────────────────────── */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Marquee ──────────────────────────────────────────────── */
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    animation: marqueeScroll 30s linear infinite;
}

/* ── Magnetic button effect (handled by JS, CSS support) ── */
.magnetic-btn {
    transition: transform 0.3s var(--ease-spring);
}

/* ── Page transition ──────────────────────────────────────── */
@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    animation: pageIn 0.6s var(--ease-out-expo) forwards;
}

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes skeletonPulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.12; }
}

.skeleton {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* ── Toast notification slide ─────────────────────────────── */
@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}