:root {
  --color-bg: #0D0D12;
  --color-text: #FAF8F5;
  --color-accent: #C9A84C;
  --color-panel: #1A1A1A;
  --color-panel-glass: rgba(13, 13, 18, 0.6);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.05);
  --color-text-muted: rgba(250, 248, 245, 0.4);
  --color-text-dim: rgba(250, 248, 245, 0.2);
  --color-nav-bg: rgba(0, 0, 0, 0.2);
  --color-magnetic-shine: rgba(26, 26, 26, 0.85);
}

.light-theme {
  --color-bg: #FAF8F5;
  --color-text: #0D0D12;
  --color-accent: #C9A84C;
  --color-panel: #FFFFFF;
  --color-panel-glass: rgba(255, 255, 255, 0.72);
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-text-muted: rgba(13, 13, 18, 0.55);
  --color-text-dim: rgba(13, 13, 18, 0.28);
  --color-nav-bg: rgba(250, 248, 245, 0.82);
  --color-magnetic-shine: rgba(178, 144, 52, 0.92);
}

@theme {
  --color-primary: var(--color-bg);
  --color-accent: var(--color-accent);
  --color-background-ivory: var(--color-bg);
  --color-slate-dark: #2A2A35;
  
  --font-sans: "Inter", sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* Global Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  filter: url(#noiseFilter);
}

.light-theme .noise-overlay {
  opacity: 0.035;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body {
  transition: background-color 0.5s ease, color 0.5s ease;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Anchor targets clear fixed header */
section[id] {
  scroll-margin-top: clamp(5.5rem, 12vw, 6.75rem);
}

.nav-backdrop-enter-active,
.nav-backdrop-leave-active {
  transition: opacity 0.2s ease;
}

.nav-backdrop-enter-from,
.nav-backdrop-leave-to {
  opacity: 0;
}

.nav-flyout-enter-active,
.nav-flyout-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-flyout-enter-from,
.nav-flyout-leave-to {
  opacity: 0;
  transform: translateY(-0.35rem);
}

[v-cloak] {
  display: none;
}

/* Rounded System */
.rounded-giant {
  border-radius: 3rem;
}

/* Magnetic Button Base */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magnetic-btn .magnetic-btn-shine {
  background: var(--color-magnetic-shine);
}

/* Glassmorphism */
.glass-panel {
  background: var(--color-panel-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
}

/* Protocol Stacking Interaction */
.protocol-card {
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #C9A84C;
  border-radius: 3px;
}

/* Animation Utilities */
.reveal-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.shuffler-container {
  height: 13rem;
  padding-bottom: 2.75rem;
}

.shuffler-item {
  box-shadow: 0 10px 30px var(--color-border);
  transform-origin: center top;
  will-change: transform, opacity;
}

.shuffler-face {
  background-color: color-mix(in srgb, var(--color-panel) 90%, var(--color-bg));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Three.js Canvas Fix */
/* Industry & Tech Stack Grids */
.logo-grid-item {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logo-grid-item:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-5px);
}

/* Testimonial Carousel Transition */
.testimonial-enter-active, .testimonial-leave-active {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-enter-from {
  opacity: 0;
  transform: translateX(50px);
}
.testimonial-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

/* Security Highlight */
.security-card {
  position: relative;
  overflow: hidden;
}
.security-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(201, 168, 76, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}
.security-card:hover::after {
  transform: translateX(100%);
}

/* Protocol Refinement */
#protocol {
  contain: paint;
}

#protocol-canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
}

#protocol progress {
  display: block;
  width: 100%;
}

.protocol-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all 0.5s ease;
}

.protocol-dot.active {
  background: var(--color-accent);
  box-shadow: 0 0 15px var(--color-accent);
}

/* Protocol Artifacts */
.protocol-artifact {
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

canvas {
  display: block;
  outline: none;
}