:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 900ms;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-out 280ms var(--motion-ease-soft) both;
}

::view-transition-new(root) {
  animation: page-in 620ms var(--motion-ease) both;
}

@keyframes page-out {
  to { opacity: 0; transform: scale(0.992); filter: blur(3px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); filter: blur(5px); }
}

.motion-ready body {
  transition: opacity 320ms ease, transform 420ms var(--motion-ease), filter 320ms ease;
}

.motion-ready body.is-leaving {
  opacity: 0;
  transform: scale(0.992);
  filter: blur(4px);
  pointer-events: none;
}

.motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 34px, 0) scale(0.985);
  transform-origin: center bottom;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    filter calc(var(--motion-duration) * 0.8) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
  will-change: opacity, filter, transform;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .motion-text {
  opacity: 1;
  filter: none;
  transform: none;
}

.motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.motion-word > span {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 105%, 0) rotate(1.5deg);
  transition:
    opacity 620ms var(--motion-ease),
    filter 680ms var(--motion-ease),
    transform 820ms var(--motion-ease);
  transition-delay: calc(var(--word-index, 0) * 52ms + 80ms);
  will-change: opacity, filter, transform;
}

.motion-text.is-visible .motion-word > span {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0);
}

.motion-ready .motion-load {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 22px, 0) scale(0.98);
  transition:
    opacity 900ms var(--motion-ease),
    filter 900ms var(--motion-ease),
    transform 1000ms var(--motion-ease);
  transition-delay: calc(var(--load-index, 0) * 110ms + 80ms);
}

.motion-ready .motion-load.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.gateway-image,
.network-orbit,
.code-window {
  translate: 0 var(--parallax-y, 0px);
  transition: translate 120ms linear;
}

.motion-ready .logo-item,
.motion-ready .model-row,
.motion-ready .pricing-line,
.motion-ready .flow-item,
.motion-ready .metric,
.motion-ready .key-row {
  transition-property: opacity, filter, transform, color, background, border-color;
}

.motion-ready dialog[open]::backdrop {
  animation: backdrop-in 300ms ease both;
}

.motion-ready dialog[open] .dialog-panel {
  animation: dialog-in 520ms var(--motion-ease) both;
}

@keyframes backdrop-in {
  from { opacity: 0; }
}

@keyframes dialog-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(28px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .motion-ready *,
  .motion-ready *::before,
  .motion-ready *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .motion-reveal,
  .motion-ready .motion-load,
  .motion-word > span {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .gateway-image,
  .network-orbit,
  .code-window {
    translate: none !important;
  }
}