/* ═══════════════════════════════════════════════════════════════════════════
   Glow Effects — Atmospheric Depth Layer
   Orbs, ambient glows, mesh gradients, grid backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Glow Orb — reusable ambient light ── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  animation: orbFadeIn 1.5s ease forwards;
  will-change: transform;
}

.glow-orb--accent {
  background: radial-gradient(circle, var(--glow-accent-strong) 0%, transparent 70%);
}

.glow-orb--blue {
  background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%);
}

.glow-orb--warm {
  background: radial-gradient(circle, var(--glow-warm) 0%, transparent 70%);
}

/* Sizes */
.glow-orb--sm { width: 300px; height: 300px; }
.glow-orb--md { width: 500px; height: 500px; }
.glow-orb--lg { width: 700px; height: 700px; }
.glow-orb--xl { width: 900px; height: 900px; }

/* Drift animations — slow, organic movement */
.glow-orb--drift-1 { animation: orbFadeIn 1.5s ease forwards, orbDrift1 25s ease-in-out infinite 1.5s; }
.glow-orb--drift-2 { animation: orbFadeIn 1.5s ease forwards, orbDrift2 30s ease-in-out infinite 1.5s; }
.glow-orb--drift-3 { animation: orbFadeIn 1.5s ease forwards, orbDrift3 20s ease-in-out infinite 1.5s; }

@keyframes orbFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-15px, 25px) scale(0.95); }
  75% { transform: translate(20px, 15px) scale(1.02); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 30px) scale(1.03); }
  66% { transform: translate(35px, -15px) scale(0.97); }
}

@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(15px, -30px) scale(1.04); }
  40% { transform: translate(-20px, -10px) scale(0.98); }
  60% { transform: translate(25px, 20px) scale(1.02); }
  80% { transform: translate(-10px, 15px) scale(0.96); }
}

/* ── Section Ambient Mesh — applied via ::before/::after ── */
.section-mesh {
  position: relative;
  overflow: hidden;
}

.section-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Grid Background Pattern ── */
.grid-bg {
  position: relative;
}

.grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}

/* ── Section Divider Gradient ── */
.section-divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}

.section-divider--top {
  top: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}

.section-divider--bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
}

/* ── Glow Line — horizontal accent line with glow ── */
.glow-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent 100%
  );
  opacity: 0.3;
  position: relative;
}

.glow-line::after {
  content: "";
  position: absolute;
  inset: -4px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 86, 40, 0.4) 20%,
    rgba(212, 86, 40, 0.4) 80%,
    transparent 100%
  );
  filter: blur(8px);
  pointer-events: none;
}

/* ── Ambient Light — soft halo behind key elements ── */
.ambient-light {
  position: relative;
}

.ambient-light::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ambient-light:hover::before {
  opacity: 1;
}

/* ── Performance: reduce on mobile ── */
@media (max-width: 680px) {
  .glow-orb {
    filter: blur(60px);
    opacity: 0.6;
  }
  .glow-orb--lg,
  .glow-orb--xl {
    width: 400px;
    height: 400px;
  }
  .glow-orb--drift-1,
  .glow-orb--drift-2,
  .glow-orb--drift-3 {
    animation: orbFadeIn 1.5s ease forwards;
  }
  .grid-bg::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-orb {
    animation: none;
    opacity: 0.8;
  }
}