@keyframes word-in {
  to {
    transform: translateY(0);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate3d(-2.5rem, 1.5rem, 0) rotate(3deg);
  }
}

@keyframes line-breathe {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.04);
  }
}

@keyframes scene-ring-enter {
  from {
    opacity: 0;
    scale: 0.84;
  }
}

@keyframes scene-line-enter {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}

@keyframes scene-ripple-enter {
  from {
    opacity: 0;
    scale: 0.7;
  }
}

@keyframes signal-line-enter {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.is-ready [data-reveal] {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.is-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.word-mask {
  display: block;
  overflow: clip;
}

.word-mask > span {
  display: block;
}

.is-ready .word-mask > span {
  transform: translateY(112%);
  animation: word-in 1.15s var(--ease-out) forwards;
  animation-delay: var(--word-delay, 0.15s);
}

.hero-orbit {
  animation: drift 14s ease-in-out infinite;
}

.hero-orbit::before {
  animation: line-breathe 8s ease-in-out infinite;
}

html.is-ready .scene-art--convergence .scene-ring {
  animation: scene-ring-enter 1.4s var(--ease-out) both;
}

html.is-ready .scene-art--convergence .scene-ring--two {
  animation-delay: 0.16s;
}

html.is-ready .scene-art--coordinates .scene-line {
  animation: scene-line-enter 1.2s var(--ease-out) both;
}

html.is-ready .scene-art--coordinates .scene-line--secondary {
  animation-delay: 0.18s;
}

html.is-ready .scene-art--signal .signal-line {
  animation: signal-line-enter 1.1s var(--ease-out) both;
}

html.is-ready .scene-art--signal .signal-line--two {
  animation-delay: 0.12s;
}

html.is-ready .scene-art--signal .signal-line--three {
  animation-delay: 0.24s;
}

html.is-ready .scene-art--signal .signal-line--four {
  animation-delay: 0.36s;
}

html.is-ready .scene-art--slit .slit-plane,
html.is-ready .scene-art--slit .slit-light,
html.is-ready .scene-art--slit .slit-cross {
  animation: signal-line-enter 1.2s var(--ease-out) both;
}

.ambient-light {
  position: fixed;
  z-index: -1;
  top: calc(var(--pointer-y) - 18rem);
  left: calc(var(--pointer-x) - 18rem);
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 189, 231, 0.09), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.has-fine-pointer .ambient-light {
  opacity: 1;
}

.cinematic-word {
  display: inline-block;
  transform:
    translateY(calc((1 - var(--story-progress, 0)) * 3rem))
    scale(calc(0.92 + (var(--story-progress, 0) * 0.08)));
  opacity: calc(0.25 + (var(--story-progress, 0) * 0.75));
  will-change: transform, opacity;
}

.scene-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(0, 189, 231, calc(var(--story-progress, 0) * 0.14)),
      transparent 38%
    );
}

.page-wipe {
  position: fixed;
  z-index: 300;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform 0.65s var(--ease-in-out);
}

body.is-leaving .page-wipe {
  transform: scaleY(1);
}