.pandora-intro {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pandora-intro[data-exiting="true"] {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pandora-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in oklch, var(--fg) 2.5%, transparent) 0%,
      transparent 56%
    ),
    var(--bg);
  opacity: 0;
  animation: intro-atmosphere 2200ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.pandora-intro::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background-image: radial-gradient(color-mix(in oklch, var(--fg) 8%, transparent) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
  opacity: 0;
  transform: rotate(-8deg) translate3d(0, 0, 0);
  animation: intro-grain 5200ms cubic-bezier(0.22, 1, 0.36, 1) 240ms forwards;
  pointer-events: none;
}

.pandora-intro__stage {
  position: relative;
  width: min(92vw, calc(82svh * 3.105121), 1152px);
  max-width: 100%;
  aspect-ratio: 1152 / 371;
  transform: translateZ(0);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pandora-intro[data-exiting="true"] .pandora-intro__stage {
  opacity: 0.72;
  transform: translate3d(0, -4px, 0) scale(0.99);
}

.pandora-intro__stage::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  height: 34%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklch, var(--accent) 13%, transparent),
    transparent 68%
  );
  opacity: 0;
  transform: scaleX(0.68) scaleY(0.58);
  animation: intro-halo 1700ms cubic-bezier(0.22, 1, 0.36, 1) 3460ms both;
  pointer-events: none;
}

.pandora-intro__wordmark {
  position: absolute;
  left: 10.4167%;
  top: 29.6496%;
  width: 79.1668%;
  height: 24.7981%;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.pandora-intro__wordmark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  backface-visibility: hidden;
  pointer-events: none;
}

.pandora-intro__wordmark-layer img {
  width: 100%;
  height: 100%;
}

.pandora-intro__wordmark-ghost {
  opacity: 0;
  transform: translate3d(0, 3%, -92px) scale(0.978);
  animation: intro-wordmark-ghost 3420ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.pandora-intro__wordmark-reveal {
  z-index: 2;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 0, -54px) scale(0.988);
  animation: intro-wordmark-reveal 3040ms cubic-bezier(0.77, 0, 0.175, 1) 760ms both;
}

.pandora-intro__wordmark-highlight {
  z-index: 3;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  mix-blend-mode: screen;
  animation: intro-wordmark-highlight 3040ms cubic-bezier(0.77, 0, 0.175, 1) 760ms both;
}

.pandora-intro__beam {
  position: absolute;
  z-index: 4;
  left: -18%;
  top: -122%;
  width: 18%;
  height: 344%;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklch, var(--accent) 5%, transparent) 20%,
    color-mix(in oklch, var(--accent) 15%, transparent) 56%,
    color-mix(in oklch, var(--accent) 34%, transparent) 76%,
    transparent 100%
  );
  animation: intro-beam 3040ms cubic-bezier(0.77, 0, 0.175, 1) 760ms both;
  will-change: transform, opacity;
  pointer-events: none;
}

.pandora-intro__beam::before {
  content: "";
  position: absolute;
  top: 9%;
  right: 18%;
  width: 20%;
  height: 82%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--accent) 38%, transparent),
    transparent
  );
  opacity: 0.72;
  transform: scaleX(1.6);
}

.pandora-intro__beam::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 23%;
  width: 1px;
  height: 84%;
  background: color-mix(in oklch, var(--fg) 78%, var(--accent));
  box-shadow:
    -5px 0 10px color-mix(in oklch, var(--accent) 44%, transparent),
    0 0 9px color-mix(in oklch, var(--fg) 42%, transparent),
    0 0 24px color-mix(in oklch, var(--accent) 30%, transparent);
}

.pandora-intro__spark {
  position: absolute;
  right: 17%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--fg) 82%, var(--accent));
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.7);
  animation: intro-spark 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--spark-delay) both;
}

.pandora-intro__spark:nth-child(1) {
  top: 28%;
  --spark-delay: 1540ms;
}

.pandora-intro__spark:nth-child(2) {
  top: 49%;
  right: 24%;
  --spark-delay: 2240ms;
}

.pandora-intro__spark:nth-child(3) {
  top: 69%;
  right: 20%;
  --spark-delay: 2920ms;
}

.pandora-intro__rail {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  transform: scaleX(0.08);
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--fg) 20%, transparent) 20%,
    color-mix(in oklch, var(--accent) 46%, transparent) 50%,
    color-mix(in oklch, var(--fg) 20%, transparent) 80%,
    transparent
  );
  animation: intro-rail 3500ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
  pointer-events: none;
}

.pandora-intro__rail--top { top: -32%; }
.pandora-intro__rail--bottom { bottom: -32%; }

.pandora-intro__tagline {
  position: absolute;
  left: 20.0434%;
  top: 81.9164%;
  width: 60.965%;
  height: 8.9388%;
}

.pandora-intro__tagline img {
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}

.pandora-intro__gold {
  position: absolute;
  left: 26.0764%;
  top: 47.4394%;
  width: 60.4167%;
  height: 38.814%;
}

.pandora-intro__gold img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(0, 7%, 0) scale(0.88);
  animation: intro-gold 1160ms cubic-bezier(0.22, 1, 0.36, 1) 3320ms both;
}

.pandora-intro__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-intro-state="running"] .app-shell {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.996);
  pointer-events: none;
}

html[data-intro-state="exiting"] .app-shell,
html[data-intro-state="ready"] .app-shell {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes intro-atmosphere {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-grain {
  0% { opacity: 0; transform: rotate(-8deg) translate3d(-1.2%, 0, 0); }
  45% { opacity: 0.12; }
  100% { opacity: 0.055; transform: rotate(-8deg) translate3d(1.2%, 0, 0); }
}

@keyframes intro-wordmark-ghost {
  0% { opacity: 0; transform: translate3d(0, 3%, -92px) scale(0.978); }
  34% { opacity: 0.07; }
  100% { opacity: 0.02; transform: translate3d(0, 0, -18px) scale(0.997); }
}

@keyframes intro-wordmark-reveal {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, 0, -54px) scale(0.988); }
  18% { opacity: 0.22; }
  72% { opacity: 0.96; transform: translate3d(0, 0, -12px) scale(0.997); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes intro-wordmark-highlight {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  14% { opacity: 0.12; clip-path: inset(0 86% 0 0); }
  48% { opacity: 0.42; clip-path: inset(0 47% 0 40%); }
  82% { opacity: 0.2; clip-path: inset(0 8% 0 81%); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes intro-beam {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: 0.34; }
  45% { opacity: 0.88; }
  86% { opacity: 0.38; }
  100% { opacity: 0; transform: translate3d(720%, 0, 0); }
}

@keyframes intro-spark {
  0% { opacity: 0; transform: translate3d(-6px, 0, 0) scale(0.7); }
  36% { opacity: 0.86; }
  100% { opacity: 0; transform: translate3d(7px, -3px, 0) scale(1.4); }
}

@keyframes intro-rail {
  0% { opacity: 0; transform: scaleX(0.08); }
  26% { opacity: 0.28; }
  78% { opacity: 0.16; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes intro-gold {
  0% { opacity: 0; transform: translate3d(0, 7%, 0) scale(0.88); }
  58% { opacity: 1; transform: translate3d(0, -1%, 0) scale(1.035); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes intro-halo {
  0% { opacity: 0; transform: scaleX(0.72) scaleY(0.64); }
  52% { opacity: 0.72; }
  100% { opacity: 0; transform: scaleX(1.08) scaleY(1); }
}

@media (max-width: 639px) {
  .pandora-intro {
    padding-inline:
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-left));
  }

  .pandora-intro__stage {
    width: min(94vw, calc(72svh * 3.105121));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pandora-intro,
  .pandora-intro__stage,
  .app-shell {
    transition-duration: 180ms !important;
  }

  .pandora-intro::before,
  .pandora-intro::after,
  .pandora-intro__stage::before,
  .pandora-intro__wordmark-layer,
  .pandora-intro__beam,
  .pandora-intro__spark,
  .pandora-intro__rail,
  .pandora-intro__gold img {
    animation: none !important;
  }

  .pandora-intro::before,
  .pandora-intro__wordmark-reveal,
  .pandora-intro__gold img {
    opacity: 1;
  }

  .pandora-intro__wordmark-reveal {
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  .pandora-intro::after,
  .pandora-intro__stage::before,
  .pandora-intro__wordmark-ghost,
  .pandora-intro__wordmark-highlight,
  .pandora-intro__beam,
  .pandora-intro__spark,
  .pandora-intro__rail {
    opacity: 0;
  }

  .pandora-intro__gold img,
  html[data-intro-state] .app-shell {
    transform: none;
  }
}