/* ================= ANIMATION BASE ================= */

:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Base reveal state */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.8s var(--ease-out);
    will-change: transform, opacity;
}

/* Active state (triggered via JS) */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================= Use for hero, sections, grids ================= */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s var(--ease-out);
}

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

.fade-in {
    opacity: 0;
    transition: 1s ease;
}

.fade-in.active {
    opacity: 1;
}

/* ================= CARD ANIMATIONS ================= */
.card {
    transition: transform 0.35s var(--ease-out),
        box-shadow 0.35s var(--ease-out);
    transform: translateY(0);
}

.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* ================= BUTTON ANIMATIONS ================= */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
}

.btn:active {
    transform: scale(0.96);
}

/* subtle shine effect */
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: 0.6s;
}

.btn:hover::after {
    left: 120%;
}

/* ================= STAGGERED ANIMATIONS ================= */
.stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s var(--ease-out);
}

.stagger.active>* {
    opacity: 1;
    transform: translateY(0);
}

/* delay children */
.stagger.active>*:nth-child(1) {
    transition-delay: 0.05s;
}

.stagger.active>*:nth-child(2) {
    transition-delay: 0.1s;
}

.stagger.active>*:nth-child(3) {
    transition-delay: 0.15s;
}

.stagger.active>*:nth-child(4) {
    transition-delay: 0.2s;
}

/* ================= Hero Text ================= */
.hero h1 {
    animation: heroFade 1s var(--ease-out) forwards;
}

.hero-tagline {
    opacity: 0;
    animation: heroFade 1s 0.2s var(--ease-out) forwards;
}

.hero-desc {
    opacity: 0;
    animation: heroFade 1s 0.4s var(--ease-out) forwards;
}

.hero-buttons {
    opacity: 0;
    animation: heroFade 1s 0.6s var(--ease-out) forwards;
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ================= FLOAT ANIMATION ================= */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

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

/* ================= MEDIA QUERY FOR REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.step-svg {
    transition: transform 0.3s ease;
}

.step-svg:hover {
    transform: scale(1.15);
}

.step-svg:hover .step-circle {
    filter: brightness(1.2);
}