@charset "UTF-8";

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes heroPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.3;
    }
}

@keyframes dataFlow {
    0% {
        transform: translateY(-300px) rotate(var(--rotation));
        opacity: 0;
    }
    50% { opacity: 0.5; }
    100% {
        transform: translateY(300px) rotate(var(--rotation));
        opacity: 0;
    }
}

@keyframes particle {
    0% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(calc(var(--x) * 1.5), calc(var(--y) * 1.5)) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(calc(var(--x) * 2), calc(var(--y) * 2)) scale(0);
        opacity: 0;
    }
}

@keyframes heroScrollLine {
    0%   { transform: translateY(-100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .code-window,
    .data-flow__particle,
    .hero::after,
    .hero__content,
    .hero__visual,
    .hero__scroll-hint-arrow::after {
        animation: none !important;
    }
}