/*
 * translate(-50%, -50%) here isn't part of the rotation - it's .radar-sweep's
 * own centering transform from style.css. Without repeating it in both
 * keyframes, the browser would matrix-interpolate between that static
 * translate and a plain rotate(), making the circle drift off-center as it
 * spins instead of rotating cleanly in place (same fix as hero-drift).
 */
@keyframes radar-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/*
 * translateY(-50%) here isn't part of the "drift" itself - it's the
 * vertical-centering transform from .hero__media img in style.css.
 * Animating "transform" replaces the static rule's value entirely rather
 * than adding to it, so it has to be repeated in every keyframe or the
 * photo would snap to top-aligned for as long as this animation runs.
 */
@keyframes hero-drift {
    0% { transform: translateY(-50%) scale(1.01) translateX(0); }
    100% { transform: translateY(-50%) scale(1.045) translateX(-.7%); }
}

@keyframes status-pulse {
    0%, 72%, 100% { opacity: .45; }
    76%, 92% { opacity: 1; }
}

.radar-sweep { animation: radar-rotate 9s linear infinite; }
.hero__media img { animation: hero-drift 18s ease-in-out alternate infinite; }
.secure-status span { animation: status-pulse 4.8s ease-in-out infinite; }

/*
 * Hero image + dossier rotation: the "hero-rotate" @keyframes and each
 * slide's animation-delay are generated per request by index.php - both
 * depend on how many slides are listed in assets/images/heroes/heroes.txt,
 * which can change any time a line is added or removed there. This rule
 * just turns the rotation on for a multi-slide hero; see
 * includes/functions.php's hero_slides(). The photo also keeps its usual
 * slow zoom/pan; the dossier text card just crossfades.
 */
.hero--rotating .hero__media img {
    animation: hero-drift 18s ease-in-out alternate infinite, hero-rotate var(--hero-cycle, 24s) ease-in-out infinite;
}
.hero--rotating .hero__dossier {
    animation: hero-rotate var(--hero-cycle, 24s) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
    .hero--rotating .hero__media img,
    .hero--rotating .hero__dossier { opacity: 0; }
    .hero--rotating .hero__media img:first-child,
    .hero--rotating .hero__dossier:first-child { opacity: 1; }
}