/* --- Custom premium font (Satoshi) --- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

:root {
  --font-satoshi: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Palette derived from premium user reference image */
  --color-neutral-950: #9684b5; /* Gorgeous rich envelope lilac background! */
  --color-neutral-900: #ffffff; /* Primary solid white card surface */
  --color-neutral-800: #faf8fb; /* Off-white glass panel base */
  --color-neutral-700: #dcd6e5; /* Distinct lilac-gray border */
  --color-neutral-600: #7c6f8c; /* Muted lavender-gray for captions */
  --color-neutral-400: #515c52; /* Muted sage-forest green for body paragraphs */
  --color-neutral-200: #242c26; /* Deep forest green for text inside cards */
  
  --color-text-on-bg: #20172e;  /* Very dark purple for high contrast text on the lilac background */
  
  --color-accent: #586c54;     /* Muted elegant dusty sage green (from the stamp seal) */
  --color-accent-hover: #455542;
  --color-accent-rgb: 88, 108, 84;
  
  --color-warning: #b83a3a;    /* Muted terracotta warning red flag (under 80% saturation) */
  --color-warning-hover: #9e2f2f;
  
  --spring-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --fluid-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: var(--font-satoshi);
  background-color: var(--color-neutral-950);
  color: var(--color-text-on-bg);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Background grain noise effect (light mode version) */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0.035;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Light Liquid Glass Refraction - Higher opacity for distinct card contrast */
.liquid-glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(32, 23, 46, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -15px rgba(32, 23, 46, 0.06);
}

/* Terracotta glass warning highlight */
.glass-warning {
  border: 1px solid rgba(184, 58, 58, 0.18);
  background: rgba(184, 58, 58, 0.02);
}

.glass-warning:hover {
  border: 1px solid rgba(184, 58, 58, 0.3);
  background: rgba(184, 58, 58, 0.04);
}

/* Custom spring transitions */
.spring-transition {
  transition: all 0.5s var(--spring-ease);
}

.fluid-transition {
  transition: all 0.6s var(--fluid-ease);
}

/* Skeleton loader shimmer (light mode version) */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(230, 224, 235, 0.3) 25%,
    rgba(244, 239, 246, 0.7) 37%,
    rgba(230, 224, 235, 0.3) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-shimmer {
  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* Staggered Animations */
.staggered-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: revealUp 0.8s var(--fluid-ease) forwards;
  animation-delay: calc(var(--index) * 120ms);
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Breathing Scan Radar */
.scan-radar {
  animation: radar-breathing 3s infinite var(--fluid-ease);
}

@keyframes radar-breathing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.25;
  }
}

/* Interactive SVG Node pulse */
.node-pulse {
  animation: pulse-node 2.5s infinite ease-in-out;
}

@keyframes pulse-node {
  0%, 100% {
    r: 6;
    fill-opacity: 0.6;
  }
  50% {
    r: 9;
    fill-opacity: 0.3;
  }
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Accordion max-height helper */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--fluid-ease), opacity 0.3s var(--fluid-ease);
  opacity: 0;
}

.accordion-item[data-state="active"] .accordion-content {
  max-height: 250px;
  opacity: 1;
}

.accordion-item[data-state="active"] .accordion-icon {
  transform: rotate(180deg);
}

/* Custom styled text gradient (elegant pure white to soft dusty-sage white) */
.text-warning-gradient {
  background: linear-gradient(135deg, #ffffff 40%, #e0e9de 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}