/* ==========================================================================
   Animations & Micro-interactions — Suridata Landing Page
   ========================================================================== */

/* ──────────────────────────────────────
   SCROLL-TRIGGERED ANIMATIONS
   ────────────────────────────────────── */

/* Base state — hidden until observed */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 800ms var(--ease-expo),
        transform 800ms var(--ease-expo);
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade variants */
.animate-fade-in {
    opacity: 0;
    transition: opacity 800ms var(--ease-expo);
}

.animate-fade-in.is-visible {
    opacity: 1;
}

/* Slide from left */
.animate-slide-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 800ms var(--ease-expo),
        transform 800ms var(--ease-expo);
}

.animate-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.animate-slide-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 800ms var(--ease-expo),
        transform 800ms var(--ease-expo);
}

.animate-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 800ms var(--ease-expo),
        transform 800ms var(--ease-expo);
}

.animate-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ──────────────────────────────────────
   STAGGER DELAYS
   ────────────────────────────────────── */
.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

.stagger-4 {
    transition-delay: 400ms;
}

.stagger-5 {
    transition-delay: 500ms;
}

.stagger-6 {
    transition-delay: 600ms;
}

.stagger-7 {
    transition-delay: 700ms;
}

.stagger-8 {
    transition-delay: 800ms;
}

.stagger-9 {
    transition-delay: 900ms;
}

/* ──────────────────────────────────────
   KEYFRAME ANIMATIONS
   ────────────────────────────────────── */

/* Hero entry */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.hero-animate {
    animation: heroFadeIn 0.8s var(--ease-out) forwards;
    opacity: 0;
}

.hero-animate--delay-1 {
    animation-delay: 0.1s;
}

.hero-animate--delay-2 {
    animation-delay: 0.25s;
}

.hero-animate--delay-3 {
    animation-delay: 0.4s;
}

.hero-animate--delay-4 {
    animation-delay: 0.55s;
}

.hero-animate--delay-5 {
    animation-delay: 0.7s;
}

/* Pulsing dot for badges */
@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.7);
    }
}

/* Float animation for decorative elements */
@keyframes float {

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

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

/* Gradient shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

    100% {
        background-position: 0% 50%;
    }
}

/* Shimmer for loading states */
@keyframes shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* Counter number flip */
@keyframes numberReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Line expand for section separators */
@keyframes lineExpand {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.line-animate {
    transform-origin: left;
    animation: lineExpand 1s var(--ease-out) forwards;
}

/* ──────────────────────────────────────
   HOVER MICRO-INTERACTIONS
   ────────────────────────────────────── */

/* Link underline effect */
.link-hover {
    position: relative;
    display: inline-block;
}

.link-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-normal) var(--ease-out);
}

.link-hover:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ──────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

    .hero-animate {
        opacity: 1;
        animation: none;
    }
}