/* style.css - nodeclic Agency: Midnight Luxe Palette & High-End Interactions */
/* Extends portfolio design system with agency-specific components */

:root {
  --color-obsidian: #0D0D12;
  --color-champagne: #C9A84C;
  --color-ivory: #FAF8F5;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --color-slate-950: #070A10;

  --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, .module-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);
}

/* Module Cards — Agency Specific */
.module-card {
  transition: transform 0.35s var(--ease-agency), border-color 0.35s ease, box-shadow 0.35s ease;
}
.module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.5);
}

/* 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);
}

/* Stack Card — Sticky Stacking Protocol */
.stack-card {
  transition: transform 0.5s var(--ease-agency), opacity 0.5s var(--ease-agency), filter 0.5s var(--ease-agency);
}

/* Manifesto Ideal Client Cards */
#manifesto .outer-bezel {
  transition: transform 0.35s var(--ease-agency), border-color 0.35s ease, box-shadow 0.35s ease;
}
#manifesto .outer-bezel:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 25px 50px -20px rgba(201, 168, 76, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Roadmap Metrics Grid */
#roadmap .grid > div {
  transition: opacity 0.3s ease;
}

/* Audit Section Trust Metrics */
#audit-section .grid > div {
  transition: transform 0.3s ease;
}
#audit-section .grid > div:hover {
  transform: translateY(-2px);
}

/* Focus Visible States for Accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-champagne);
  outline-offset: 3px;
}

/* Selection Colors */
::selection {
  background: var(--color-champagne);
  color: var(--color-obsidian);
}

/* Reduced Motion */
@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;
  }
}

/* Mobile Navbar Adjustments */
@media (max-width: 768px) {
  #navbar-container {
    top: 3px;
    width: 96%;
  }
  
  .btn-magnetic span {
    font-size: 0.7rem;
  }
}