/* ── Intro overlay ───────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Three.js katana canvas */
#intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Impact light burst — hidden until slash */
#intro-burst {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(232,80,58,.18) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* Slash crack lines across screen */
#intro-slash {
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  z-index: 3;
  transform: rotate(-3deg) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rose) 20%,
    var(--text) 50%,
    var(--rose) 80%,
    transparent 100%
  );
  box-shadow: 0 0 12px var(--glow2), 0 0 30px var(--glow);
  opacity: 0;
}

/* Title beneath katana */
#intro-title {
  position: absolute;
  bottom: clamp(3rem, 10vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: .3em;
  color: var(--text);
  text-align: center;
  opacity: 0;
  white-space: nowrap;
}
#intro-title em {
  color: var(--ember);
  font-style: normal;
}

/* Two halves that split on slash */
#intro-top,
#intro-bot {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  background: var(--bg);
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
#intro-top { top: 0; height: 50%; transform: translateY(0); }
#intro-bot { bottom: 0; height: 52%; transform: translateY(0); }

#intro.split #intro-top { transform: translateY(-102%); }
#intro.split #intro-bot { transform: translateY(102%); }

/* Screen shake keyframe */
@keyframes shake {
  0%   { transform: translate(0,0) rotate(0); }
  15%  { transform: translate(-6px, 3px) rotate(-.4deg); }
  30%  { transform: translate(5px, -4px) rotate(.3deg); }
  45%  { transform: translate(-4px, 2px) rotate(-.2deg); }
  60%  { transform: translate(3px, -2px) rotate(.15deg); }
  75%  { transform: translate(-2px, 1px) rotate(-.1deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.shaking { animation: shake .45s var(--ease) forwards; }

/* Vignette corners */
#intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
}