.orb-intro-page {
  --intro-bg: #000000;
  min-height: 100vh;
  background: var(--intro-bg);
  transition: background 2.4s ease;
  overflow: hidden;
}

.orb-intro-page.is-brightening {
  --intro-bg: #2a2a2a;
}

.orb-intro-page.is-lit {
  --intro-bg: var(--background-2);
}

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--intro-bg);
  transition:
    background 2.4s ease,
    opacity 1.2s ease,
    visibility 1.2s ease;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.intro-stage.is-revealing {
  z-index: 0;
  background: transparent;
}

.intro-stage.is-complete {
  opacity: 0;
  visibility: hidden;
}

.intro-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.intro-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.intro-orb--spark {
  transform: rotate(var(--spark-rotate, -20deg));
  filter: blur(30px);
  opacity: 0;
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    ellipse 85% 45% at 28% 50%,
    #ffffff 0%,
    #d0d0d0 38%,
    transparent 72%
  );
}

.intro-orb--spark::after {
  content: "";
  position: absolute;
  inset: 10% -35% 10% 25%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 90% 40% at 0% 50%,
    #e8e8e8 0%,
    transparent 68%
  );
  filter: blur(10px);
  opacity: 0.65;
}

.intro-orb--spark.is-active {
  animation: intro-spark-flicker var(--flicker-duration, 0.65s) ease-in-out infinite;
  animation-delay: var(--flicker-delay, 0s);
}

.intro-orb--spark.is-fading {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.intro-orb--glow {
  filter: blur(80px);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-orb--glow.is-rising {
  opacity: var(--glow-opacity, 0.38);
  transform: scale(1);
}

.intro-orb--glow.is-wave-1.is-rising {
  opacity: var(--glow-opacity, 0.38);
}

.intro-orb--glow.is-wave-2.is-rising {
  opacity: calc(var(--glow-opacity, 0.38) * 1.04);
}

.intro-orb--glow.is-wave-3.is-rising {
  opacity: calc(var(--glow-opacity, 0.38) * 1.14);
  filter: blur(80px) saturate(1.08);
}

@keyframes intro-spark-flicker {
  0%,
  100% {
    opacity: 0;
    filter: blur(30px) brightness(1);
  }

  6% {
    opacity: var(--spark-peak, 0.82);
    filter: blur(28px) brightness(1.35);
  }

  12% {
    opacity: 0.06;
    filter: blur(32px) brightness(1);
  }

  18% {
    opacity: calc(var(--spark-peak, 0.82) * 0.75);
    filter: blur(30px) brightness(1.15) hue-rotate(-12deg);
  }

  26%,
  72% {
    opacity: 0;
    filter: blur(30px) brightness(1);
  }

  78% {
    opacity: calc(var(--spark-peak, 0.82) * 0.55);
    filter: blur(31px) brightness(1.2) hue-rotate(8deg);
  }

  86% {
    opacity: 0.04;
    filter: blur(30px) brightness(1);
  }
}

.intro-demo-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.intro-demo-content.is-visible {
  opacity: 1;
  visibility: visible;
}

.intro-demo-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 0 4rem;
}

.intro-demo-panel {
  width: min(36rem, 92vw);
  padding: 2rem;
  border: 1px solid var(--contour);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--background-1) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}

.intro-demo-panel h1 {
  margin-bottom: 0.75rem;
}

.intro-demo-panel p {
  color: var(--foreground-diminished);
  margin-bottom: 1.5rem;
}

.intro-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.intro-demo-note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--foreground-diminished);
}

.intro-demo-skip {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  padding: 0.55rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--contour) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-1) 55%, transparent);
  color: var(--foreground-diminished);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.intro-demo-skip:hover {
  color: var(--selected);
  border-color: var(--contour);
}

.intro-demo-skip.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro-orb--spark.is-active {
    animation: none;
    opacity: 0.25;
  }

  .intro-orb--glow {
    transition-duration: 0.01ms;
  }

  .intro-stage,
  .intro-demo-content,
  .orb-intro-page {
    transition-duration: 0.01ms;
  }
}