/* ============================================
   ANIMATED BACKGROUND SYSTEM
   Premium breathing background with performance in mind
   ============================================ */

/* ============================================
   AURORA KEYFRAMES - Slow drift animations
   ============================================ */
@keyframes auroraFloat1 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate3d(5%, -3%, 0) rotate(3deg) scale(1.02);
  }
  50% {
    transform: translate3d(-3%, 5%, 0) rotate(-2deg) scale(0.98);
  }
  75% {
    transform: translate3d(-5%, -2%, 0) rotate(2deg) scale(1.01);
  }
}

@keyframes auroraFloat2 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate3d(-4%, 4%, 0) rotate(-3deg) scale(1.03);
  }
  66% {
    transform: translate3d(4%, -3%, 0) rotate(4deg) scale(0.97);
  }
}

@keyframes auroraFloat3 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate3d(3%, 4%, 0) rotate(2deg) scale(1.01);
  }
  40% {
    transform: translate3d(-4%, 2%, 0) rotate(-3deg) scale(0.99);
  }
  60% {
    transform: translate3d(2%, -4%, 0) rotate(3deg) scale(1.02);
  }
  80% {
    transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(0.98);
  }
}

/* ============================================
   SHEEN KEYFRAMES - One-time sweep
   ============================================ */
@keyframes sheenSweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
    opacity: 0;
  }
}

/* ============================================
   SPOTLIGHT PULSE - Subtle breathing
   ============================================ */
@keyframes spotlightPulse {
  0%, 100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.12;
  }
}

/* ============================================
   LAYER BASE CLASSES
   ============================================ */
.bg-layer-base {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-layer-relative {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ============================================
   AURORA LAYERS
   ============================================ */
.aurora-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  overflow: hidden;
  /* PERFORMANCE: Isolate entire aurora system */
  contain: strict;
  transform: translateZ(0);
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  /* PERFORMANCE: GPU compositing for animations */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* PERFORMANCE: Isolate each blob's repaints */
  contain: layout style paint;
}

.aurora-blob-1 {
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  top: -20%;
  left: -10%;
  background: radial-gradient(
    circle,
    oklch(0.45 0.03 250 / 0.22) 0%,
    oklch(0.35 0.02 250 / 0.12) 50%,
    transparent 70%
  );
  animation: auroraFloat1 60s ease-in-out infinite;
}

.aurora-blob-2 {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  top: 30%;
  right: -15%;
  background: radial-gradient(
    circle,
    oklch(0.50 0.04 280 / 0.20) 0%,
    oklch(0.40 0.03 280 / 0.10) 50%,
    transparent 70%
  );
  animation: auroraFloat2 68s ease-in-out infinite;
}

.aurora-blob-3 {
  width: 55vw;
  height: 55vw;
  max-width: 750px;
  max-height: 750px;
  bottom: -25%;
  left: 20%;
  background: radial-gradient(
    circle,
    oklch(0.40 0.025 260 / 0.18) 0%,
    oklch(0.30 0.02 260 / 0.08) 50%,
    transparent 70%
  );
  animation: auroraFloat3 74s ease-in-out infinite;
}

/* Dark mode aurora adjustments */
.dark .aurora-blob-1 {
  background: radial-gradient(
    circle,
    oklch(0.35 0.04 250 / 0.25) 0%,
    oklch(0.25 0.03 250 / 0.15) 50%,
    transparent 70%
  );
}

.dark .aurora-blob-2 {
  background: radial-gradient(
    circle,
    oklch(0.40 0.05 280 / 0.22) 0%,
    oklch(0.30 0.04 280 / 0.12) 50%,
    transparent 70%
  );
}

.dark .aurora-blob-3 {
  background: radial-gradient(
    circle,
    oklch(0.30 0.035 260 / 0.20) 0%,
    oklch(0.20 0.025 260 / 0.10) 50%,
    transparent 70%
  );
}

/* ============================================
   NOISE LAYER - PERFORMANCE OPTIMIZED
   ============================================ */
.noise-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  /* PERFORMANCE: Isolate noise layer */
  contain: strict;
  transform: translateZ(0);
}

/* ============================================
   VIGNETTE LAYER - PERFORMANCE OPTIMIZED
   ============================================ */
.vignette-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    transparent 0%,
    transparent 50%,
    oklch(0.13 0.01 250 / 0.3) 100%
  );
  /* PERFORMANCE: Isolate vignette layer */
  contain: strict;
  transform: translateZ(0);
}

.dark .vignette-layer {
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    transparent 0%,
    transparent 50%,
    oklch(0.05 0.01 250 / 0.5) 100%
  );
}

/* ============================================
   SPOTLIGHT OVERLAY (Hero only)
   ============================================ */
.spotlight-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  --mx: 50%;
  --my: 50%;
}

.spotlight-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx) var(--my),
    oklch(0.95 0.005 250 / 0.10) 0%,
    transparent 60%
  );
  mix-blend-mode: overlay;
  opacity: 0.1;
  transition: opacity 0.3s ease;
}

.dark .spotlight-gradient {
  background: radial-gradient(
    600px circle at var(--mx) var(--my),
    oklch(0.85 0.01 250 / 0.12) 0%,
    transparent 60%
  );
}

/* ============================================
   GRID OVERLAY (Sections)
   ============================================ */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  --gy: 0px;
}

.grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(to right, oklch(0.60 0.01 250 / 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.60 0.01 250 / 0.5) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: translateY(var(--gy));
  will-change: transform;
}

.dark .grid-pattern {
  background-image:
    linear-gradient(to right, oklch(0.40 0.01 250 / 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.40 0.01 250 / 0.4) 1px, transparent 1px);
}

/* Sheen effect */
.grid-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.grid-sheen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    oklch(0.95 0.005 250 / 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%) skewX(-15deg);
  opacity: 0;
}

.grid-sheen.animate::after {
  animation: sheenSweep 1s ease-out forwards;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob,
  .aurora-blob-1,
  .aurora-blob-2,
  .aurora-blob-3 {
    animation: none !important;
  }

  .spotlight-gradient {
    --mx: 50% !important;
    --my: 50% !important;
  }

  .grid-pattern {
    --gy: 0px !important;
  }

  .grid-sheen::after {
    animation: none !important;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 767px) {
  /* PERFORMANCE: Reduce blur intensity on mobile - major TBT improvement */
  .aurora-blob {
    filter: blur(80px);
    animation-duration: 90s !important; /* Slower = less CPU */
  }

  .aurora-blob-1 {
    width: 60vw;
    height: 60vw;
    opacity: 0.6;
  }

  .aurora-blob-2 {
    width: 50vw;
    height: 50vw;
    opacity: 0.5;
  }

  /* PERFORMANCE: Hide third blob on mobile to reduce rendering */
  .aurora-blob-3 {
    display: none;
  }

  .spotlight-gradient {
    display: none;
  }

  .grid-pattern {
    --gy: 0px !important;
    display: none; /* PERFORMANCE: Hide grid on mobile */
  }

  /* PERFORMANCE: Reduce noise layer opacity on mobile */
  .noise-layer {
    opacity: 0.04;
  }

  /* PERFORMANCE: Simplify vignette on mobile */
  .vignette-layer {
    background: radial-gradient(
      ellipse 90% 70% at 50% 50%,
      transparent 0%,
      transparent 60%,
      oklch(0.13 0.01 250 / 0.2) 100%
    );
  }

  /* CRITICAL: Disable grain texture overlay - SVG filter is expensive */
  .bg-grain::after {
    display: none !important;
  }

  /* CRITICAL: Disable ambient light effect - radial gradients are heavy */
  .bg-ambient::before {
    display: none !important;
  }

  /* CRITICAL: Disable breathing animation on mobile */
  .bg-breath.bg-ambient::before {
    animation: none !important;
  }
}

/* ========================================
   BACKGROUND EFFECTS (deferred from globals.css)
   These are cosmetic overlays loaded non-blocking
   ======================================== */

/* Grain texture overlay - isolated layer */
.bg-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  contain: strict;
  will-change: auto;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .bg-grain::after {
    opacity: 0.025;
  }
}

/* Ambient light effect - isolated layer */
.bg-ambient::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(138,146,158,0.16) 0%, transparent 60%),
    radial-gradient(700px 420px at 75% 40%, rgba(100,116,139,0.12) 0%, transparent 62%),
    radial-gradient(1200px 700px at 50% 70%, rgba(255,255,255,0.04), transparent 70%);
  contain: strict;
  transform: translateZ(0);
}

/* Breathing effect - subtle opacity pulse */
@keyframes ambientBreath {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.bg-breath.bg-ambient::before {
  animation: ambientBreath 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg-breath.bg-ambient::before {
    animation: none;
  }
}

/* Low performance: disable bg effects */
:root.low-performance .bg-grain::after,
:root.low-performance .bg-ambient::before {
  display: none !important;
}

:root.low-performance .bg-breath.bg-ambient::before {
  animation: none !important;
}