/*
 * Fayron Design System - Dark Premium Theme
 * Brand: Dark Navy backgrounds with Gold accents
 * Typography: Playfair Display (headings) + Inter (body)
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* Dark Theme Colors */
  --color-dark-primary: #1a1a2e;
  --color-dark-secondary: #16213e;
  --color-dark-tertiary: #0f3460;

  /* Gold Accents */
  --color-gold: #d4af37;
  --color-gold-light: #f4e4a1;
  --color-gold-dark: #a88b2a;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #a0aec0;
  --color-text-muted: #718096;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================
   Typography Utilities
   ============================================ */
.font-playfair {
  font-family: var(--font-heading);
}

.font-inter {
  font-family: var(--font-body);
}

/* Premium headline styling - tighter tracking for impact */
.headline-tight {
  letter-spacing: -0.03em;
}

.headline-tighter {
  letter-spacing: -0.04em;
}

/* Increased line-height for body text readability */
.leading-relaxed-premium {
  line-height: 1.75;
}

.leading-loose-premium {
  line-height: 1.85;
}

/* ============================================
   Color Utilities
   ============================================ */
.bg-dark-primary {
  background-color: var(--color-dark-primary);
}

.bg-dark-secondary {
  background-color: var(--color-dark-secondary);
}

.bg-dark-tertiary {
  background-color: var(--color-dark-tertiary);
}

.text-gold {
  color: var(--color-gold);
}

.text-gold-light {
  color: var(--color-gold-light);
}

.border-gold {
  border-color: var(--color-gold);
}

.bg-gold {
  background-color: var(--color-gold);
}

/* Gold gradient for buttons and accents */
.bg-gold-gradient {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
}

.hover\:bg-gold-gradient:hover {
  background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
}

/* ============================================
   Animated Gradient Blobs
   ============================================ */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* ============================================
   Grid Pattern Overlays
   ============================================ */

/* Light grid pattern (for light backgrounds) */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(156, 163, 175, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(156, 163, 175, 0.1) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Dark grid pattern (for dark backgrounds) */
.bg-grid-pattern-dark {
  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: 32px 32px;
}

/* ============================================
   Card Components
   ============================================ */
.card-dark {
  background-color: rgba(22, 33, 62, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.card-dark-hover:hover {
  border-color: var(--color-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}

/* ============================================
   Form Inputs (Dark Theme)
   ============================================ */
.input-dark {
  background-color: rgba(15, 52, 96, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.input-dark::placeholder {
  color: #718096;
}

.input-dark:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
  outline: none;
}

/* ============================================
   Button Styles
   ============================================ */
.btn-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  color: #1a1a2e;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-gold:hover {
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

.btn-gold-outline {
  background: transparent;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.1);
}

/* ============================================
   Navigation (Dark Theme)
   ============================================ */
.nav-link-dark {
  color: #a0aec0;
  transition: color 0.2s ease;
}

.nav-link-dark:hover {
  color: var(--color-gold);
}

.nav-link-dark.active {
  color: var(--color-gold);
}

/* ============================================
   Scrollbar Styling (Dark Theme)
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-dark-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ============================================
   Selection Styling
   ============================================ */
::selection {
  background-color: var(--color-gold);
  color: var(--color-dark-primary);
}

/* ============================================
   Flash Messages (Dark Theme)
   ============================================ */
.flash-notice-dark {
  background-color: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
}

.flash-alert-dark {
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* ============================================
   Separator
   ============================================ */
.separator {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 25px 0;
}

/* ============================================
   Scroll Animations
   ============================================ */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade only variant */
.scroll-animate-fade {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.scroll-animate-fade.animate-in {
  opacity: 1;
}

/* Slide from left */
.scroll-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.scroll-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay utilities */
.animate-delay-100 { transition-delay: 0.1s; }
.animate-delay-200 { transition-delay: 0.2s; }
.animate-delay-300 { transition-delay: 0.3s; }
.animate-delay-400 { transition-delay: 0.4s; }
.animate-delay-500 { transition-delay: 0.5s; }

/* ============================================
   Network Visualization Animation
   ============================================ */
@keyframes pulse-node {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes draw-line {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes float-node {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -4px); }
  50% { transform: translate(0, -6px); }
  75% { transform: translate(-4px, -2px); }
}

.network-node {
  animation: pulse-node 5s ease-in-out infinite;
}

.network-node-float {
  animation: float-node 10s ease-in-out infinite;
}

.network-line {
  stroke-dasharray: 100;
  animation: draw-line 2s ease-out forwards;
}

/* Node travel to center */
.node-traveler {
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Central node glow pulse when active */
.central-glow {
  transition: opacity 0.8s ease;
}

/* Goal text overlay */
.hero-goal-card {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 57%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 10;
}

.hero-goal-card.goal-visible {
  opacity: 1;
}