/* Shared motion language. Every animation pauses from the page motion control
   and falls back cleanly for reduced-motion users. */
@keyframes tm4-drift-grid { from { transform: perspective(700px) rotateX(60deg) translate3d(0,-10%,0); } to { transform: perspective(700px) rotateX(60deg) translate3d(-64px,calc(-10% + 64px),0); } }
@keyframes tm4-orbit { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-18px,0) scale(1.08); } }
@keyframes tm4-stream { 0% { transform: translate3d(-80px,-80px,0) rotate(35deg); opacity: 0; } 20%,70% { opacity: .75; } 100% { transform: translate3d(180px,180px,0) rotate(35deg); opacity: 0; } }
@keyframes tm4-route { 0% { left: 0; opacity: 0; } 12%,82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes tm4-pulse { 0%,100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes tm4-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tm4-glow { 0%,100% { box-shadow: 0 0 0 rgba(102,227,255,0); } 50% { box-shadow: 0 0 30px rgba(102,227,255,.18); } }
@keyframes tm4-scan { 0% { transform: translateY(-130%); opacity: 0; } 18%,75% { opacity: .8; } 100% { transform: translateY(420%); opacity: 0; } }
@keyframes tm4-bar { 0%,100% { transform: scaleY(.72); opacity: .55; } 50% { transform: scaleY(1); opacity: .95; } }
@keyframes tm4-line { 0% { background-position: 160% 50%; } 100% { background-position: -60% 50%; } }
@keyframes tm4-node { 0%,22%,100% { border-color: var(--color-line); } 32%,68% { border-color: rgba(102,227,255,.34); } }
@keyframes tm4-check { 0%,28% { opacity: .2; transform: scale(.7); } 42%,88% { opacity: 1; transform: scale(1); } 100% { opacity: .2; transform: scale(.7); } }

.hero-atmosphere::before { animation: tm4-drift-grid 18s linear infinite; }
.hero-orb--a { animation: tm4-orbit 10s ease-in-out infinite; }
.hero-orb--b { animation: tm4-orbit 12s ease-in-out -4s infinite reverse; }
.hero-streams span { animation: tm4-stream 8s linear infinite; }
.hero-streams span:nth-child(2) { animation-delay: -2.3s; }
.hero-streams span:nth-child(3) { animation-delay: -4.7s; }
.hero-streams span:nth-child(4) { animation-delay: -6.1s; }
.live-dot,.status-live::before,.account-card__top i { animation: tm4-pulse 2.4s ease-in-out infinite; }
.mini-node,.bundle-card,.visual-plan,.signal-card-large,.terminal-card,.compare-card { animation: tm4-node 7.5s ease-in-out infinite; }
.mini-node:nth-child(3),.visual-plan:nth-child(2),.compare-card:nth-child(2) { animation-delay: -2.3s; }
.mini-node:nth-child(5),.visual-plan:nth-child(3) { animation-delay: -4.7s; }
.mini-route i { animation: tm4-route 2.8s ease-in-out infinite; }
.bundle-pipeline::before,.browser-line { background-size: 220% 100%; animation: tm4-line 3.2s linear infinite; }
.trial-day.is-current,.ea-chip,.browser-cloud { animation: tm4-glow 3.2s ease-in-out infinite; }
.trial-day i,.ui-check { animation: tm4-check 4.2s ease-in-out infinite; }
.growth-bar,.calc-bars i { transform-origin: 50% 100%; animation: tm4-bar 3.6s ease-in-out infinite; }
.growth-bar:nth-child(2),.calc-bars i:nth-child(2){animation-delay:-.3s}.growth-bar:nth-child(3),.calc-bars i:nth-child(3){animation-delay:-.6s}.growth-bar:nth-child(4),.calc-bars i:nth-child(4){animation-delay:-.9s}.growth-bar:nth-child(5),.calc-bars i:nth-child(5){animation-delay:-1.2s}.growth-bar:nth-child(6),.calc-bars i:nth-child(6){animation-delay:-1.5s}.growth-bar:nth-child(7),.calc-bars i:nth-child(7){animation-delay:-1.8s}.growth-bar:nth-child(8),.calc-bars i:nth-child(8){animation-delay:-2.1s}
.device-card { animation: tm4-rise 5s ease-in-out infinite; }
.device-card:nth-child(3){animation-delay:-1.3s}.device-card:nth-child(4){animation-delay:-2.5s}.device-card:nth-child(5){animation-delay:-3.8s}
.article-sheet:nth-child(3),.legal-doc,.auth-mini-node { animation: tm4-rise 6s ease-in-out infinite; }
.account-spark { background-size: 220% 100%; animation: tm4-line 4s linear infinite; }

[data-motion-paused="true"] *,
[data-motion-paused="true"] *::before,
[data-motion-paused="true"] *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}