:root {
  --motion-fast: 160ms;
  --motion-base: 320ms;
  --motion-slow: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 18px;
  --reveal-stagger: 70ms;
}

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger));
  will-change: opacity, transform;
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

html.js [data-reveal] .feature-card__icon svg {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--motion-base) var(--ease-out) 90ms,
    transform var(--motion-base) var(--ease-out) 90ms;
}

html.js [data-reveal].is-revealed .feature-card__icon svg {
  opacity: 1;
  transform: none;
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(1.5%, 1%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
}

.aurora {
  position: absolute;
  inset: -6rem -3rem auto -3rem;
  height: 36rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 60% at 50% 15%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 70%);
  animation: aurora-drift 18s var(--ease-inout) infinite;
}

.diorama {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--surface);
  background-image: var(--sheen-soft);
  box-shadow: var(--shadow-lg);
}

.diorama__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--surface-2) 60%, transparent);
}

.diorama__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--text-subtle) 45%, transparent);
}

.diorama__body {
  padding: 1rem;
}

.diorama__num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

[data-wordswap] {
  display: inline-block;
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

[data-wordswap].is-swapping {
  opacity: 0;
  transform: translateY(-0.25em);
}

.diorama__anim {
  animation-play-state: paused;
}

html.js [data-reveal].is-revealed .diorama__anim {
  animation-play-state: running;
}

html.js [data-dio-story].is-live .dio-side,
html.js [data-dio-story].is-live .dio-head,
html.js [data-dio-story].is-live .dio-stat {
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

html.js [data-dio-story].is-live .dio-stat:nth-child(2) {
  transition-delay: 90ms;
}

html.js [data-dio-story][data-beat="0"] .dio-side {
  opacity: 0;
  transform: translateX(-10px);
  transition: none;
}

html.js [data-dio-story][data-beat="0"] .dio-head {
  opacity: 0;
  transform: translateY(-8px);
  transition: none;
}

html.js [data-dio-story][data-beat="0"] .dio-stat {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}

html.js [data-dio-story].is-live .dio-toast {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

html.js [data-dio-story][data-beat="3"] .dio-toast {
  opacity: 1;
  transform: none;
}

html.js [data-dio-story].is-live .dio-store__head {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

html.js [data-dio-story].is-live:not([data-beat="0"]) .dio-store__head {
  opacity: 1;
  transform: none;
}

html.js [data-dio-story][data-beat="0"] .dio-store__head {
  transition: none;
}

html.js [data-dio-story].is-live .dio-product {
  opacity: 0;
  transform: translateY(-12px) scale(0.97);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

html.js [data-dio-story].is-live .dio-product:nth-child(2) {
  transition-delay: 130ms;
}

html.js [data-dio-story].is-live .dio-product:nth-child(3) {
  transition-delay: 260ms;
}

html.js [data-dio-story].is-live[data-beat="2"] .dio-product,
html.js [data-dio-story].is-live[data-beat="3"] .dio-product {
  opacity: 1;
  transform: none;
}

html.js [data-dio-story][data-beat="0"] .dio-product {
  transition: none;
}

html.js [data-dio-story].is-live .dio-cart__count {
  opacity: 0;
}

html.js [data-dio-story].is-live[data-beat="3"] .dio-cart__count {
  opacity: 1;
  animation: dio-badge-pop 480ms var(--ease-out);
}

@keyframes dio-badge-pop {
  0% {
    transform: scale(0.4);
  }
  55% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

html.js .steps::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-inout) 250ms;
}

html.js .steps.is-revealed::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal] .feature-card__icon svg,
  html.js [data-reveal].is-revealed .diorama__anim,
  html.js [data-dio-story] .dio-side,
  html.js [data-dio-story] .dio-head,
  html.js [data-dio-story] .dio-stat,
  html.js [data-dio-story] .dio-toast,
  html.js [data-dio-story] .dio-store__head,
  html.js [data-dio-story] .dio-product,
  html.js [data-dio-story] .dio-cart__count,
  html.js .steps::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .aurora {
    animation: none !important;
  }
}