/* === BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Courier New', monospace; }

/* === SCENES === */
.scene {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none;
}
.scene.active { display: flex; }

/* === GLITCH === */
#scene-glitch {
  background: #000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.glitch-scanlines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.glitch-content {
  text-align: center;
  z-index: 5;
}

.glitch-title {
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 900;
  color: #fff;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch-title::before {
  color: #ff0040;
  animation: glitch-r 0.3s infinite;
  clip-path: inset(0 0 50% 0);
}
.glitch-title::after {
  color: #00ffff;
  animation: glitch-b 0.3s infinite;
  clip-path: inset(50% 0 0 0);
}

@keyframes glitch-r {
  0%{transform:translate(0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(-1px,1px)}
  80%{transform:translate(2px,-2px)}
  100%{transform:translate(0)}
}
@keyframes glitch-b {
  0%{transform:translate(0)}
  20%{transform:translate(2px,-1px)}
  40%{transform:translate(-2px,2px)}
  60%{transform:translate(1px,-2px)}
  80%{transform:translate(-3px,1px)}
  100%{transform:translate(0)}
}

/* Hover intensify */
.glitch-title:hover::before {
  animation: glitch-r-intense 0.15s infinite;
}
.glitch-title:hover::after {
  animation: glitch-b-intense 0.15s infinite;
}
@keyframes glitch-r-intense {
  0%{transform:translate(0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(5px,-2px)}
  60%{transform:translate(-3px,4px)}
  80%{transform:translate(4px,-3px)}
  100%{transform:translate(0)}
}
@keyframes glitch-b-intense {
  0%{transform:translate(0)}
  20%{transform:translate(5px,-3px)}
  40%{transform:translate(-4px,3px)}
  60%{transform:translate(3px,-4px)}
  80%{transform:translate(-6px,2px)}
  100%{transform:translate(0)}
}

/* Click burst — heavy glitch before transition */
.glitch-burst::before {
  animation: glitch-r-intense 0.05s infinite !important;
  opacity: 0.8;
}
.glitch-burst::after {
  animation: glitch-b-intense 0.05s infinite !important;
  opacity: 0.8;
}
.glitch-burst {
  filter: invert(1);
  animation: none !important;
}

.glitch-email {
  display: block;
  margin-top: 1.5rem;
  font-size: clamp(0.7rem, 2vw, 1rem);
  color: #555;
  text-decoration: none;
  position: relative;
}
.glitch-email::before,
.glitch-email::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch-email::before {
  color: rgba(255, 0, 64, 0.4);
  animation: glitch-r 0.5s infinite;
  clip-path: inset(0 0 50% 0);
}
.glitch-email::after {
  color: rgba(0, 255, 255, 0.4);
  animation: glitch-b 0.5s infinite;
  clip-path: inset(50% 0 0 0);
}

/* === TERMINAL === */
#scene-terminal {
  background: #0d1117;
  flex-direction: column;
}

.terminal {
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.terminal-output {
  flex: 1;
  overflow-y: auto;
  color: #00ff41;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal-output .line { margin-bottom: 2px; }
.terminal-output .line.dim { color: #0a7a25; }
.terminal-output .line.input { color: #00ff41; }
.terminal-output .line.input::before { content: '$ '; }

.terminal-input-line {
  display: flex;
  align-items: center;
  color: #00ff41;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  font-family: inherit;
}

.terminal-prompt { flex-shrink: 0; padding-right: 10px; }

.terminal-input {
  width: 2px;
  min-width: 2px;
  background: transparent;
  border: none;
  outline: none;
  color: #00ff41;
  font-family: 'Courier New', monospace;
  font-size: inherit;
  caret-color: transparent;
}

.terminal-input-mirror {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  font-family: 'Courier New', monospace;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
}

.terminal-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: #00ff41;
  animation: cursor-blink 1s step-end infinite;
  flex-shrink: 0;
}

.terminal-cursor.typing {
  animation: none;
  opacity: 1;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* === PIXEL === */
#scene-pixel {
  background: #1a1c2c;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  image-rendering: pixelated;
}

.pixel-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  display: flex;
  flex-direction: column;
}
.pixel-sky-band { flex: 1; }

.pixel-stars {
  position: absolute;
  top: 3%; left: 0; right: 0;
  height: 20%;
  z-index: 1;
}
.pixel-star {
  position: absolute;
  background: #f4f4f4;
  animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:0.3} 50%{opacity:1} }

.pixel-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22%;
  background: #1a1c2c;
  z-index: 1;
}

.pixel-palm {
  position: absolute;
  bottom: 38%;
  z-index: 2;
}
.pixel-palm-left { left: 5%; transform: rotate(-8deg); }
.pixel-palm-right { right: 5%; transform: rotate(6deg); }

.pixel-center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pixel-dog {
  display: grid;
  gap: 0;
}
.pixel-dog .px { width: 100%; aspect-ratio: 1; }

.pixel-dog-glint {
  position: absolute;
  background: #fff;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.pixel-dog-glint.flash {
  animation: glint 0.4s ease-out;
}
@keyframes glint {
  0%{opacity:0;transform:scale(1)}
  30%{opacity:1;transform:scale(1.8)}
  100%{opacity:0;transform:scale(1)}
}

.pixel-title {
  font-family: monospace;
  font-size: clamp(20px, 4vw, 48px);
  color: #f4f4f4;
  text-shadow: 4px 4px 0 #333;
  letter-spacing: 4px;
  margin-top: 12px;
}

.pixel-start {
  font-family: monospace;
  font-size: clamp(14px, 2.5vw, 28px);
  color: #a26eba;
  margin-top: 16px;
  cursor: pointer;
  animation: blink-start 1.5s step-end infinite;
  letter-spacing: 3px;
  user-select: none;
}
@keyframes blink-start { 0%,100%{opacity:1} 66%{opacity:0} }

/* === TRANSITIONS === */

/* Glitch → Terminal: slide up */
.scene.slide-up-out {
  display: flex !important;
  animation: slideUpOut 600ms ease-out forwards;
}
.scene.slide-up-in {
  display: flex !important;
  animation: slideUpIn 600ms ease-out forwards;
}
@keyframes slideUpOut {
  from { transform: translateY(0); }
  to { transform: translateY(-100vh); }
}
@keyframes slideUpIn {
  from { transform: translateY(100vh); }
  to { transform: translateY(0); }
}

/* Terminal → Pixel: datamosh */
.scene.datamosh-out {
  display: flex !important;
  animation: datamoshOut 800ms ease-in forwards;
}
@keyframes datamoshOut {
  0% { filter: none; opacity: 1; }
  30% { filter: saturate(3) contrast(2); }
  60% { filter: saturate(5) contrast(3) hue-rotate(90deg); opacity: 0.8; }
  100% { filter: saturate(0) contrast(10) blur(10px); opacity: 0; }
}
.scene.datamosh-in {
  display: flex !important;
  animation: datamoshIn 800ms ease-out forwards;
}
@keyframes datamoshIn {
  0% { filter: saturate(0) contrast(10) blur(10px); opacity: 0; }
  40% { filter: saturate(5) contrast(3) hue-rotate(-90deg); opacity: 0.8; }
  70% { filter: saturate(2) contrast(1.5); opacity: 0.9; }
  100% { filter: none; opacity: 1; }
}

/* Pixel → Glitch: CRT zap */
.crt-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  display: none;
}
.crt-overlay.active {
  display: block;
  animation: crtZap 500ms ease-in-out forwards;
}
@keyframes crtZap {
  0% { opacity: 0; clip-path: inset(0); }
  15% { opacity: 1; clip-path: inset(0); }
  35% { opacity: 1; clip-path: inset(48% 0 48% 0); }
  50% { opacity: 1; clip-path: inset(49.5% 5% 49.5% 5%); }
  55% { opacity: 0.8; clip-path: inset(49.8% 15% 49.8% 15%); }
  60% { opacity: 0; clip-path: inset(50% 50% 50% 50%); }
  61% { opacity: 1; clip-path: inset(0); }
  70% { opacity: 0.9; }
  100% { opacity: 0; }
}