/* =========================================================================
   IDUX motion — keyframes, reveal states, kinetic type, view transitions,
   reduced-motion fallback.
   ========================================================================= */

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-angle { to { --angle: 360deg; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(0.82) rotate(18deg); opacity: 0.7; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes draw-line { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------- scroll reveal ---------------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------------- kinetic headline ---------------- */
.split .w { display: inline-block; opacity: 0; transform: translateY(0.35em) rotate(2deg); filter: blur(12px); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 120ms); }
.split.in .w { opacity: 1; transform: none; filter: none; }
.split em .w { padding-right: 0.04em; }

/* ---------------- AI answer stream ---------------- */
.tok { animation: fade-in 0.35s var(--ease-out) both; }
.cite.tok { animation: pop-in 0.35s var(--ease-spring) both; }
.caret::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--accent); animation: blink 1s steps(1) infinite; }

/* ---------------- marquee ---------------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------------- view transitions (cross-document) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.35s var(--ease-out) both vt-out; }
  ::view-transition-new(root) { animation: 0.55s var(--ease-out) both vt-in; }
  ::view-transition-group(search-box) { animation-duration: 0.6s; animation-timing-function: var(--ease-out); }
  ::view-transition-group(site-nav), ::view-transition-group(logo) { animation-duration: 0.45s; }
  .theme-swap::view-transition-old(root), .theme-swap::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  .theme-swap::view-transition-new(root) { animation: theme-wipe 0.7s var(--ease-out); }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes theme-wipe { from { clip-path: circle(0% at 92% 4%); } to { clip-path: circle(150% at 92% 4%); } }

/* ---------------- scroll-linked hero (where supported) ---------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-fade { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes hero-out { to { opacity: 0.15; transform: translateY(-60px) scale(0.97); filter: blur(4px); } }
  }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .split .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aurora i { animation: none !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
}