/* styles/animations.css */

/* Base state for elements before they scroll into view */
.reveal-target {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}

/* Active state when elements are in view */
.reveal-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grids/lists */
.delay-1 { transition-delay: 80ms; }
.delay-2 { transition-delay: 160ms; }
.delay-3 { transition-delay: 240ms; }
.delay-4 { transition-delay: 320ms; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal-target {
        transform: none;
        transition: opacity var(--transition-slow); /* Keep the fade, drop the movement */
    }
}
/* --- Mechanism Diagram Premium Animations --- */

/* Flowing lines */
.animated-flow {
    animation: flow-forward 12s linear infinite;
}

.animated-flow-slow {
    animation: flow-forward 16s linear infinite;
}

@keyframes flow-forward {
    to { stroke-dashoffset: -100; }
}

/* Pulsing Signal Node */
.signal-pulse {
    transform-origin: 0px 0px; /* Pakotetaan keskipisteeksi itse ympyrän keskusta */
    animation: gentle-pulse 4s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(0.95); opacity: 0.6; }
}

/* Rotating Reflection Node */
.reflection-spin {
    transform-origin: 0px 0px; /* Pakotetaan keskipisteeksi itse ympyrän keskusta */
    animation: slow-spin 20s linear infinite;
}

@keyframes slow-spin {
    to { transform: rotate(360deg); }
}

/* Hover to pause (for easy inspection of "How it works" flow) */
.mechanism-diagram:hover .animated-flow,
.mechanism-diagram:hover .animated-flow-slow,
.mechanism-diagram:hover .signal-pulse,
.mechanism-diagram:hover .reflection-spin {
    animation-play-state: paused;
}

/* Pause animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animated-flow, .animated-flow-slow, .signal-pulse, .reflection-spin {
        animation: none;
    }
}