/* Motion: scroll reveals, keyframes, reduced-motion fallbacks.
   Elements are only hidden when JS is running (html.js), so content never disappears without JS. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.js [data-reveal="zoom"] { transform: scale(0.96); }
.js [data-reveal="rise"] { transform: translateY(80px); transition-duration: 1200ms; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Cards with their own hover transform: keep the hover working after reveal */
.js .feature-card.is-visible, .js .plan-card.is-visible, .js .team-card.is-visible, .js .audience-card.is-visible, .js .ops-card.is-visible { transition-property: opacity, transform, box-shadow, border-color; transition-duration: var(--dur-reveal), var(--dur), var(--dur), var(--dur); transition-delay: calc(var(--d, 0) * var(--stagger)), 0s, 0s, 0s; }

/* Hero headline: word by word */
.js .hero-title .word { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(2deg); filter: blur(6px); animation: word-in 900ms var(--ease-out) forwards; animation-delay: calc(150ms + var(--w, 0) * 70ms); }

@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes drift-1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-100px, 120px) scale(0.9); } }
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-12px); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes tab-progress { to { transform: scaleX(1); } }
@keyframes ring { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.55; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.7) rotate(-10deg); } }
/* header (same motion as support.surfagest.com) */
@keyframes hx-in { from { opacity: 0; } }
@keyframes hx-flow { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes hx-sweep { from { left: -42%; } to { left: 132%; } }
@keyframes hx-mountain { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@keyframes hx-bar { from { transform: translateX(-100px) skewX(-24deg); } to { transform: translateX(1120px) skewX(-24deg); } }
@keyframes hx-logo-glow {
  0%, 100% { box-shadow: 0 10px 24px -4px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 0 0 rgb(26 130 219 / 0); }
  50% { box-shadow: 0 10px 24px -4px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.12), 0 0 20px 4px rgb(255 255 255 / 0.24); }
}
@keyframes cta-halo {
  0% { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35), 0 0 0 0 rgb(255 255 255 / 0.55); }
  70%, 100% { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35), 0 0 0 10px rgb(255 255 255 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js .hero-title .word { opacity: 1; transform: none; filter: none; }
  .shot { transform: none; }
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee .marquee-track { flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; padding: 0 var(--gutter); }
  .marquee-track[aria-hidden="true"] { display: none; }
  .site-header, .header-fx::before, .hx-mountain, .hx-bar, .site-header .brand-mark,
  .site-footer, .footer-fx::before, .footer-orb, .footer-brand .brand-mark,
  .shot-devices, .shot-devices::after, .shot-glow, .shot-orbit, .shot-floor,
  .ops-aurora, .ops-card::after, .mh-blob, .mh-ring, .mh-core, .mh-chip, .mh-figure img, .mh-jump .icon,
  .mx-panel, .mx-panel > *, .mx-watermark, .ops-icon .icon, .ops-more p { animation: none !important; }
  .js .ops-card[data-reveal] .ops-points li { opacity: 1; transform: none; }
}