/* Theme variables and base styles */
:root {
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  --border-color: #e5e5e5;
  --accent-violet: #8b5cf6;
  --accent-amber: #fbbf24;
  
  /* Brand colors */
  --lox-yellow: rgb(255, 220, 0);
  --mox-purple: hsl(263, 70%, 50%);
  --lox-yellow-light: rgb(255, 230, 80);
  --mox-purple-light: hsl(263, 70%, 60%);
}

.dark {
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --text-primary: #e5e5e5;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --border-color: #262626;
  --accent-violet: #a78bfa;
  --accent-amber: #fbbf24;
  
  /* Brand colors (same in dark mode) */
  --lox-yellow: rgb(255, 220, 0);
  --mox-purple: hsl(263, 70%, 50%);
  --lox-yellow-light: rgb(255, 230, 80);
  --mox-purple-light: hsl(263, 70%, 60%);
}

/* Base body styles - applied to all pages */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}

/* Aurora blob backgrounds */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 220, 0, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: aurora-float-1 20s ease-in-out infinite;
}

body::after {
  content: '';
  position: fixed;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(122, 40, 203, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: aurora-float-2 25s ease-in-out infinite;
}

.dark body::before {
  background: radial-gradient(circle, rgba(255, 220, 0, 0.05) 0%, transparent 70%);
}

.dark body::after {
  background: radial-gradient(circle, rgba(122, 40, 203, 0.05) 0%, transparent 70%);
}

@keyframes aurora-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-10%, 10%) scale(1.1); }
  66% { transform: translate(10%, -5%) scale(0.95); }
}

@keyframes aurora-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10%, -10%) scale(1.05); }
  66% { transform: translate(-5%, 10%) scale(0.9); }
}

/* Ensure content is above aurora */
body > * {
  position: relative;
  z-index: 1;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* Reveal animation utilities */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Image placeholder styles */
.img-placeholder {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
}

.dark .img-placeholder {
  background: linear-gradient(135deg, #262626 0%, #1a1a1a 100%);
  color: #525252;
}

/* Brand pill swap - pure CSS animations (CSP-compliant) */
.brand-pill {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0.5rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  min-width: 8ch;
  text-align: center;
  animation: pill-bg-swap 4.4s ease-in-out infinite;
}

.brand-word {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}

.brand-word--mox {
  animation: word-swap-mox 4.4s ease-in-out infinite;
}

.brand-word--lox {
  animation: word-swap-lox 4.4s ease-in-out infinite;
}

/* Pill background color swap animation */
@keyframes pill-bg-swap {
  0%, 45% {
    background-color: var(--mox-purple);
    color: #ffffff;
  }
  50%, 95% {
    background-color: var(--lox-yellow);
    color: #1a1a1a;
  }
  100% {
    background-color: var(--mox-purple);
    color: #ffffff;
  }
}

/* MOX word animation */
@keyframes word-swap-mox {
  0%, 45% {
    opacity: 1;
    transform: translateY(0);
  }
  50%, 95% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* LOX word animation */
@keyframes word-swap-lox {
  0%, 45% {
    opacity: 0;
    transform: translateY(10px);
  }
  50%, 95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .brand-pill {
    animation: pill-bg-swap-simple 4.4s ease-in-out infinite;
  }
  
  .brand-word--mox {
    animation: word-swap-mox-simple 4.4s ease-in-out infinite;
  }
  
  .brand-word--lox {
    animation: word-swap-lox-simple 4.4s ease-in-out infinite;
  }
  
  @keyframes pill-bg-swap-simple {
    0%, 45% {
      background-color: var(--mox-purple);
      color: #ffffff;
    }
    50%, 95% {
      background-color: var(--lox-yellow);
      color: #1a1a1a;
    }
    100% {
      background-color: var(--mox-purple);
      color: #ffffff;
    }
  }
  
  @keyframes word-swap-mox-simple {
    0%, 45% {
      opacity: 1;
      transform: translateY(0);
    }
    50%, 95% {
      opacity: 0;
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes word-swap-lox-simple {
    0%, 45% {
      opacity: 0;
      transform: translateY(0);
    }
    50%, 95% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(0);
    }
  }
}