/* ============================================================
   Shared animated hero background system
   Apply class `has-animated-bg` to any <section> hero, then add
   four sibling divs inside it (before the content):
     <div class="anim-bg"><img src="..."></div>
     <div class="anim-spotlight"></div>
     <div class="anim-particles" data-particles></div>
     <div class="anim-overlay"></div>
   ============================================================ */

.has-animated-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Force dark hero background regardless of theme — pages must look
     identical whether prefers-color-scheme is light or dark. */
  background: #08090a !important;
  color: #f5f5f7;
}

/* Ensure heading/body text remains light over the dark animated bg. */
.has-animated-bg h1,
.has-animated-bg h2,
.has-animated-bg h3,
.has-animated-bg p,
.has-animated-bg .page-hero-eyebrow,
.has-animated-bg .contact-hero-eyebrow,
.has-animated-bg .lp-hero-eyebrow {
  color: #f5f5f7;
}

.has-animated-bg .anim-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.has-animated-bg .anim-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: animBgKenBurns 14s ease-in-out infinite alternate,
             animBgGlowPulse 6s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes animBgKenBurns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, 1%); }
  100% { transform: scale(1.14) translate(-2.5%, -1.5%); }
}

@keyframes animBgGlowPulse {
  0%, 100% { filter: brightness(0.9) saturate(1.15); }
  50%      { filter: brightness(1.15) saturate(1.4); }
}

/* Drifting purple spotlight */
.has-animated-bg .anim-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle 450px at 50% 50%,
    rgba(124, 140, 255, 0.40) 0%,
    rgba(99, 102, 241, 0.18) 30%,
    transparent 65%);
  mix-blend-mode: screen;
  animation: animBgSpotlightDrift 15s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes animBgSpotlightDrift {
  0%   { transform: translate(-25%, -15%); }
  25%  { transform: translate(20%, -10%); }
  50%  { transform: translate(25%, 15%); }
  75%  { transform: translate(-15%, 20%); }
  100% { transform: translate(-25%, -15%); }
}

/* Floating particles — above overlay, below content */
.has-animated-bg .anim-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.has-animated-bg .anim-particles span {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  background: #a5b4ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #7c8cff, 0 0 20px rgba(124, 140, 255, 0.75);
  animation: animBgParticleFloat linear infinite;
}

@keyframes animBgParticleFloat {
  0%   { transform: translateY(0)     translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}

/* Dark overlay between bg layers and content for legibility */
.has-animated-bg .anim-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Layered: centered radial scrim darkens behind text + top/bottom
     linear gradient blends into surrounding sections. */
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%,
      rgba(8, 9, 10, 0.78) 0%,
      rgba(8, 9, 10, 0.55) 45%,
      rgba(8, 9, 10, 0.15) 80%,
      rgba(8, 9, 10, 0) 100%),
    linear-gradient(180deg,
      rgba(8, 9, 10, 0.55) 0%,
      rgba(8, 9, 10, 0.30) 40%,
      rgba(8, 9, 10, 0.85) 100%);
  pointer-events: none;
}

/* Keep content above all background layers.
   Targets the most common direct children used in hero sections. */
.has-animated-bg > .container,
.has-animated-bg > .contact-hero-inner,
.has-animated-bg .page-hero-content,
.has-animated-bg .contact-hero-inner,
.has-animated-bg .lp-hero-inner,
.has-animated-bg .about-hero-content,
.has-animated-bg .container,
.has-animated-bg .hero-stats,
.has-animated-bg .hero-badge,
.has-animated-bg .hero-title,
.has-animated-bg .hero-sub,
.has-animated-bg .gradient-text {
  position: relative;
  z-index: 4;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .has-animated-bg .anim-bg img,
  .has-animated-bg .anim-spotlight {
    animation: none !important;
  }
}