/* ==========================================================================
   ARC — Aurora Gradient Background
   Apple-inspired glassmorphism aurora — smooth animated gradient blobs.
   Brand palette: Navy #022f52 + Teal #2bb8c6 + subtle accents.
   CSS-only, lightweight, mobile-friendly, fixed background layer.
   ========================================================================== */

/* ---------- Aurora root container ---------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #022f52; /* dark Navy base so blobs have depth */
}

/* Deep gradient base — gives the aurora a night-sky canvas */
.aurora-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(2, 47, 82, 0.6), transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(2, 47, 82, 0.9), transparent 75%),
    linear-gradient(160deg, #021a30 0%, #022f52 45%, #021f38 100%);
}

/* Subtle starfield/noise texture for premium feel — pure CSS, no image */
.aurora-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.3), transparent);
  background-size: 250px 250px;
  background-repeat: repeat;
}

/* ---------- Aurora blobs ---------- */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* Blob 1 — Teal (brand primary) — top-left, slow drift */
.aurora-blob--1 {
  width: 600px;
  height: 600px;
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(43, 184, 198, 0.55), transparent 65%);
  animation: auroraDrift1 22s ease-in-out infinite alternate;
}

/* Blob 2 — Navy (brand primary) — right side, medium drift */
.aurora-blob--2 {
  width: 520px;
  height: 520px;
  top: 35%;
  right: -140px;
  background: radial-gradient(circle, rgba(2, 47, 82, 0.7), transparent 60%);
  animation: auroraDrift2 28s ease-in-out infinite alternate;
  animation-delay: -6s;
}

/* Blob 3 — Cyan accent — bottom-center, slow rise */
.aurora-blob--3 {
  width: 700px;
  height: 700px;
  bottom: -200px;
  left: 25%;
  background: radial-gradient(circle, rgba(43, 184, 198, 0.35), transparent 65%);
  animation: auroraDrift3 32s ease-in-out infinite alternate;
  animation-delay: -12s;
}

/* Blob 4 — Subtle purple/blue accent — upper-right, gentle sway */
.aurora-blob--4 {
  width: 450px;
  height: 450px;
  top: 10%;
  right: 15%;
  background: radial-gradient(circle, rgba(90, 130, 255, 0.3), transparent 60%);
  animation: auroraDrift4 26s ease-in-out infinite alternate;
  animation-delay: -3s;
}

/* Blob 5 — Subtle cyan-green — lower-left, slow pulse */
.aurora-blob--5 {
  width: 380px;
  height: 380px;
  bottom: 15%;
  left: 8%;
  background: radial-gradient(circle, rgba(72, 209, 204, 0.28), transparent 60%);
  animation: auroraDrift5 30s ease-in-out infinite alternate;
  animation-delay: -9s;
}

/* ---------- Keyframes — smooth, organic Northern-Lights drift ---------- */
@keyframes auroraDrift1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%  { transform: translate(120px, 60px) scale(1.15); opacity: 1; }
  100% { transform: translate(60px, 100px) scale(1.05); opacity: 0.7; }
}

@keyframes auroraDrift2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50%  { transform: translate(-100px, 80px) scale(1.1); opacity: 0.7; }
  100% { transform: translate(-60px, -50px) scale(1.2); opacity: 1; }
}

@keyframes auroraDrift3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { transform: translate(80px, -120px) scale(1.2); opacity: 0.9; }
  100% { transform: translate(-40px, -80px) scale(1.1); opacity: 0.5; }
}

@keyframes auroraDrift4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%  { transform: translate(-80px, 60px) scale(1.15); opacity: 0.8; }
  100% { transform: translate(40px, 100px) scale(1.05); opacity: 0.6; }
}

@keyframes auroraDrift5 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%  { transform: translate(100px, -60px) scale(1.2); opacity: 0.8; }
  100% { transform: translate(-60px, -100px) scale(1.1); opacity: 0.6; }
}

/* ---------- Aurora "curtain" shimmer overlay ---------- */
/* A very subtle moving gradient veil on top of blobs — gives the aurora
   ribbon-like shimmer without extra DOM nodes. */
.aurora-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(43, 184, 198, 0.06) 45%,
    rgba(90, 130, 255, 0.05) 55%,
    transparent 70%
  );
  background-size: 300% 300%;
  animation: auroraVeil 18s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes auroraVeil {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- Performance: reduce blur on mobile ---------- */
@media (max-width: 768px) {
  .aurora-blob {
    filter: blur(60px);
  }
  .aurora-blob--1 { width: 400px; height: 400px; }
  .aurora-blob--2 { width: 360px; height: 360px; }
  .aurora-blob--3 { width: 480px; height: 480px; }
  .aurora-blob--4 { width: 300px; height: 300px; }
  .aurora-blob--5 { width: 260px; height: 260px; }
}

@media (max-width: 480px) {
  .aurora-blob {
    filter: blur(45px);
  }
  .aurora-blob--4,
  .aurora-blob--5 { display: none; } /* fewer blobs on small screens */
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob,
  .aurora-veil {
    animation: none;
  }
  .aurora-blob { opacity: 0.7; }
}

/* ==========================================================================
   Section transparency overrides — let aurora glow through
   ==========================================================================
   The aurora sits at z-index: -2 (fixed). For it to be visible, the
   sections above it need semi-transparent backgrounds. We keep them
   dark enough for text legibility but translucent enough for the
   aurora to bleed through as an ambient glow. Light sections
   (.section-light) stay opaque — the aurora is a dark-sky effect.
   ========================================================================== */

/* Hero: fully transparent base, semi-transparent gradient veil on top */
.hero {
  background: transparent;
}
.hero::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(20, 90, 50, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212, 168, 67, 0.10), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(12, 26, 46, 0.3), transparent 60%),
    linear-gradient(160deg, rgba(10, 46, 26, 0.82) 0%, rgba(15, 61, 36, 0.75) 40%, rgba(12, 26, 46, 0.8) 100%);
}

/* Dark sections: translucent so aurora peeks through between content */
.section-dark {
  background: rgba(10, 46, 26, 0.88);
}

/* CTA banner: translucent */
.cta-banner {
  background: rgba(10, 46, 26, 0.9);
}

/* Footer: keep mostly opaque (bottom of page, aurora less critical)
   but add slight translucency for cohesion */
.footer {
  background: rgba(2, 31, 58, 0.95);
}

/* Page headers (interior pages) — same treatment as hero */
.page-header {
  background: transparent;
}
.page-header::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(20, 90, 50, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(212, 168, 67, 0.10), transparent 50%),
    linear-gradient(160deg, rgba(10, 46, 26, 0.82), rgba(15, 61, 36, 0.75) 50%, rgba(12, 26, 46, 0.8));
}

/* Body background: transparent so the fixed aurora shows in gaps
   between sections and at the very top/bottom of scroll */
body {
  background: transparent;
}