style.css

==================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}
=========================================================================
   QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
   Version: 1.273 (Helicity-Locked)
   License: Substrate-Level (Open Source Reality)
   ========================================================================= */==================================================================
   ANIMATION SYSTEM: The Wave Function
   ========================================================================= */==================================================================
   QUANTUM COMPONENTS
   ========================================================================= */==================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}
=========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}
=========================================================================
   SERVICES PAGE STYLES
   ========================================================================= */

.service-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-category {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.service-feature {
  transition: all 0.3s ease;
}

.service-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.service-image:hover {
  transform: scale(1.05);
}

/* Generator Gallery Styles */
.generator-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.generator-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* =========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body.error .error-418 {
  display: flex;
}
=======
/* =========================================================================
   SERVICES PAGE STYLES
   ========================================================================= */

.service-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-category {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.service-feature {
  transition: all 0.3s ease;
}

.service-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.service-image {
  transition: transform 0.3s ease;
}

.service-image:hover {
  transform: scale(1.05);
}

/* Generator Gallery Styles */
.generator-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.generator-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* =========================================================================
   KB-12-HEX-T KLEIN BOTTLE ANIMATIONS
   ========================================================================= */
@keyframes klein-bottle-twist {
  0% { 
    transform: rotateX(0deg) rotateY(0deg);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: rotateX(90deg) rotateY(90deg);
    filter: hue-rotate(51.84deg);
  }
  50% { 
    transform: rotateX(180deg) rotateY(180deg);
    filter: hue-rotate(103.68deg);
  }
  75% { 
    transform: rotateX(270deg) rotateY(270deg);
    filter: hue-rotate(155.52deg);
  }
  100% { 
    transform: rotateX(360deg) rotateY(360deg);
    filter: hue-rotate(0deg);
  }
}

@keyframes hex-leaf-rotation {
  0% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.273;
  }
  33% { 
    transform: scale(1.273) rotate(120deg);
    opacity: 0.618;
  }
  66% { 
    transform: scale(0.847) rotate(240deg);
    opacity: 0.847;
  }
  100% { 
    transform: scale(1) rotate(360deg);
    opacity: 0.273;
  }
}

@keyframes inner-outer-radius-swap {
  0%, 100% { 
    transform: scaleX(1);
    filter: brightness(1);
  }
  50% { 
    transform: scaleX(-1);
    filter: brightness(1.273);
  }
}

@keyframes screw-glide-transition {
  0% { 
    transform: translateY(0) rotateZ(0deg);
  }
  25% { 
    transform: translateY(calc(κ * 10px))) rotateZ(51.84deg);
  }
  50% { 
    transform: translateY(calc(κ * 20px))) rotateZ(103.68deg);
  }
  75% { 
    transform: translateY(calc(κ * 30px))) rotateZ(155.52deg);
  }
  100% { 
    transform: translateY(calc(κ * 40px))) rotateZ(360deg);
  }
}

/* KB-12-Hex-T Hover Effects */
.hovered-element:hover {
  animation: klein-bottle-twist 12.73s infinite linear,
             hex-leaf-rotation 7.83s infinite ease-in-out,
             inner-outer-radius-swap 1.273s infinite alternate;
  filter: hue-rotate(51.84deg) brightness(1.273);
}

/* 12-Layer Hexagonal Leaf Styling */
.hex-leaf {
  animation: hex-leaf-rotation 37.2s infinite;
  transform-origin: center;
}

.hex-leaf:nth-child(odd) {
  animation-delay: -6.365s;
}

/* Frozen-Light Caustics Effect */
.frozen-light-caustics {
  background: radial-gradient(
    ellipse at center,
    var(--psi-green) 0%,
    transparent 50%,
    var(--κ-gold) 100%;
  opacity: 0.273;
  animation: screw-glide-transition 4.18s infinite alternate;
}

=========================================================================
   SERVICES PAGE STYLES
   ========================================================================= */

.service-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-category {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.service-feature {
  transition: all 0.3s ease;
}

.service-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0,0,0.4);
}

.service-image {
  transition: transform 0.3s ease;
}

.service-image:hover {
  transform: scale(1.05);
}

/* Generator Gallery Styles */
.generator-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.generator-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* =========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

=========================================================================
   KB-12-HEX-T KLEIN BOTTLE ANIMATIONS
   ========================================================================= */
@keyframes klein-bottle-twist {
  0% { 
    transform: rotateX(0deg) rotateY(0deg);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: rotateX(90deg) rotateY(90deg);
    filter: hue-rotate(51.84deg);
  }
  50% { 
    transform: rotateX(180deg) rotateY(180deg);
    filter: hue-rotate(103.68deg);
  }
  75% { 
    transform: rotateX(270deg) rotateY(270deg);
    filter: hue-rotate(155.52deg);
  }
  100% { 
    transform: rotateX(360deg) rotateY(360deg);
    filter: hue-rotate(0deg);
  }
}

@keyframes hex-leaf-rotation {
  0% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.273;
  }
  33% { 
    transform: scale(1.273) rotate(120deg);
    opacity: 0.618;
  }
  66% { 
    transform: scale(0.847) rotate(240deg);
    opacity: 0.847;
  }
  100% { 
    transform: scale(1) rotate(360deg);
    opacity: 0.273;
  }
}

@keyframes inner-outer-radius-swap {
  0%, 100% { 
    transform: scaleX(1);
    filter: brightness(1);
  }
  50% { 
    transform: scaleX(-1);
    filter: brightness(1.273);
  }
}

@keyframes screw-glide-transition {
  0% { 
    transform: translateY(0) rotateZ(0deg);
  }
  25% { 
    transform: translateY(calc(κ * 10px))) rotateZ(51.84deg);
  }
  50% { 
    transform: translateY(calc(κ * 20px))) rotateZ(103.68deg);
  }
  75% { 
    transform: translateY(calc(κ * 30px))) rotateZ(155.52deg);
  }
  100% { 
    transform: translateY(calc(κ * 40px))) rotateZ(360deg);
  }
}

/* KB-12-Hex-T Hover Effects */
.hovered-element:hover {
  animation: klein-bottle-twist 12.73s infinite linear,
             hex-leaf-rotation 7.83s infinite ease-in-out,
             inner-outer-radius-swap 1.273s infinite alternate;
  filter: hue-rotate(51.84deg) brightness(1.273);
}

/* 12-Layer Hexagonal Leaf Styling */
.hex-leaf {
  animation: hex-leaf-rotation 37.2s infinite;
  transform-origin: center;
}

.hex-leaf:nth-child(odd) {
  animation-delay: -6.365s;
}

/* Frozen-Light Caustics Effect */
.frozen-light-caustics {
  background: radial-gradient(
    ellipse at center,
    var(--psi-green) 0%,
    transparent 50%,
    var(--κ-gold) 100%
  );
  opacity: 0.273;
  animation: screw-glide-transition 4.18s infinite alternate;
}

/* =========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}
Quantum HUD: The Reality Overlay */
#quantum-hud {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  background: rgba(5, 5, 5, 0.9);
  border: 1px solid var(--quantum-cyan);
  border-radius: 4px;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

/* Navigation Bar: The Control Plane */
#quantum-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}
=======
/* =========================================================================
   QUANTUM COMPONENTS
   ========================================================================= */

/* Quantum HUD: The Reality Overlay */
#quantum-hud {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  background: rgba(5, 5, 5, 0.9);
  border: 1px solid var(--quantum-cyan);
  border-radius: 4px;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

/* Navigation Bar: The Control Plane */
#quantum-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

/* Theme Toggle Button */
#theme-toggle {
  transition: all var(--time-unit) ease;
}

#theme-toggle:hover {
  transform: rotate(var(--geometric-angle));
}

/* Quantum Enhanced Elements */
.quantum-enhanced {
  animation: quantum-fractal-zoom 3.7s infinite cubic-bezier(0.618, 0, 0.382, 1);
}

.toroidal-spin-enhanced {
  animation: enhanced-toroidal-spin 12.73s infinite linear;
}

.substrate-collapse {
  animation: substrate-collapse 4.18s infinite alternate;
}

.quantum-entanglement {
  animation: quantum-entanglement 1.273s infinite;
}
Primary Interference Pattern (7.83s Schumann resonance) */
@keyframes wave-interference {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: calc(1 / var(--helicity-ratio));
  }
  50% { 
    transform: scale(var(--helicity-ratio)) rotate(var(--geometric-angle)); 
    opacity: 1;
  }
}

/* Helicity Pulse (1.273s heartbeat of reality) */
@keyframes kappa-pulse {
  0%, 100% { 
    opacity: calc(1 / var(--helicity-ratio));
    transform: scale(0.95);
  }
  50% { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Decoherence Cycle (37.2s attention span collapse) */
@keyframes decoherence {
  0% { filter: blur(0px) hue-rotate(0deg); }
  25% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(51.84deg); }
  50% { filter: blur(0px) hue-rotate(0deg); }
  75% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(-51.84deg); }
  100% { filter: blur(0px) hue-rotate(0deg); }
}

/* Geometric Spin Lock (51.84s full rotation) */
@keyframes geometric-lock {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Unity Invariant Breathing (Ψ = 1 ± 0.001) */
@keyframes unity-breathe {
  0%, 100% { opacity: 0.999; }
  50% { opacity: 1.001; }
}

/* Fractal Zoom (3.7s temporal recursion) */
@keyframes fractal-zoom {
  0% { transform: scale(1) translateZ(0); }
  50% { transform: scale(var(--helicity-ratio)) translateZ(-100px); }
  100% { transform: scale(1) translateZ(0); }
}
=======
/* =========================================================================
   ANIMATION SYSTEM: The Wave Function
   ========================================================================= */

/* Primary Interference Pattern (7.83s Schumann resonance) */
@keyframes wave-interference {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: calc(1 / var(--helicity-ratio));
  }
  50% { 
    transform: scale(var(--helicity-ratio)) rotate(var(--geometric-angle)); 
    opacity: 1;
  }
}

/* Helicity Pulse (1.273s heartbeat of reality) */
@keyframes kappa-pulse {
  0%, 100% { 
    opacity: calc(1 / var(--helicity-ratio));
    transform: scale(0.95);
  }
  50% { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Decoherence Cycle (37.2s attention span collapse) */
@keyframes decoherence {
  0% { filter: blur(0px) hue-rotate(0deg); }
  25% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(51.84deg); }
  50% { filter: blur(0px) hue-rotate(0deg); }
  75% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(-51.84deg); }
  100% { filter: blur(0px) hue-rotate(0deg); }
}

/* Geometric Spin Lock (51.84s full rotation) */
@keyframes geometric-lock {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Unity Invariant Breathing (Ψ = 1 ± 0.001) */
@keyframes unity-breathe {
  0%, 100% { opacity: 0.999; }
  50% { opacity: 1.001; }
}

/* Quantum Fractal Zoom (Enhanced to quantum levels) */
@keyframes quantum-fractal-zoom {
  0% { 
    transform: scale(1) translateZ(0);
    opacity: 0.273;
  }
  25% { 
    transform: scale(1.618) translateZ(100px);
    opacity: 1;
  }
  50% { 
    transform: scale(2.718) translateZ(-200px);
    opacity: 0.618;
  }
  75% { 
    transform: scale(1.273) translateZ(50px);
    opacity: 0.847;
  }
  100% { 
    transform: scale(1) translateZ(0);
    opacity: 0.273;
  }
}

/* Quantum Entanglement Pulse */
@keyframes quantum-entanglement {
  0%, 100% { 
    box-shadow: 0 0 20px var(--psi-green), 0 0 40px var(--quantum-cyan);
  }
  50% { 
    box-shadow: 0 0 60px var(--helicity-gold);
}

/* Substrate Wave Function Collapse */
@keyframes substrate-collapse {
  0% { 
    transform: translateX(-50%) scale(0.1);
    opacity: 0;
  }
  20% { 
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  40% { 
    transform: translateX(50%) scale(0.3);
    opacity: 0.273;
  }
  60% { 
    transform: translateX(0) scale(0.7);
    opacity: 0.618;
  }
  80% { 
    transform: translateX(-25%) scale(1.2);
    opacity: 0.847;
  }
  100% { 
    transform: translateX(0) scale(1);
    opacity: 0.273;
  }
}

/* Quantum Decoherence Cascade */
@keyframes quantum-decoherence-cascade {
  0% { 
    filter: hue-rotate(0deg) blur(0px);
  }
  33% { 
    filter: hue-rotate(51.84deg) blur(4px);
  }
  66% { 
    filter: hue-rotate(-51.84deg) blur(8px);
  }
  100% { 
    filter: hue-rotate(0deg) blur(0px);
  }
}

/* Enhanced Toroidal Spin */
@keyframes enhanced-toroidal-spin {
  0% { 
    transform: rotateX(0deg) rotateY(0deg) scale(1);
  }
  25% { 
    transform: rotateX(90deg) rotateY(90deg) scale(1.273);
  }
  50% { 
    transform: rotateX(180deg) rotateY(180deg) scale(1.618);
  }
  75% { 
    transform: rotateX(270deg) rotateY(270deg) scale(1);
  }
  100% { 
    transform: rotateX(360deg) rotateY(360deg) scale(1);
  }
}
Root Constants: The Geometric Lock */
:root {
  --helicity-ratio: 1.2732405447351628;        /* 4/π */
  --geometric-angle: 51.84deg;                 /* arctan(helicity-ratio) */
  --unity-invariant: 1.000000;                 /* Ψ ≡ 1 */
  --golden-phi: 1.618033988749895;             /* Φ for aesthetic gradients */
  --planck-frequency: 720Hz;                   /* Logic Framerate */
  --critical-frequency: 37.2Hz;                /* Decoherence threshold */
  --lock-frequency: 111Hz;                     /* Acoustic lithification */
  
  /* Color Space: Non-Commutative Palette */
  --void-black: #050505;                       /* BSP root node */
  --quantum-cyan: #00ffff;                     /* Coherent waveform */
  --psi-green: #00ffcc;                        /* Unity Invariant glow */
  --helicity-gold: #FFD700;                    /* Geometric lock marker */
  --swan-white: #ffffff;                       /* Trivial factor (ζ ≡ 1) */
  --stress-red: #ff0044;                       /* RVS cascade warning */
  
  /* Temporal Transitions: κ-scaled easing */
  --time-unit: 1.273s;                         /* Base temporal quantum */
  --decay-rate: 0.618;                         /* Phi-damped oscillation */
}
=======
/* =========================================================================
   QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
   Version: 1.273 (Helicity-Locked)
   License: Substrate-Level (Open Source Reality)
   ========================================================================= */

/* Root Constants: The Geometric Lock */
:root {
  --helicity-ratio: 1.2732405447351628;        /* 4/π */
  --geometric-angle: 51.84deg;                 /* arctan(helicity-ratio) */
  --unity-invariant: 1.000000;                 /* Ψ ≡ 1 */
  --golden-phi: 1.618033988749895;             /* Φ for aesthetic gradients */
  --planck-frequency: 720Hz;                   /* Logic Framerate */
  --critical-frequency: 37.2Hz;                /* Decoherence threshold */
  --lock-frequency: 111Hz;                     /* Acoustic lithification */
  
  /* Color Space: Non-Commutative Palette */
  --void-black: #050505;                       /* BSP root node */
  --quantum-cyan: #00ffff;                     /* Coherent waveform */
  --psi-green: #00ffcc;                        /* Unity Invariant glow */
  --helicity-gold: #FFD700;                    /* Geometric lock marker */
  --swan-white: #ffffff;                       /* Trivial factor (ζ ≡ 1) */
  --stress-red: #ff0044;                       /* RVS cascade warning */
  
  /* Temporal Transitions: κ-scaled easing */
  --time-unit: 1.273s;                         /* Base temporal quantum */
  --decay-rate: 0.618;                         /* Phi-damped oscillation */
}

/* Light Theme Variables */
:root[data-theme="light"] {
  --void-black: #f8fafc;
  --quantum-cyan: #0f172a;
  --psi-green: #059669;
  --helicity-gold: #d97706;
  --swan-white: #111827;
  --stress-red: #dc2626;
}
=========================================================================
   CHATBOT INTERFACE
   ========================================================================= */
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--quantum-cyan) transparent;
}

#chat-messages::-webkit-scrollbar {
  width: 4px;
}

#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
  background: var(--quantum-cyan);
  border-radius: 2px;
}

/* Chat message animations */
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#chat-messages > div {
  animation: messageSlideIn 0.3s ease-out;
}

/* =========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}
=========================================================================
   QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
   Version: 1.273 (Helicity-Locked)
   License: Substrate-Level (Open Source Reality)
   ========================================================================= */

/* Root Constants: The Geometric Lock */
:root {
  --helicity-ratio: 1.2732405447351628;        /* 4/π */
  --geometric-angle: 51.84deg;                 /* arctan(helicity-ratio) */
  --unity-invariant: 1.000000;                 /* Ψ ≡ 1 */
  --golden-phi: 1.618033988749895;             /* Φ for aesthetic gradients */
  --planck-frequency: 720Hz;                   /* Logic Framerate */
  --critical-frequency: 37.2Hz;                /* Decoherence threshold */
  --lock-frequency: 111Hz;                     /* Acoustic lithification */
  
  /* Color Space: Non-Commutative Palette */
  --void-black: #050505;                       /* BSP root node */
  --quantum-cyan: #00ffff;                     /* Coherent waveform */
  --psi-green: #00ffcc;                        /* Unity Invariant glow */
  --helicity-gold: #FFD700;                    /* Geometric lock marker */
  --swan-white: #ffffff;                       /* Trivial factor (ζ ≡ 1) */
  --stress-red: #ff0044;                       /* RVS cascade warning */
  
  /* Temporal Transitions: κ-scaled easing */
  --time-unit: 1.273s;                         /* Base temporal quantum */
  --decay-rate: 0.618;                         /* Phi-damped oscillation */
}

/* =========================================================================
   BASE RESET: Clearing the Void Buffer
   ========================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Courier New', monospace;
  background-color: var(--void-black);
  color: var(--quantum-cyan);
  overflow-x: hidden;
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   ANIMATION SYSTEM: The Wave Function
   ========================================================================= */

/* Primary Interference Pattern (7.83s Schumann resonance) */
@keyframes wave-interference {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: calc(1 / var(--helicity-ratio));
  }
  50% { 
    transform: scale(var(--helicity-ratio)) rotate(var(--geometric-angle)); 
    opacity: 1;
  }
}

/* Helicity Pulse (1.273s heartbeat of reality) */
@keyframes kappa-pulse {
  0%, 100% { 
    opacity: calc(1 / var(--helicity-ratio));
    transform: scale(0.95);
  }
  50% { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Decoherence Cycle (37.2s attention span collapse) */
@keyframes decoherence {
  0% { filter: blur(0px) hue-rotate(0deg); }
  25% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(51.84deg); }
  50% { filter: blur(0px) hue-rotate(0deg); }
  75% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(-51.84deg); }
  100% { filter: blur(0px) hue-rotate(0deg); }
}

/* Geometric Spin Lock (51.84s full rotation) */
@keyframes geometric-lock {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Unity Invariant Breathing (Ψ = 1 ± 0.001) */
@keyframes unity-breathe {
  0%, 100% { opacity: 0.999; }
  50% { opacity: 1.001; }
}

/* Fractal Zoom (3.7s temporal recursion) */
@keyframes fractal-zoom {
  0% { transform: scale(1) translateZ(0); }
  50% { transform: scale(var(--helicity-ratio)) translateZ(-100px); }
  100% { transform: scale(1) translateZ(0); }
}

/* =========================================================================
   QUANTUM COMPONENTS
   ========================================================================= */

/* Quantum HUD: The Reality Overlay */
#quantum-hud {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  background: rgba(5, 5, 5, 0.9);
  border: 1px solid var(--quantum-cyan);
  border-radius: 4px;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

/* Navigation Bar: The Control Plane */
#quantum-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

/* Hero Section: The BSP Splash */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Glitch Text: The decoherence artifact */
#glitch-text {
  display: inline-block;
  animation: decoherence var(--time-unit) infinite cubic-bezier(0.618, 0, 0.382, 1);
}

/* Terminal Window: The Instance Matrix */
#quantum-terminal {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  background: rgba(5, 5, 5, 0.5);
  border: 1px solid var(--quantum-cyan);
  border-radius: 8px;
  padding: 1.5rem;
  overflow: hidden;
}

/* Blinking Cursor: The Present Moment */
.animate-blink {
  animation: blink 1s infinite;
}

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

/* =========================================================================
   CARDS: The Operator Instances
   ========================================================================= */
.card {
  transition: all var(--time-unit) cubic-bezier(0.618, 0, 0.382, 1);
}

.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.273);
}

.card-icon {
  transition: all calc(var(--time-unit) / 2) ease;
}

.card:hover .card-icon {
  transform: rotate(var(--geometric-angle));
  filter: brightness(1.273);
}

/* =========================================================================
   BUTTONS: The Control Interfaces
   ========================================================================= */
.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;
  transition: all var(--time-unit) ease;
}

.btn-primary::before, .btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--helicity-gold), transparent);
  transition: left calc(var(--time-unit) * 0.618) ease;
}

.btn-primary:hover::before, .btn-secondary:hover::before {
  left: 100%;
}

/* =========================================================================
   RESPONSIVE: The Viewport Adaptation
   ========================================================================= */
@media (max-width: 768px) {
  :root {
    --time-unit: 0.785s; /* κ' for mobile performance */
  }
  
  #quantum-hud {
    font-size: 0.625rem;
    padding: 0.5rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
}

/* =========================================================================
   ACCESSIBILITY: The Semantic Affect Layer
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   PRINT: The Static Projection
   ========================================================================= */
@media print {
  body {
    background: white;
    color: black;
  }
  
  #quantum-hud, #quantum-canvas {
    display: none;
  }
}

/* =========================================================================
   ERROR HANDLER: The 418 State
   ========================================================================= */
.error-418 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--void-black);
  color: var(--quantum-cyan);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4rem;
}

body.error .error-418 {
  display: flex;
}