/* animations.css — scroll reveals, keyframes, reduced-motion guard. */

/* Scroll-reveal: elements start hidden + offset, then ease in when observed. */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
[data-reveal='left'] { transform: translateX(-60px); }
[data-reveal='right'] { transform: translateX(60px); }
[data-reveal='up'] { transform: translateY(40px); }

[data-reveal].revealed { opacity: 1; transform: none; }

/* Stagger child info-cards as the group reveals. */
.info-cards.revealed .info-card { animation: pop-in 0.6s ease-out backwards; }
.info-cards.revealed .info-card:nth-child(1) { animation-delay: 0.05s; }
.info-cards.revealed .info-card:nth-child(2) { animation-delay: 0.18s; }
.info-cards.revealed .info-card:nth-child(3) { animation-delay: 0.31s; }

/* Scramble: brief accent tint while characters are still resolving. */
[data-scramble].scrambling .scramble-char { color: var(--accent); opacity: 0.7; }

@keyframes pop-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* Respect reduced-motion: show everything immediately, kill non-essential motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .scroll-cue { animation: none; }
}