/* ============================================================
   FLEXING DATA — Homepage Animated Backgrounds
   Unified theme: floating gradient blobs + ambient effects
   Complements both Data Quiz (blue/coral) and AI Quiz (violet)
   ============================================================ */

/* Hero section - enhanced with floating blobs */
.hero {
  position: relative;
  overflow: hidden;
}

/* Primary blob - brand blue (Data theme accent) */
.hero::before {
  content: "";
  position: fixed;
  top: -15%;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at center, rgba(10, 150, 199, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(90px);
  animation: heroFloatTL 28s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

/* Secondary blob - coral (Data accent) */
.hero {
  --blob-coral-pos: after;
}

.hero::after {
  content: "";
  position: fixed;
  bottom: -20%;
  right: -8%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle at center, rgba(255, 122, 89, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(85px);
  animation: heroFloatBR 32s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

/* Tertiary blob - violet (AI theme accent) positioned right-center */
.hero .wrap {
  position: relative;
}

.hero .wrap::before {
  content: "";
  position: fixed;
  top: 35%;
  right: 10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle at center, rgba(124, 92, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: heroFloatMid 35s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

@keyframes heroFloatTL {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50px, -70px) scale(1.06);
  }
  50% {
    transform: translate(100px, 30px) scale(0.96);
  }
  75% {
    transform: translate(40px, 70px) scale(1.03);
  }
}

@keyframes heroFloatBR {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-60px, 50px) scale(0.98);
  }
  50% {
    transform: translate(-110px, -40px) scale(1.05);
  }
  75% {
    transform: translate(-45px, -80px) scale(1.02);
  }
}

@keyframes heroFloatMid {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(60px, -60px) scale(1.04);
  }
  50% {
    transform: translate(-60px, 50px) scale(0.99);
  }
  75% {
    transform: translate(50px, 80px) scale(1.03);
  }
}

/* Ensure content stays above animations */
.hero > .wrap {
  position: relative;
  z-index: 2;
}

/* Ambient glow pulse for entire hero section */
@keyframes heroAmbientPulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.02) saturate(1.01);
  }
}

.hero {
  animation: heroAmbientPulse 10s ease-in-out infinite;
}

/* ── Path Split Section (Data vs AI decision) ────────────── */
.path-wrap {
  position: relative;
  overflow: visible;
}

/* Subtle background glow behind the dual-path cards */
.path-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at center, rgba(10, 150, 199, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(75px);
  animation: pathFloatLeft 30s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.path-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at center, rgba(124, 92, 255, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(75px);
  animation: pathFloatRight 28s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

@keyframes pathFloatLeft {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -50px) scale(1.04);
  }
}

@keyframes pathFloatRight {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-40px, 50px) scale(0.99);
  }
}

/* Ensure cards stay above background animations */
.path-split {
  position: relative;
  z-index: 1;
}

/* ── Assessment Section (Dark blue section) ────────────── */
.assess {
  position: relative;
  overflow: hidden;
}

/* Subtle animated accent blob */
.assess::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at center, rgba(255, 122, 89, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: assessFloat 40s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes assessFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-80px, 60px) scale(1.05);
  }
  50% {
    transform: translate(50px, -80px) scale(0.97);
  }
  75% {
    transform: translate(-50px, -60px) scale(1.03);
  }
}

/* Ensure assessment content stays above blob */
.assess > * {
  position: relative;
  z-index: 1;
}

/* ── Challenge Section ────────────────────────────────── */
.challenge {
  position: relative;
  overflow: hidden;
}

/* Animated accent for challenge section */
.challenge::before {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -12%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at center, rgba(124, 92, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(90px);
  animation: challengeFloat 38s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

@keyframes challengeFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(70px, -70px) scale(1.04);
  }
  50% {
    transform: translate(-90px, 60px) scale(0.98);
  }
  75% {
    transform: translate(60px, 80px) scale(1.02);
  }
}

.challenge > * {
  position: relative;
  z-index: 1;
}

/* ── General section animations ────────────────────────── */
@keyframes sectionGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.01);
  }
}

.section {
  animation: sectionGlow 12s ease-in-out infinite;
}

/* ── Floating particle effect ──────────────────────────── */
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) translateX(0);
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) translateX(100px);
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero .wrap::before,
  .path-wrap::before,
  .path-wrap::after,
  .assess::before,
  .challenge::before {
    animation: none !important;
  }

  .hero,
  .section {
    animation: none !important;
  }
}

/* ── Responsive adjustments ────────────────────────────── */
@media (max-width: 1200px) {
  .hero::before {
    width: 600px;
    height: 600px;
  }

  .hero::after {
    width: 550px;
    height: 550px;
  }

  .hero .wrap::before {
    width: 450px;
    height: 450px;
  }
}

@media (max-width: 768px) {
  .hero::before {
    width: 450px;
    height: 450px;
    top: -25%;
    left: -20%;
  }

  .hero::after {
    width: 400px;
    height: 400px;
    bottom: -30%;
    right: -20%;
  }

  .hero .wrap::before {
    width: 350px;
    height: 350px;
    right: 5%;
    top: 40%;
  }

  .path-wrap::before,
  .path-wrap::after {
    width: 350px;
    height: 350px;
  }

  .assess::before {
    width: 400px;
    height: 400px;
  }

  .challenge::before {
    width: 450px;
    height: 450px;
  }

  /* Slower animations on mobile for battery efficiency */
  @keyframes heroFloatTL {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(25px, -35px) scale(1.03); }
    50% { transform: translate(50px, 15px) scale(0.98); }
    75% { transform: translate(20px, 35px) scale(1.01); }
  }

  @keyframes heroFloatBR {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-30px, 25px) scale(0.99); }
    50% { transform: translate(-55px, -20px) scale(1.02); }
    75% { transform: translate(-22px, -40px) scale(1.01); }
  }

  @keyframes heroFloatMid {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.02); }
    50% { transform: translate(-30px, 25px) scale(0.99); }
    75% { transform: translate(25px, 40px) scale(1.01); }
  }
}

@media (max-width: 480px) {
  .hero::before {
    width: 350px;
    height: 350px;
  }

  .hero::after {
    width: 320px;
    height: 320px;
  }

  .hero .wrap::before {
    width: 280px;
    height: 280px;
  }
}

/* ── Ultra-wide screens ────────────────────────────────── */
@media (min-width: 1800px) {
  .hero::before {
    width: 850px;
    height: 850px;
  }

  .hero::after {
    width: 800px;
    height: 800px;
  }

  .hero .wrap::before {
    width: 750px;
    height: 750px;
  }
}

/* Prevent pointer events on background animations */
.hero::before,
.hero::after,
.hero .wrap::before,
.path-wrap::before,
.path-wrap::after,
.assess::before,
.challenge::before {
  pointer-events: none;
}

/* ============================================================
   HERO: interactive Data/AI background  (homepage only)
   ------------------------------------------------------------
   An always-on canvas neural network + floating keyword chips.
   The network (.hfx-net) is drawn by assets/js/hero-fx.js and is
   ALWAYS visible + gently drifting; the cursor acts as a gravity well
   that the neurons swirl around. The chips are visible at all times
   and just pop + reveal their blurb on hover / when the cursor nears.

   Layers inside .hero-fx (all behind the page content):
     .hfx-net   — the living neural-network canvas (JS-drawn)
     .tech-chip — floating keyword pills, always visible; they lift,
                  glow and reveal a one-line blurb on hover / near
   ============================================================ */

/* ---- the living neural-network canvas (always drifting; the cursor is a
   gravity well the neurons swirl around — drawn by hero-fx.js). Fades softly
   into the page at the bottom. ---- */
.hfx-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}

/* ---- floating tech keyword chips ---- */
.tech-chip {
  pointer-events: auto;            /* re-enable JUST the chips for hover */
  transition: opacity .3s ease;
  animation: hfxFloat 16s ease-in-out infinite;
  will-change: transform;
}
/* Always clearly visible (no need to hover to find them). Scoped to .hero-fx so
   it out-specifies the inline anti-flash `.tech-chip{opacity:0}` guard in the
   <style> block — which would otherwise keep the chips hidden at rest. */
.hero-fx .tech-chip { opacity: .92; }
.hero-fx .tech-chip:hover,
.hero-fx .tech-chip.is-near { opacity: 1; }

.tc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: .01em;
  padding: 6px 14px 6px 7px;
  border-radius: 99px;
  white-space: nowrap;
  color: #0a7ba6;                  /* brand blue (data) */
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(24, 34, 47, .10);
  box-shadow: 0 10px 26px -16px rgba(15, 42, 64, .4);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.tech-chip.ai .tc-pill { color: #5a3fd6; } /* violet (AI) */

/* lit state — direct hover OR cursor-near (JS adds .is-near) */
.tech-chip:hover .tc-pill,
.tech-chip.is-near .tc-pill {
  background: #fff;
  box-shadow: 0 20px 40px -14px rgba(15, 42, 64, .55);
}
.tech-chip.data:hover .tc-pill,
.tech-chip.data.is-near .tc-pill { border-color: rgba(10, 150, 199, .6); }
.tech-chip.ai:hover .tc-pill,
.tech-chip.ai.is-near .tc-pill { border-color: rgba(124, 92, 255, .6); }
/* CSS-only lift — the no-JS / reduced-motion fallback. When JS magnetism is
   active it sets an inline transform on .tc-pill, which overrides this. */
.tech-chip:hover .tc-pill { transform: translateY(-3px) scale(1.06); }

/* the one-line blurb each chip "says", opening toward the page edge */
.tc-desc {
  position: absolute; top: calc(100% + 9px);
  width: max-content; max-width: 200px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 12px; line-height: 1.35;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(24, 34, 47, .1);
  border-radius: 12px; padding: 7px 11px;
  box-shadow: 0 16px 34px -18px rgba(15, 42, 64, .55);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: #0a5f80;
  opacity: 0; transform: translateY(-5px) scale(.96);
  transition: opacity .26s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.tech-chip.ai .tc-desc { color: #4a32c0; }
.tc-left  .tc-desc { right: 0; left: auto; text-align: right; transform-origin: top right; }
.tc-right .tc-desc { left: 0; right: auto; text-align: left;  transform-origin: top left; }
.tech-chip:hover .tc-desc,
.tech-chip.is-near .tc-desc { opacity: 1; transform: none; }

/* icon tile — matches the .mdv-icon look inside the hero cards */
.tc-ic {
  width: 21px; height: 21px; flex-shrink: 0;
  border-radius: 6px; background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 34, 47, .08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; overflow: hidden;
}
.tc-ic img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 2px; }

/* keep every chip OUTSIDE the centred content column (cards ~960px wide),
   so they only ever live in the side margins */
.tc-left  { right: calc(50% + 500px); left: auto; }
.tc-right { left:  calc(50% + 500px); right: auto; }

/* vertical placement + staggered float timing */
.tc-sql     { top: 17%; animation-delay: 0s;   animation-duration: 15s; }
.tc-powerbi { top: 43%; animation-delay: 2.2s; animation-duration: 18s; }
.tc-aws     { top: 69%; animation-delay: 3.4s; animation-duration: 17s; }
.tc-python  { top: 13%; animation-delay: 1.1s; animation-duration: 19s; }
.tc-genai   { top: 34%; animation-delay: 2.7s; animation-duration: 16s; }
.tc-agents  { top: 55%; animation-delay: .6s;  animation-duration: 20s; }
.tc-rag     { top: 76%; animation-delay: 1.8s; animation-duration: 15s; }

@keyframes hfxFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1deg); }
}

/* Reduced motion: drop ONLY the autoplay drift. The cursor glow and the
   hover / cursor-near reactions stay fully alive (they're interaction, not
   autoplay), so the hero is still mouse-friendly with "reduce motion" on. */
@media (prefers-reduced-motion: reduce) {
  /* the canvas network keeps animating on purpose (see hero-fx.js); only the
     small CSS chip-bob is paused for reduced motion */
  .tech-chip { animation: none !important; }
}

/* Only show the chips where there's genuine margin room (wide screens). */
@media (max-width: 1200px) {
  .hero-fx .tech-chip { display: none; }
}