/* =========================================================
   Cinematic intro overlay
   ========================================================= */
#zaiphr-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1);
  background: transparent;
}
#zaiphr-intro .zi__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(168,85,247,0.12), transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 60%, rgba(249,115,22,0.08), transparent 70%),
    #06080d;
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1);
}
#zaiphr-intro .zi__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#zaiphr-intro .zi__logo {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translateZ(0) scale(0.985);
  transform-origin: center center;
  pointer-events: none;
  will-change: opacity, transform;
}
/* Soft glow behind the logo — separate element so the wordmark stays crisp */
#zaiphr-intro .zi__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(168, 140, 255, 0.45) 0%,
    rgba(249, 115, 22, 0.18) 30%,
    rgba(168, 140, 255, 0.08) 55%,
    transparent 75%);
  filter: blur(18px);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateZ(0);
  will-change: opacity;
}
/* Shine sweep — masked to the wordmark's alpha so it ONLY exists on logo
   pixels. The element itself is the size of the logo; an internal gradient
   sweeps left→right via background-position, so there is no rectangular
   bounding box to ever see. Fades in and out on opacity at the edges of
   the sweep so there's no hard cut. */
/* Shine sweep — element sized + masked to the wordmark; an inner pseudo
   holds the bright band and slides via transform (GPU-composited) so the
   sweep doesn't trigger a paint per frame. */
#zaiphr-intro .zi__shine {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
}
#zaiphr-intro .zi__shine-band {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 180, 100, 0.55) 46%,
    rgba(249, 115, 22, 0.98) 50%,
    rgba(255, 180, 100, 0.55) 54%,
    transparent 62%,
    transparent 100%
  );
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  filter: blur(0.4px);
}
#zaiphr-intro .zi__flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 28% at 50% 50%,
    rgba(255,255,255,0.85) 0%,
    rgba(255,240,220,0.45) 18%,
    rgba(168,85,247,0.20) 38%,
    rgba(249,115,22,0.08) 55%,
    transparent 75%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateZ(0);
  will-change: opacity;
}
#zaiphr-intro .zi__skip {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  animation: ziSkipIn 0.8s ease 1.4s forwards;
  pointer-events: none;
}
@keyframes ziSkipIn { to { opacity: 1; } }

#zaiphr-intro.zi--done {
  opacity: 0;
  pointer-events: none;
}
#zaiphr-intro.zi--done .zi__bg { opacity: 0; }