/* All animation lives here. Everything is switched off under prefers-reduced-motion. */

@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }
@keyframes shine { to { background-position: -200% 0; } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drift-1 { to { transform: translate(25%, 20%) scale(1.2); } }
@keyframes drift-2 { to { transform: translate(-30%, 25%) scale(.85); } }
@keyframes drift-3 { to { transform: translate(20%, -30%) scale(1.15); } }
@keyframes cta-shift { 50% { background-position: 100% 100%; } }
@keyframes cta-wave { 50% { transform: translateX(-50%) translateY(-10px) scaleX(1.08); } }

/* hero entrance, line by line */
.h1 > span { animation: rise 1s var(--ease-out) backwards; }
.h1 > span + span { animation-delay: .14s; }
.hero .sub { animation: rise 1s .28s var(--ease-out) backwards; }
.hero .ctas { animation: rise 1s .4s var(--ease-out) backwards; }
.hero .values { animation: rise 1s .52s var(--ease-out) backwards; }
.glass { animation: rise 1.2s .6s var(--ease-out) backwards; }
.shine { animation: rise 1s .14s var(--ease-out) backwards, shine 6s linear infinite; }

.aurora i:nth-child(1) { animation: drift-1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { animation: drift-2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { animation: drift-3 26s ease-in-out infinite alternate; }

.ctaband { animation: cta-shift 12s ease-in-out infinite; }
.ctaband::after { animation: cta-wave 6s ease-in-out infinite; }

/* pointer tilt (values set by ui.js) */
[data-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }

/* scroll reveal: content only hides once JS has confirmed motion is allowed (.motion on <html>) */
.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion .feat[data-reveal] { transform: none; }
.motion .feat[data-reveal] .ft-art { opacity: 0; transform: translateX(60px) rotate(2deg) scale(.96); transition: opacity 1s, transform 1.1s var(--ease-out); }
.motion .feat[data-reveal]:nth-child(2) .ft-art { transform: translateX(-60px) rotate(-2deg) scale(.96); }
.motion .feat[data-reveal].in .ft-art { opacity: 1; transform: none; }
.motion .feat[data-reveal] .points li { opacity: 0; transform: translateX(-14px); transition: opacity .6s, transform .6s; }
.motion .feat[data-reveal].in .points li { opacity: 1; transform: none; }
.motion .feat[data-reveal].in .points li:nth-child(2) { transition-delay: .12s; }
.motion .feat[data-reveal].in .points li:nth-child(3) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .marquee .track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee .track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask: none; mask: none; }
  .progress { display: none; }
}

@media print {
  .aurora, .progress, .glass .float-chip { display: none; }
  .motion [data-reveal], .motion .feat[data-reveal] .ft-art, .motion .feat[data-reveal] .points li { opacity: 1; transform: none; }
}