/* ===== intro overlay ===== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050508;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro.fade-out {
  animation: introOut 0.7s ease forwards;
}
@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}

.intro-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== skip hint ===== */
.intro-skip {
  position: absolute;
  bottom: 26px;
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: #44445c;
  letter-spacing: 1px;
  pointer-events: none;
  animation: skipPulse 2s ease infinite;
}
@keyframes skipPulse { 50% { opacity: 0.35; } }

/* ===== skull stage ===== */
.skull-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: skullBoot 0.9s cubic-bezier(0.22,1,0.36,1);
}
@keyframes skullBoot {
  0%   { opacity: 0; transform: scale(0.6) translateY(30px); filter: blur(14px) brightness(3); }
  60%  { opacity: 1; filter: blur(0) brightness(1.3); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

#skull-container {
  position: relative;
  width: 300px;
  height: 300px;
  filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.5));
}
#skull-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  z-index: 2;
}
#skull-jaw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  transform-origin: center 80%;
  transform: translateY(0px);
  z-index: 1;
  /* transition controlled by JS for lipsync */
}

/* jaw smash-open (bite moment) */
.skull-stage.jaw-smash-open #skull-jaw {
  transform: translateY(16px) !important;
  transition: transform 0.06s cubic-bezier(0.2, 1, 0.3, 1.5) !important;
}

#eye-glows {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 38% 45%, var(--accent) 0%, transparent 15%),
              radial-gradient(circle at 62% 45%, var(--accent) 0%, transparent 15%);
  mix-blend-mode: screen;
  filter: blur(8px) brightness(1.5);
  transition: opacity 0.1s;
}
.skull-stage.jaw-smash-open #eye-glows {
  opacity: 1;
  animation: eyePulse 1.2s ease infinite;
}
@keyframes eyePulse {
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* bite screen shake */
.skull-stage.jaw-smash-open { animation: shake 0.45s linear; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15%  { transform: translate(-12px,  8px) rotate(-2deg); }
  30%  { transform: translate( 10px, -7px) rotate( 2deg); }
  45%  { transform: translate( -8px,  5px) rotate(-1deg); }
  60%  { transform: translate(  7px, -4px); }
  75%  { transform: translate( -4px,  3px); }
  90%  { transform: translate(  2px, -1px); }
}

#bite-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
#bite-flash.flash { animation: flashOut 0.55s ease-out; }
@keyframes flashOut {
  0%   { opacity: 0.65; }
  100% { opacity: 0; }
}

/* glitch on bite */
.intro.glitching #skull-container {
  animation: glitchShift 0.12s steps(2) infinite;
}
@keyframes glitchShift {
  0%   { transform: translate(0);        filter: none; }
  25%  { transform: translate(-3px, 2px); filter: hue-rotate(40deg); }
  50%  { transform: translate( 3px,-2px); }
  75%  { transform: translate(-2px,-1px); filter: hue-rotate(-40deg); }
}

/* CRT scanlines */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ===== speech bubble ===== */
.intro-speech {
  margin-top: 28px;
  max-width: 360px;
  text-align: center;
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.7;
  color: #e8e8ee;
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(255,255,255,0.35), 0 0 30px var(--accent);
  opacity: 1;
  transition: opacity 0.4s ease;
  /* keep it below the skull but inside the centered flex column */
  position: relative;
  z-index: 5;
}
.intro-speech.bubble-fade {
  opacity: 0;
}

/* ===== CLICK TO ENTER GATE ===== */
.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #050508;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.enter-gate.fade-out {
  animation: gateOut 0.6s ease forwards;
}
@keyframes gateOut {
  to { opacity: 0; visibility: hidden; }
}
.gate-text {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 1rem;
  color: #8a8aa0;
  letter-spacing: 4px;
  text-transform: lowercase;
  animation: gatePulse 2.2s ease-in-out infinite;
}
@keyframes gatePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; color: #d0d0e0; }
}

/* ===== WELCOME TEXT — letter drop ===== */
.intro-welcome {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 2.4rem;
  color: #fff;
  letter-spacing: 14px;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255,255,255,0.7), 0 0 48px var(--accent);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-welcome .wl {
  display: inline-block;
  opacity: 0;
  transform: translateY(-60px) scaleY(1.4);
  animation: letterDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes letterDrop {
  0%   { opacity: 0; transform: translateY(-60px) scaleY(1.4); }
  60%  { opacity: 1; transform: translateY(6px) scaleY(0.95); }
  80%  { transform: translateY(-3px) scaleY(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}