@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --plane-0: #030306;
  --plane-1: #08090f;
  --plane-2: #0e111a;
  --plane-3: #151926;
  --accent-pink: #ff007a;
  --accent-magenta: #d946ef;
  --accent-violet: #8b5cf6;
  --accent-cyan: #00f0ff;
  --accent-emerald: #10b981;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

* {
  box-sizing: border-box;
}

html {
  font-family: "Plus Jakarta Sans", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  scroll-behavior: smooth;
  background-color: var(--plane-0);
  color: #f3f4f6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Background Kinetic Grid with Spotlight */
.bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Stepped Spatial Luminance & Specular Hairlines */
.glass-panel {
  background: rgba(14, 17, 26, 0.7);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 32px -4px rgba(0, 0, 0, 0.7);
}

.glass-panel-subtle {
  background: rgba(10, 12, 18, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

.glass-panel-elevated {
  background: rgba(21, 25, 38, 0.8);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 64px -8px rgba(0, 0, 0, 0.8);
}

/* Traveling Laser Border Beam (Featured Card Invariant) */
.border-beam-card {
  position: relative;
  background: #0d0f18;
  border-radius: 2rem;
  overflow: hidden;
}

.border-beam-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 2rem;
  padding: 1.5px;
  background: conic-gradient(from var(--beam-angle), transparent 70%, #ff007a 85%, #00f0ff 94%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateBeam 4s linear infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes rotateBeam {
  to {
    --beam-angle: 360deg;
  }
}

/* Doron's World 4px Animated Laser Divider */
.laser-divider {
  background: linear-gradient(90deg, #ff007a, #00f0ff, #ff007a);
  background-size: 200% 100%;
  animation: laserFlow 2.8s linear infinite;
  box-shadow: 0 0 12px rgba(255, 0, 122, 0.9), 0 0 24px rgba(0, 240, 255, 0.6);
}

@keyframes laserFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Kinetic Captions Bounce */
.kinetic-badge {
  animation: badgeBounce 1.6s infinite var(--ease-spring);
  display: inline-block;
  will-change: transform;
}

@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1) rotate(-3deg);
  }
  50% {
    transform: scale(1.08) rotate(-1deg);
  }
}

/* Live Audio Waveform Bars */
.audio-bar {
  animation: waveBar 1.2s ease-in-out infinite alternate;
}

@keyframes waveBar {
  0% { height: 15%; }
  50% { height: 95%; }
  100% { height: 35%; }
}

/* Accordion Smooth Height Transition */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out), opacity 0.25s ease;
  opacity: 0;
}

.faq-item.active .faq-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-content > div {
  overflow: hidden;
}

.faq-icon {
  transition: transform 0.3s var(--ease-out);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Optical Display Typography */
.display-title {
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.headline-gradient {
  background: linear-gradient(180deg, #FFFFFF 0%, #D1D5DB 55%, #9CA3AF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headline-accent {
  background: linear-gradient(135deg, #FF007A 0%, #E100FF 45%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mono-telemetry {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Magnetic Button Transitions */
.magnetic-btn {
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s ease, background-color 0.2s ease;
  will-change: transform;
}

.magnetic-btn:active {
  transform: scale(0.96) translateY(1px);
}