/* Animation tokens for PacerMind journey interactions */

.animate {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 680ms ease, transform 680ms ease;
}

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

.delay-1 {
    transition-delay: 120ms;
}

.delay-2 {
    transition-delay: 220ms;
}

.delay-3 {
    transition-delay: 320ms;
}

.delay-4 {
    transition-delay: 420ms;
}

@keyframes drawRoute {
    0% {
        stroke-dashoffset: var(--route-length);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    34% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    62% {
        stroke-dashoffset: 0;
        opacity: 0.9;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.26;
    }
}

@keyframes routeGlow {
    0%,
    100% {
        opacity: 0;
    }
    14%,
    48% {
        opacity: 1;
    }
    72% {
        opacity: 0.24;
    }
}

@keyframes noteFloat {
    0%,
    12%,
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
    18%,
    36% {
        opacity: 1;
        transform: translateY(0);
    }
    46% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

    .animate {
        opacity: 1;
        transform: none;
    }

    .route-line.is-animated,
    .route-shadow.is-animated {
        animation: none !important;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: 0.82;
    }

    .memory-bubble {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}