/** * Anime Phoenix — Animations & Motion System * GPU-Accelerated, Lightweight, Respects prefers-reduced-motion * * `.reveal-on-scroll` is defined here and ONLY here. The activation class is * `.is-revealed` everywhere (JS and CSS). It was previously declared in both * this file and sections.css with two different activation names, which only * worked because both rules happened to be present. */ @keyframes core-breathe { 0% { transform: scale(0.96); filter: drop-shadow(0 0 25px rgba(182, 9, 45, 0.5)); opacity: 0.8; } 100% { transform: scale(1.04); filter: drop-shadow(0 0 45px rgba(211, 18, 59, 0.85)); opacity: 1; } } @keyframes emblem-float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } 100% { transform: translateY(4px) rotate(-1deg); } } @keyframes pulse-ring { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } @keyframes ambient-drift { 0% { transform: translate(0, 0) scale(1); opacity: 0.25; } 50% { transform: translate(25px, -18px) scale(1.12); opacity: 0.45; } 100% { transform: translate(-15px, 12px) scale(0.96); opacity: 0.25; } } @keyframes shimmer-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes phoenix-mode-ignite { 0% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.6) saturate(1.8) drop-shadow(0 0 50px #ffd600); } 100% { filter: brightness(1) saturate(1); } } .anim-ignite { animation: phoenix-mode-ignite 1.2s ease-out; } /* ========================================================================== Scroll Reveal Opacity is applied by JS (`.js-reveal` on ), never by default. If scripting is unavailable the content simply renders — no invisible sections. ========================================================================== */ .js-reveal .reveal-on-scroll { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-smooth), transform 600ms var(--ease-smooth); } .js-reveal .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); } /* Timeline milestone marker, lit as its entry scrolls in. */ .timeline-item .timeline-marker { transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .timeline-item.is-revealed .timeline-marker { border-color: var(--color-primary-text); box-shadow: 0 0 25px rgba(211, 18, 59, 0.55); } /* Reduced motion: reveal instantly, no transforms, no looping ambience. */ @media (prefers-reduced-motion: reduce) { .js-reveal .reveal-on-scroll, .js-reveal .reveal-on-scroll.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-core-img, .ascension-core-mini, .status-dot::after, .hero-core-wrapper::before, .ambient-bg-orb, .anim-ignite { animation: none !important; transition: none !important; transform: none !important; } }