@keyframes intro-stage-lifecycle {
  0% { opacity: 0; }
  5%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes intro-glow-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes intro-anniversary-pulse {
  0%, 12% { opacity: 0; transform: translateY(14px); }
  24%, 68% { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes intro-current-draw {
  0% { opacity: 0; transform: translateY(18%) scaleY(0); }
  28%, 72% { opacity: 0.52; }
  82% { transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(-18%) scaleY(1); }
}

@keyframes intro-skip-in {
  to { opacity: 1; }
}

@keyframes intro-copy-lifecycle {
  0% { opacity: 0; transform: translate(-50%, 14px); }
  10%, 34% { opacity: 1; transform: translate(-50%, 0); }
  46%, 100% { opacity: 0; transform: translate(-50%, -10px); }
}

@keyframes intro-book-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, 42vh) scale(0.9) rotateX(9deg);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -30%) scale(0.96) rotateX(4deg);
    animation-timing-function: cubic-bezier(0.22, 0.8, 0.26, 1);
  }
  32% {
    transform: translate(-50%, -50%) scale(1) rotateX(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  48% {
    transform: translate(-24%, -50%) scale(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  64%, 100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}

@keyframes intro-book-warp {
  0%, 76% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.22, 0.7, 0.22, 1);
  }
  84% {
    opacity: 0.94;
    transform: translate3d(0, -1.5%, 0) scale(1.03);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  92% { opacity: 0.24; transform: translate3d(0, -6%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate3d(0, -9%, 0) scale(1.15); }
}

@keyframes intro-cover-open {
  0%, 36% {
    transform: rotateY(0deg);
    animation-timing-function: cubic-bezier(0.18, 0.86, 0.25, 1);
  }
  44% {
    transform: rotateY(-10deg);
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.18, 1);
  }
  66%, 100% { transform: rotateY(-176deg); }
}

@keyframes intro-cover-shine {
  0%, 20% { transform: translateX(-120%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes intro-status-lifecycle {
  0%, 10% { opacity: 0; }
  18%, 52% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

.intro-stage__reveal {
  position: absolute;
  z-index: 18;
  inset: -6vmax;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 58%, #ffe6a3 0 1.5%, #bb1028 13%, #850414 50%, #65020d 76%);
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
  animation: intro-warp-arrival var(--intro-duration) linear both;
}

.intro-stage__reveal::before {
  position: absolute;
  inset: 0;
  content: "";
  will-change: transform, opacity;
  background: repeating-conic-gradient(
    from -5deg at 50% 58%,
    transparent 0deg 8deg,
    rgba(255, 226, 143, 0.28) 8.4deg 9deg,
    transparent 9.4deg 17deg,
    rgba(255, 255, 255, 0.13) 17.4deg 18deg
  );
  opacity: 0;
  transform: scale(0.82) rotate(-2deg);
  animation: intro-warp-streaks var(--intro-duration) linear both;
}

@keyframes intro-warp-arrival {
  0%, 72% {
    opacity: 0;
    transform: scale(0.94);
    animation-timing-function: cubic-bezier(0.2, 0.72, 0.2, 1);
  }
  80% {
    opacity: 0.22;
    transform: scale(0.96);
    animation-timing-function: cubic-bezier(0.2, 0.72, 0.18, 1);
  }
  88% { opacity: 0.92; transform: scale(1.01); }
  96%, 100% { opacity: 1; transform: scale(1.06); }
}

@keyframes intro-warp-streaks {
  0%, 72% {
    opacity: 0;
    transform: scale(0.82) rotate(-2deg);
    animation-timing-function: cubic-bezier(0.2, 0.72, 0.18, 1);
  }
  80% {
    opacity: 0.18;
    transform: scale(0.9) rotate(-1deg);
    animation-timing-function: cubic-bezier(0.18, 0.74, 0.16, 1);
  }
  90% { opacity: 0.78; transform: scale(1.07) rotate(0deg); }
  96% { opacity: 0.28; transform: scale(1.18) rotate(0.8deg); }
  100% { opacity: 0; transform: scale(1.24) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-ready .intro-stage {
    animation-duration: 620ms;
  }

  .intro-stage__grain,
  .intro-stage__currents i,
  .intro-stage__skip,
  .intro-stage__copy,
  .intro-book-stage,
  .intro-book,
  .intro-book__cover,
  .intro-book__cover-front::after,
  .intro-stage__status,
  .intro-stage__reveal,
  .intro-stage__reveal::before,
  .intro-stage__glow,
  .intro-stage__glow::after {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
  }
}