/* ============================================================
   animations.css — WOW micro-animations for the platform
   ============================================================ */

/* ── Page fade-in ───────────────────────────────────────────── */
body {
    animation: pageFadeIn 0.5s ease both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Scroll-reveal base states ─────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s cubic-bezier(.22, .68, 0, 1.2),
        transform 0.65s cubic-bezier(.22, .68, 0, 1.2);
}

.reveal.reveal--left {
    transform: translateX(-40px);
}

.reveal.reveal--right {
    transform: translateX(40px);
}

.reveal.reveal--scale {
    transform: scale(0.88);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* stagger helpers */
.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.18s;
}

.reveal-delay-3 {
    transition-delay: 0.28s;
}

.reveal-delay-4 {
    transition-delay: 0.38s;
}

.reveal-delay-5 {
    transition-delay: 0.48s;
}

/* ── Floating background orbs ───────────────────────────────── */
.orb-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.07;
    animation: orbFloat linear infinite;
    will-change: transform;
}

.orb-1 {
    width: 520px;
    height: 520px;
    background: var(--color-red-500, #ef4444);
    top: -160px;
    left: -100px;
    animation-duration: 22s;
}

.orb-2 {
    width: 420px;
    height: 420px;
    background: var(--color-amber-400, #fbbf24);
    bottom: -120px;
    right: -80px;
    animation-duration: 28s;
    animation-direction: reverse;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--color-red-700, #b91c1c);
    top: 40%;
    left: 55%;
    animation-duration: 18s;
    animation-delay: -8s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(40px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 50px) rotate(240deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* ── Nav shrink on scroll ───────────────────────────────────── */
nav {
    transition: height 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

nav.nav-scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ── 3-D card tilt ──────────────────────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.tilt-card:hover {
    box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.22);
}

/* ── Ripple button effect ───────────────────────────────────── */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-btn .ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleAnim 0.55s linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Counter number ─────────────────────────────────────────── */
.count-num {
    display: inline-block;
    transition: transform 0.1s ease;
}

/* ── Shimmer skeleton placeholder ──────────────────────────────  */
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

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

/* ── Gradient text pulse (hero title) ──────────────────────── */
.gradient-pulse {
    background-size: 200%;
    animation: gradientShift 4s ease infinite alternate;
}

@keyframes gradientShift {
    from {
        background-position: 0%;
    }

    to {
        background-position: 100%;
    }
}

/* ── Floating badge bounce ──────────────────────────────────── */
.badge-float {
    animation: badgeBounce 3s ease-in-out infinite;
}

@keyframes badgeBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ── Icon spin on hover ─────────────────────────────────────── */
.icon-spin:hover {
    animation: iconSpin 0.5s ease;
}

@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Success / error toast slide-in ────────────────────────── */
.toast-enter {
    animation: toastIn 0.4s cubic-bezier(.22, .68, 0, 1.2) both;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── VIP ribbon shimmer ─────────────────────────────────────── */
@keyframes vipShimmer {
    0% {
        background-position: -200%;
    }

    100% {
        background-position: 200%;
    }
}

.vip-ribbon {
    background: linear-gradient(90deg, #fcd34d, #fbbf24, #f59e0b, #fcd34d);
    background-size: 200%;
    animation: vipShimmer 2s linear infinite;
}