/* =========================================================
   HERO COMPLEXITY BACKGROUND
   homepage-for-ease — experimental SVG hero layer

   Z-index stack (hero section):
     base #000 bg .............. 0
     #hero-complexity-bg SVG ... 3   ← Phase 1 (vortex)
     #hero-image (hidden) ...... 10  ← suppressed via .hfe-page override
     #orbit-layer .............. 15
     #hero-text ................ 20
   ========================================================= */


/* ── SVG container ──────────────────────────────────────── */

#hero-complexity-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}


/* ── Cluster group — scroll-driven rotation/scale via JS ── */

#hcb-cluster {
  transform-origin: 50% 48.6%;   /* maps to ~(500, 340) in 1000×700 viewBox */
  transform-box: view-box;
  will-change: transform, opacity;
}


/* ── Per-layer ambient drift — independent CSS animations ─ */
/* Each layer drifts at its own tempo creating the
   "orchestrated complexity" depth effect.
   JS does NOT touch these elements, so no conflicts.        */

.hcb-l0 {
  transform-box: fill-box;
  transform-origin: center;
  animation: hcb-drift-0 108s ease-in-out infinite;
}
.hcb-l1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: hcb-drift-1 84s ease-in-out infinite;
}
.hcb-l2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: hcb-drift-2 68s ease-in-out infinite;
}
.hcb-l3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: hcb-drift-3 52s ease-in-out infinite;
}
.hcb-l4 {
  transform-box: fill-box;
  transform-origin: center;
  animation: hcb-drift-4 42s ease-in-out infinite;
}


/* ── Keyframes — gentle, non-mechanical drift ───────────── */
/* Values are intentionally small: 1.5–3px translate,
   0.15–0.40deg rotate. The layers are staggered in phase
   so they never move in sync — creating organic complexity.  */

@keyframes hcb-drift-0 {
  0%, 100% { transform: translate(0px,    0px)    rotate(0deg);    }
  28%      { transform: translate(-2px,  -1.5px)  rotate(-0.18deg); }
  62%      { transform: translate( 1.5px, 2px)    rotate( 0.14deg); }
}

@keyframes hcb-drift-1 {
  0%, 100% { transform: translate(0px,    0px)    rotate(0deg);    }
  22%      { transform: translate(-2.5px,-2px)    rotate(-0.22deg); }
  58%      { transform: translate( 2px,   2.5px)  rotate( 0.18deg); }
  80%      { transform: translate( 2.5px,-1px)    rotate( 0.26deg); }
}

@keyframes hcb-drift-2 {
  0%, 100% { transform: translate(0px,    0px)    rotate(0deg);    }
  18%      { transform: translate( 2px,  -2.5px)  rotate( 0.26deg); }
  52%      { transform: translate(-2.5px, 2px)    rotate(-0.22deg); }
  78%      { transform: translate(-1px,  -2px)    rotate(-0.10deg); }
}

@keyframes hcb-drift-3 {
  0%, 100% { transform: translate(0px,    0px)    rotate(0deg);    }
  34%      { transform: translate(-1.5px, 2.5px)  rotate(-0.28deg); }
  70%      { transform: translate( 2px,  -1.5px)  rotate( 0.36deg); }
}

@keyframes hcb-drift-4 {
  0%, 100% { transform: translate(0px,    0px)    rotate(0deg);    }
  44%      { transform: translate(-2px,  -2px)    rotate(-0.34deg); }
  74%      { transform: translate( 1.5px, 2px)    rotate( 0.30deg); }
}


/* ── Homepage-for-ease: light canvas + suppress hero image ── */

body.hfe-page #parallax-hero {
  background-color: #F4F6F7;
}

body.hfe-page #hero-image {
  display: none;
}


/* ── Reduced-motion: respect system preference ───────────── */

@media (prefers-reduced-motion: reduce) {
  .hcb-l0,
  .hcb-l1,
  .hcb-l2,
  .hcb-l3,
  .hcb-l4 {
    animation: none;
  }
}