* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* --- Menu Page --- */
.menu-page {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, #1a0033 0%, #000 70%);
}

#menu {
  text-align: center;
  max-width: 600px;
  width: 90%;
}

#menu h1 {
  font-size: 4rem;
  letter-spacing: 0.5em;
  background: linear-gradient(135deg, #ff00ff, #4400ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  text-shadow: none;
}

.subtitle {
  color: #888;
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

#session-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.session-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.session-card:hover {
  background: rgba(255, 0, 255, 0.1);
  border-color: rgba(255, 0, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 0, 255, 0.15);
}

.session-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}

.session-card .meta {
  font-size: 0.8rem;
  color: #666;
}

/* ============================================ */
/* --- Session Page --- */
/* ============================================ */

.session-page {
  position: relative;
}

#spiral-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* --- MEDIA OVERLAY --- */

#media-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#media-overlay img,
#media-overlay video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--fade-duration, 2s) ease;
  position: absolute;
  filter: saturate(1.3) contrast(1.1);
}

#media-overlay img.visible,
#media-overlay video.visible {
  opacity: var(--media-opacity, 0.4);
}

/* --- TEXT OVERLAY --- */

#text-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#text-content {
  font-size: 4rem;
  font-weight: 100;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 10px #fff,
    0 0 30px rgba(255, 0, 255, 1),
    0 0 60px rgba(255, 0, 255, 0.9),
    0 0 100px rgba(255, 0, 255, 0.5),
    0 0 150px rgba(128, 0, 255, 0.4),
    0 0 200px rgba(128, 0, 255, 0.2);
  opacity: 0;
  transition: opacity 1s ease;
  transform: scale(1);
}

#text-content.visible {
  opacity: 1;
  animation: textPulse 1.5s ease-in-out infinite;
}

#text-content.pulse {
  animation: textFlash 0.5s ease-out !important;
}

@keyframes textPulse {
  0%, 100% { transform: scale(1); opacity: 1; filter: brightness(1); }
  50% { transform: scale(1.08); opacity: 0.8; filter: brightness(1.3); }
}

@keyframes textFlash {
  0% { transform: scale(1.5); filter: brightness(3) saturate(2); opacity: 1; }
  30% { transform: scale(0.95); filter: brightness(0.5); }
  60% { transform: scale(1.15); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}

/* --- SCREEN FLASH --- */

#screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  mix-blend-mode: screen;
}

#screen-flash.active {
  opacity: 1;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 0, 255, 0.4) 30%,
    rgba(128, 0, 255, 0.2) 60%,
    transparent 80%);
  animation: flashPulse 0.3s ease-out;
}

@keyframes flashPulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

/* --- TEXT-HIT GLITCH on body --- */

body.text-hit {
  animation: screenShake 0.3s ease-out;
}

body.text-hit #spiral-canvas {
  animation: glitchShift 0.3s steps(2) forwards;
}

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

@keyframes glitchShift {
  0% { filter: hue-rotate(0deg); clip-path: inset(0 0 0 0); }
  25% { filter: hue-rotate(90deg); clip-path: inset(10% 0 80% 0); }
  50% { filter: hue-rotate(180deg); clip-path: inset(40% 0 30% 0); }
  75% { filter: hue-rotate(270deg); clip-path: inset(70% 0 10% 0); }
  100% { filter: hue-rotate(0deg); clip-path: inset(0 0 0 0); }
}

/* --- CONTINUOUS AMBIENT FLICKER --- */

.session-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  background: transparent;
  animation: ambientFlicker 4s infinite;
  mix-blend-mode: overlay;
  opacity: var(--flicker-opacity, 0);
}

@keyframes ambientFlicker {
  0%, 100% { background: transparent; }
  3% { background: rgba(255, 0, 255, 0.03); }
  6% { background: transparent; }
  15% { background: rgba(255, 255, 255, 0.02); }
  15.5% { background: transparent; }
  30% { background: rgba(100, 0, 255, 0.04); }
  31% { background: transparent; }
  45% { background: rgba(255, 255, 255, 0.03); }
  45.3% { background: transparent; }
  60% { background: rgba(255, 0, 100, 0.02); }
  60.5% { background: transparent; }
  78% { background: rgba(255, 255, 255, 0.05); }
  78.3% { background: rgba(0, 0, 0, 0.1); }
  78.6% { background: rgba(255, 255, 255, 0.04); }
  79% { background: transparent; }
  92% { background: rgba(200, 0, 255, 0.03); }
  92.3% { background: transparent; }
}

/* --- SECOND FLICKER LAYER (faster) --- */

.session-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  animation: rapidFlicker 1.5s infinite steps(1);
  mix-blend-mode: screen;
  opacity: var(--flicker-opacity, 0);
}

@keyframes rapidFlicker {
  0%, 100% { background: transparent; }
  4% { background: rgba(255, 0, 255, 0.06); }
  5% { background: transparent; }
  22% { background: rgba(255, 255, 255, 0.04); }
  23% { background: transparent; }
  41% { background: rgba(0, 0, 255, 0.05); }
  42% { background: transparent; }
  63% { background: rgba(255, 0, 128, 0.04); }
  64% { background: transparent; }
  81% { background: rgba(255, 255, 255, 0.06); }
  82% { background: transparent; }
  91% { background: rgba(200, 0, 255, 0.03); }
  92% { background: transparent; }
}

/* --- VIGNETTE OVERLAY (always on) --- */

.session-page #vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  animation: vignettePulse 8s ease-in-out infinite;
}

@keyframes vignettePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* --- Controls --- */

#controls {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 20;
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.session-page:hover #controls,
#controls:hover {
  opacity: 1;
}

#controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#controls button:hover {
  background: rgba(255, 0, 255, 0.3);
  border-color: rgba(255, 0, 255, 0.6);
}

/* --- Fade overlay --- */

#fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 100;
  opacity: 1;
  transition: opacity 2s ease;
  pointer-events: none;
}

#fade-overlay.hidden {
  opacity: 0;
}

/* --- Loading screen --- */

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transition: opacity 1s ease;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-screen p {
  color: #666;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.loading-spiral {
  width: 60px;
  height: 60px;
  border: 3px solid transparent;
  border-top-color: #ff00ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}