/* ============================================================
   BASE.CSS — Extreme Background Layers & Global Effects
   ============================================================ */

/* ── Aurora Background — Hyper-Vibrant ── */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -10;
  background:
    radial-gradient(ellipse 140% 90% at 15% 25%, rgba(77, 166, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 75% 15%, rgba(180, 77, 255, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 85%, rgba(0, 255, 160, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 85% 55%, rgba(0, 229, 255, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 10% 65%, rgba(255, 92, 176, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 80% 90% at 40% 40%, rgba(125, 255, 0, 0.08) 0%, transparent 60%);
  animation: aurora-shift 4s ease-in-out infinite alternate;
}

@keyframes aurora-shift {
  0%   { opacity: 0.8;  filter: hue-rotate(0deg) saturate(1.2) brightness(1); }
  10%  { opacity: 1;    filter: hue-rotate(15deg) saturate(1.6) brightness(1.15); }
  20%  { opacity: 0.9;  filter: hue-rotate(30deg) saturate(1.5) brightness(1.1); }
  30%  { opacity: 1;    filter: hue-rotate(-20deg) saturate(1.7) brightness(1.2); }
  40%  { opacity: 0.85; filter: hue-rotate(-15deg) saturate(1.1) brightness(0.95); }
  50%  { opacity: 1;    filter: hue-rotate(60deg) saturate(1.8) brightness(1.1); }
  60%  { opacity: 0.95; filter: hue-rotate(45deg) saturate(1.6) brightness(1.05); }
  70%  { opacity: 0.9;  filter: hue-rotate(-35deg) saturate(1.4) brightness(1.15); }
  80%  { opacity: 0.9;  filter: hue-rotate(10deg) saturate(1.3) brightness(1); }
  90%  { opacity: 1;    filter: hue-rotate(80deg) saturate(1.9) brightness(1.2); }
  100% { opacity: 0.85; filter: hue-rotate(-5deg) saturate(1.2) brightness(0.98); }
}

/* ── Scanline Overlay — Dual Angle ── */
.bg-scanlines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(0, 229, 255, 0.015) 3px,
      rgba(0, 229, 255, 0.015) 5px
    );
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* ── Light Rays — Faster Rotation ── */
.bg-light-rays {
  position: fixed;
  inset: 0;
  z-index: -9;
  opacity: 0.15;
  background:
    repeating-linear-gradient(
      108deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.04) 35px,
      rgba(255, 255, 255, 0.04) 36px
    ),
    repeating-linear-gradient(
      -72deg,
      transparent,
      transparent 30px,
      rgba(200, 240, 255, 0.03) 30px,
      rgba(200, 240, 255, 0.03) 31px
    );
  animation: light-rays 8s linear infinite;
}

@keyframes light-rays {
  from { transform: rotate(0deg) scale(1.5); }
  to   { transform: rotate(360deg) scale(1.5); }
}

/* ── Data Stream Grid — Glowing Lines ── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -8;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
  filter: drop-shadow(0 0 3px var(--glow-cyan)) drop-shadow(0 0 6px var(--glow-blue));
}

/* ── Vignette ── */
.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: -7;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2, 2, 16, 0.8) 100%);
  pointer-events: none;
}

/* ── Canvas Layers ── */
.canvas-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.canvas-bg     { z-index: -6; }
.canvas-sparkle{ z-index: -5; }
.canvas-orbs   { z-index: -4; }

/* ── Section Base ── */
.section {
  position: relative;
  padding: var(--section-padding);
  overflow: hidden;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  margin-bottom: 20px;
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 30px rgba(77, 166, 255, 0.5),
    0 0 80px rgba(0, 229, 255, 0.4),
    0 0 150px rgba(180, 77, 255, 0.3),
    0 0 250px rgba(255, 92, 176, 0.2),
    0 0 400px rgba(125, 255, 0, 0.1);
}

.section-desc {
  font-size: 1.2rem;
  color: rgba(200, 220, 240, 0.65);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Glass Chip Badge — Always Rainbow, Always Glowing ── */
.glass-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(220, 245, 255, 0.9);
  margin-bottom: 24px;
  transition: all var(--transition-base);
  box-shadow:
    0 0 30px rgba(0, 229, 255, 0.3),
    0 0 60px rgba(180, 77, 255, 0.45),
    0 0 90px rgba(77, 166, 255, 0.3);
  z-index: 1;
}

.glass-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  padding: 1px;
  background: var(--grad-rainbow);
  background-size: 400% 400%;
  animation: rainbow-spin 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-chip:hover {
  background: var(--glass-bg-heavy);
  box-shadow:
    0 0 40px rgba(0, 229, 255, 0.5),
    0 0 80px rgba(180, 77, 255, 0.6),
    0 0 120px rgba(77, 166, 255, 0.4),
    0 0 180px rgba(255, 92, 176, 0.3);
}

.section-chip { margin-bottom: 20px; }

/* ── Section Glow Orbs — Bigger, Brighter ── */
.section-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  animation: section-glow-pulse 3s ease-in-out infinite alternate;
}

.section-glow--left {
  width: 600px; height: 600px;
  top: 5%; left: -250px;
  background: var(--glow-blue);
  opacity: 0.5;
}

.section-glow--right {
  width: 500px; height: 500px;
  top: 45%; right: -200px;
  background: var(--glow-purple);
  opacity: 0.5;
}

@keyframes section-glow-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 0.8; }
}

/* ── Chromatic Aberration Overlay ── */
.chromatic-aberration {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.12;
}

.chromatic-aberration::before,
.chromatic-aberration::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 80% at 20% 50%,
    rgba(255, 0, 0, 0.6) 0%,
    transparent 50%
  );
}

.chromatic-aberration::before {
  transform: translateX(3px);
  animation: chroma-drift-r 3s ease-in-out infinite alternate;
}

.chromatic-aberration::after {
  background: radial-gradient(
    ellipse 100% 80% at 80% 50%,
    rgba(0, 200, 255, 0.6) 0%,
    transparent 50%
  );
  transform: translateX(-3px);
  animation: chroma-drift-b 3s ease-in-out infinite alternate;
}

@keyframes chroma-drift-r {
  0%   { transform: translateX(2px); }
  100% { transform: translateX(5px); }
}

@keyframes chroma-drift-b {
  0%   { transform: translateX(-2px); }
  100% { transform: translateX(-5px); }
}