/* ══════════ PORTAL CINEMATIC SYSTEM ══════════ */

/* Phase 1: Page glitch (applied to body via JS) */
@keyframes page-jitter {
  0%   { filter: none; transform: none; }
  5%   { filter: hue-rotate(90deg) brightness(1.3); transform: translateX(6px); }
  8%   { filter: none; transform: translateX(-10px); }
  12%  { filter: brightness(3) saturate(0.1); transform: none; }
  15%  { filter: none; }
  20%  { filter: hue-rotate(-80deg); transform: translateX(12px) skewX(2deg); }
  23%  { filter: none; transform: none; }
  30%  { filter: invert(0.12); transform: translateX(-6px); }
  33%  { filter: none; transform: none; }
  42%  { filter: hue-rotate(200deg); transform: translateX(8px) skewY(1deg); }
  45%  { filter: none; transform: none; }
  54%  { filter: saturate(0) brightness(2.5); transform: translateX(-14px); }
  56%  { filter: none; transform: none; }
  65%  { filter: hue-rotate(60deg) brightness(2); transform: translateX(10px); }
  67%  { filter: none; transform: none; }
  74%  { filter: brightness(5); transform: none; }
  77%  { filter: brightness(0.1); }
  80%  { filter: brightness(6); }
  85%  { filter: brightness(0); }
  100% { filter: brightness(0); }
}

/* Glitch scanline/color overlay */
#p-glitch-overlay {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8998;
}
#p-glitch-overlay.active {
  display: block;
  animation: glitch-scan 2.5s steps(1, end) forwards;
}
@keyframes glitch-scan {
  0%   { background: transparent; }
  5%   { background: repeating-linear-gradient(0deg, rgba(255,0,0,0.1) 0px, rgba(255,0,0,0.1) 1px, transparent 1px, transparent 4px); transform: translateX(3px); }
  8%   { background: repeating-linear-gradient(0deg, rgba(0,80,255,0.08) 0px, rgba(0,80,255,0.08) 2px, transparent 2px, transparent 5px); transform: translateX(-3px); }
  12%  { background: transparent; transform: none; }
  20%  { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 3px); transform: translateX(5px); }
  23%  { background: transparent; transform: none; }
  42%  { background: repeating-linear-gradient(0deg, rgba(255,0,0,0.15) 0px, rgba(255,0,0,0.15) 2px, transparent 2px, transparent 6px); }
  45%  { background: transparent; }
  65%  { background: repeating-linear-gradient(0deg, rgba(0,255,100,0.06) 0px, rgba(0,255,100,0.06) 1px, transparent 1px, transparent 4px); }
  67%  { background: transparent; }
  74%  { background: rgba(255,255,255,0.9); }
  77%  { background: rgba(0,0,0,0.95); }
  80%  { background: rgba(255,255,255,0.6); }
  85%  { background: #000; }
  100% { background: #000; }
}

/* Portal screen (full overlay) */
#portal-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  overflow: hidden;
}
#portal-screen.visible { display: block; }
/* Glitch phase: transparent so page shows through, WebGL renders on top */
#portal-screen.glitching {
  display: block;
  background: transparent;
  pointer-events: none;
}

/* ── Three.js canvas (prepended into portal-screen by JS) ── */
#portal-screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* DOS terminal sits above the Three.js canvas */
#p-dos { z-index: 1; }

/* ── DOS Terminal ── */
#p-dos {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6vh 10vw;
  overflow-y: auto;
  transform-origin: center center;
}
/* CRT scanlines */
#p-dos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.22) 3px, rgba(0,0,0,0.22) 4px);
  pointer-events: none;
  z-index: 1;
}
/* Phosphor vignette */
#p-dos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,255,65,0.05) 0%, rgba(0,0,0,0.5) 90%);
  pointer-events: none;
  z-index: 1;
}
#p-dos-text {
  position: relative;
  z-index: 2;
  font-family: 'VT323', monospace;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0,255,65,0.9), 0 0 22px rgba(0,255,65,0.4);
  white-space: pre-wrap;
  max-width: 760px;
}
#p-dos-content {
  /* inline text node container */
}
#p-dos-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: #00ff41;
  vertical-align: text-bottom;
  margin-left: 1px;
  box-shadow: 0 0 10px rgba(0,255,65,1);
  animation: dos-blink 0.75s step-end infinite;
}
@keyframes dos-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* CRT shutoff */
#p-dos.crt-off {
  animation: crt-collapse 0.45s ease-in forwards;
}
@keyframes crt-collapse {
  0%   { transform: scaleY(1); filter: brightness(1); }
  55%  { transform: scaleY(0.018); filter: brightness(3); }
  80%  { transform: scaleY(0.003); filter: brightness(6); }
  100% { transform: scaleY(0); filter: brightness(9); }
}

/* CRT dot */
#p-crt-dot {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 6px;
  background: #fff;
  border-radius: 50%;
  filter: blur(2px) brightness(5);
  z-index: 9010;
}
#p-crt-dot.active {
  display: block;
  animation: dot-die 1s ease forwards;
}
@keyframes dot-die {
  0%   { width: 140px; height: 6px; opacity: 1; filter: blur(1px) brightness(6); }
  25%  { width: 30px; height: 30px; border-radius: 50%; filter: brightness(9); }
  55%  { width: 6px; height: 6px; filter: brightness(14); }
  80%  { width: 2px; height: 2px; opacity: 0.8; }
  100% { width: 0; height: 0; opacity: 0; }
}

/* ── Black Hole ── */
#p-blackhole {
  display: none;
  position: absolute;
  inset: 0;
  background: #000;
  align-items: center;
  justify-content: center;
}
#p-blackhole.active { display: flex; }
.bh-ring {
  position: absolute;
  border-radius: 50%;
}
.bh-ring-1 {
  width: 700px; height: 220px;
  background: radial-gradient(ellipse, rgba(255,140,0,0.75) 0%, rgba(255,60,0,0.45) 40%, transparent 72%);
  animation: bh-spin 3s linear infinite;
  filter: blur(5px);
}
.bh-ring-2 {
  width: 540px; height: 170px;
  background: radial-gradient(ellipse, rgba(255,210,60,0.55) 0%, rgba(200,80,0,0.35) 50%, transparent 72%);
  animation: bh-spin 4.8s linear reverse infinite;
  filter: blur(4px);
}
.bh-ring-3 {
  width: 820px; height: 280px;
  background: radial-gradient(ellipse, transparent 28%, rgba(140,60,220,0.35) 60%, transparent 82%);
  animation: bh-spin 7s linear infinite;
  filter: blur(8px);
}
.bh-void {
  position: absolute;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 80px 60px #000, 0 0 160px 100px rgba(0,0,0,0.85);
  z-index: 2;
}
@keyframes bh-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

#p-blackhole.imploding .bh-ring-1,
#p-blackhole.imploding .bh-ring-2,
#p-blackhole.imploding .bh-ring-3 { animation: bh-expand 1.6s ease-in forwards; }
#p-blackhole.imploding .bh-void   { animation: void-expand 1.6s ease-in forwards; }
@keyframes bh-expand { to { transform: scale(8) rotate(540deg); opacity: 0; } }
@keyframes void-expand { to { transform: scale(30); } }

/* ── Wormhole Tunnel ── */
#p-wormhole {
  display: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #0a0a2e 0%, #050510 40%, #000 70%);
  overflow: hidden;
}
#p-wormhole.active { display: block; }

/* Central glow */
#p-wormhole::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,140,255,0.3) 0%, rgba(80,60,200,0.15) 40%, transparent 70%);
  animation: worm-glow 1.5s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes worm-glow {
  from { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
  to { transform: translate(-50%,-50%) scale(1.8); opacity: 1; }
}

.tunnel-item {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  will-change: transform, opacity;
}
.tunnel-star {
  width: 2px; height: 2px;
  border-radius: 50%;
  margin: -1px 0 0 -1px;
}
.tunnel-photo {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 20px rgba(100,140,255,0.3);
}
.tunnel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }