/* style.css - Preset B: Midnight Luxe Palette & High-End Agency Interactions */

:root {
  --color-obsidian: #0D0D12;
  --color-champagne: #C9A84C;
  --color-ivory: #FAF8F5;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  
  --ease-agency: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
  scroll-behavior: smooth;
}

/* Fallback visibility guarantee */
.hero-stagger, .feature-card, .manifesto-line, .stack-card, .project-card {
  opacity: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-obsidian);
}
::-webkit-scrollbar-thumb {
  background: var(--color-slate-800);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-champagne);
}

/* Double Bezel Doppelrand Architecture */
.outer-bezel {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s var(--ease-agency), transform 0.35s var(--ease-agency), box-shadow 0.35s var(--ease-agency);
}
.outer-bezel:hover {
  box-shadow: 0 30px 60px -20px rgba(201, 168, 76, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.inner-core {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

/* Magnetic Button Hover & Active Press Physics */
.btn-magnetic {
  transition: transform 0.25s var(--ease-agency), border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-magnetic:hover {
  transform: scale(1.03) translateY(-1px);
}
.btn-magnetic:active {
  transform: scale(0.97);
}

/* Diagnostic Shuffler Cards */
.shuffler-card {
  position: absolute;
  width: 100%;
  max-width: 280px;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Keyframes for Stacking Laser Scan */
@keyframes laserScan {
  0% {
    top: 10%;
    opacity: 0.3;
  }
  50% {
    top: 90%;
    opacity: 1;
  }
  100% {
    top: 10%;
    opacity: 0.3;
  }
}

/* EKG Waveform Path Animation */
#ekg-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: ekgDraw 3s ease-in-out infinite;
}

@keyframes ekgDraw {
  0% {
    stroke-dashoffset: 600;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}

/* Filter Button Active State */
.filter-btn.active {
  background-color: var(--color-champagne);
  color: var(--color-obsidian);
  border-color: var(--color-champagne);
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);
}

/* Project Card Hover */
.project-card {
  transition: transform 0.35s var(--ease-agency), border-color 0.35s ease, box-shadow 0.35s ease;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.5);
}