/* ═══════════════════════════════════════════════════════════
   Scroll-triggered Animations
   ═══════════════════════════════════════════════════════════ */

/* ── Initial hidden state ── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

/* ── Revealed state ── */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Staggered delays for cards ── */
.animate-on-scroll[data-delay="100"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="200"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="300"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="400"] { transition-delay: 400ms; }
.animate-on-scroll[data-delay="500"] { transition-delay: 500ms; }

/* ── Floating particles ── */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

/* ── Glow effect on card hover (mouse tracking) ── */
.glow-track {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.service-card:hover .glow-track,
.project-card:hover .glow-track {
    opacity: 1;
}

/* ── Smooth section reveal line ── */
@keyframes reveal-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero__gradient-text {
        animation: none;
    }

    .badge__dot {
        animation: none;
    }

    .terminal__cursor {
        animation: none;
    }

    .particle {
        display: none;
    }

    .project-card__glow {
        animation: none;
    }

    .scroll-dot {
        animation: none;
    }

    .hero__scroll-hint {
        animation: none;
    }
}