/* Custom Design System & Progressive Disclosure Layout Styles */

:root {
  --line-height-body: 1.6;
}

body {
  line-height: var(--line-height-body);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #06080b;
  color: #e7e5e4;
}

/* Typography Hierarchy */
h1, h2, h3, .font-display {
  font-family: 'Cinzel', 'Georgia', serif;
  letter-spacing: -0.01em;
}

.font-serif-body {
  font-family: 'Lora', 'Georgia', serif;
  line-height: 1.7;
}

.font-mono-code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* High Contrast Header Scale */
h1 {
  font-weight: 800;
  line-height: 1.1;
}

h2 {
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-weight: 600;
  line-height: 1.35;
}

/* Mandatory Whitespace Rule */
.section-pad {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  .section-pad {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Accessible Focus States (WCAG 2.1 AA) */
*:focus-visible {
  outline: 3px solid #d97706 !important;
  outline-offset: 3px !important;
}

/* Skip Navigation Link */
.a11y-skip-link {
  position: absolute;
  top: -120px;
  left: 1.5rem;
  background: #d97706;
  color: #0c0a09;
  padding: 0.85rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 100;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  transition: top 0.2s ease-in-out;
}
.a11y-skip-link:focus {
  top: 1.5rem;
}

/* Atmospheric Ambient Background */
.ambient-hero-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(217, 119, 6, 0.15) 0%, rgba(6, 8, 11, 0) 70%);
}

/* Card Transitions */
.interactive-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.interactive-card:hover {
  transform: translateY(-4px);
}

/* Animated Audio Bars */
.audio-bar {
  width: 3px;
  background-color: #f59e0b;
  border-radius: 2px;
  transition: height 0.15s ease;
}
.audio-bar.playing {
  animation: audioWave 1.2s ease-in-out infinite alternate;
}
.audio-bar:nth-child(1) { animation-delay: 0.1s; height: 8px; }
.audio-bar:nth-child(2) { animation-delay: 0.3s; height: 16px; }
.audio-bar:nth-child(3) { animation-delay: 0.5s; height: 12px; }
.audio-bar:nth-child(4) { animation-delay: 0.2s; height: 20px; }
.audio-bar:nth-child(5) { animation-delay: 0.4s; height: 10px; }

@keyframes audioWave {
  0% { height: 4px; }
  50% { height: 22px; }
  100% { height: 8px; }
}

/* Accordion Smooth Height Transition */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}
.accordion-content.open {
  max-height: 1200px;
  opacity: 1;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}