/* motion */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.8s;
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== motion layer ===== */
@view-transition {
  navigation: auto;
}
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transform: scaleX(0);
  transform-origin: left;
}
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.06em 0.12em;
  margin: 0 -0.06em -0.12em;
}
.split .w > span {
  display: inline-block;
  transform: translateY(110%) rotate(5deg);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 55ms),
    opacity 0.6s calc(var(--i) * 55ms),
    filter 0.8s calc(var(--i) * 55ms);
}
.split.split-on .w > span {
  transform: none;
  opacity: 1;
  filter: none;
}
.h1 em,
.h2 em {
  background: linear-gradient(100deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slide 9s linear infinite;
}
.dark .h2 em,
.cta-band em,
.hero-dark em {
  background-image: linear-gradient(100deg, #b9c2ff, #ff9ed6, #fff, #b9c2ff);
}
/* hero aurora */
.hero-center {
  position: relative;
  isolation: isolate;
}
.hero-center::before,
.hero-center::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-center::before {
  width: 620px;
  height: 620px;
  left: calc(50% - 560px);
  top: 240px;
  background: radial-gradient(circle, var(--accent-3), transparent 65%);
  animation: aur1 14s ease-in-out infinite;
}
.hero-center::after {
  width: 680px;
  height: 680px;
  right: calc(50% - 600px);
  top: 160px;
  background: radial-gradient(circle, var(--accent), transparent 65%);
  animation: aur2 17s ease-in-out infinite;
}
@keyframes aur1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(180px, -60px) scale(1.25);
  }
}
@keyframes aur2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1.1);
  }
  50% {
    transform: translate(-200px, 80px) scale(0.85);
  }
}
.float {
  filter: blur(0.6px);
  opacity: 0.9;
  transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-stage > .v-chat {
  transition: rotate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 40px 100px -30px rgba(236, 95, 176, 0.6),
    0 20px 70px -20px rgba(78, 89, 241, 0.65);
}
/* chat details */
.vc-msg.user.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 0.7s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.vc-think.on:not(.done) {
  background: linear-gradient(90deg, var(--ink-40) 30%, var(--ink) 50%, var(--ink-40) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slide 1.4s linear infinite reverse;
}
.vc-think.on:not(.done) .vc-av {
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
.js .vc-list li {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.js .vc-list.on li {
  opacity: 1;
  transform: none;
}
.vc-list.on li:nth-child(2) {
  transition-delay: 0.35s;
}
.vc-list.on li:nth-child(3) {
  transition-delay: 0.7s;
}
.vc-list.on li:nth-child(4) {
  transition-delay: 1.05s;
}
.vc-av {
  animation: spin 8s linear infinite;
}