/* === CSS Variables === */
:root {
  --color-bg: #000000;
  --color-cyan: #00f0ff;
  --color-blue: #0066ff;
  --color-white-glow: rgba(255, 255, 255, 0.9);
  --font-mono: 'JetBrains Mono', monospace;
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-mono);
  color: var(--color-cyan);
}

/*
  Z-INDEX LAYERS:
  0  = bg-watermark (DVD bouncing logo)
  1  = bg-canvas (particles — transparent bg)
  3  = floating-texts (easter eggs)
  5  = spline-container (robot 3D — interactive)
  20 = logo-container (Keystone logo top)
*/

/* === DVD Bouncing Logo — the main logo, surfing the screen === */
#bg-watermark {
  position: fixed;
  z-index: 15;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.watermark-logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px var(--color-cyan));
}

/* === Canvas (particles + matrix) === */
#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* === Spline 3D Robot === */
#spline-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
}

#spline-container spline-viewer {
  width: 100%;
  height: 100%;
  --spline-viewer-background: transparent;
}

/* Hide Spline branding */
#spline-container spline-viewer::part(logo) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* === DVD logo glow pulse === */
.watermark-logo {
  filter: drop-shadow(0 0 15px var(--color-cyan)) drop-shadow(0 0 40px var(--color-blue));
}

/* === Subtitle (typing — fixed bottom) === */
#logo-subtitle {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  color: var(--color-cyan);
  opacity: 0.6;
  min-height: 1.5em;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px var(--color-cyan);
  pointer-events: none;
}

/* === Floating Easter Egg texts === */
.floating-text {
  position: fixed;
  font-size: clamp(0.65rem, 1.3vw, 0.9rem);
  font-family: var(--font-mono);
  color: var(--color-cyan);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  user-select: none;
  text-shadow: 0 0 10px var(--color-cyan), 0 0 20px rgba(0, 240, 255, 0.3);
  border-left: 2px solid rgba(0, 240, 255, 0.3);
  padding-left: 8px;
}

.floating-text.visible { opacity: 0.35; }

.floating-text::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--color-cyan);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--color-cyan);
}

/* === Glitch burst === */
@keyframes glitch-burst {
  0%   { transform: translate(0) skew(0deg); filter: brightness(1); }
  10%  { transform: translate(-6px, 2px) skew(-2deg); filter: brightness(2) hue-rotate(30deg); }
  20%  { transform: translate(6px, -2px) skew(2deg); filter: brightness(1.5); }
  30%  { transform: translate(-3px, 3px) skew(-1deg); filter: brightness(2.5) hue-rotate(-20deg); }
  40%  { transform: translate(3px, -1px) skew(1deg); filter: brightness(1); }
  60%  { transform: translate(0); filter: brightness(1); }
  100% { transform: translate(0); filter: brightness(1); }
}

.glitch-burst { animation: glitch-burst 0.3s ease-in-out !important; }

/* === Noscript === */
.noscript-fallback {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; z-index: 100;
}

.noscript-fallback svg {
  width: clamp(200px, 50vw, 400px); height: auto;
  filter: drop-shadow(0 0 20px var(--color-cyan)) drop-shadow(0 0 60px var(--color-blue));
}

.noscript-fallback p {
  font-family: var(--font-mono); font-size: clamp(0.7rem, 1.5vw, 1rem);
  color: var(--color-cyan); opacity: 0.5; margin-top: 1rem;
}

/* === Responsive === */
@media (max-width: 768px) {
  .floating-text { font-size: clamp(0.55rem, 2.5vw, 0.75rem); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .glitch, .logo-svg { animation: none !important; }
  .floating-text { transition: opacity 3s ease; }
}