/* GrowZoon FX layer — animated gradient backgrounds + motion (added 2026-09-28).
   Brand-safe: dark base + lime glow. Respects prefers-reduced-motion. */

/* ---------- animated aurora background ---------- */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 18% 12%, rgba(189,236,44,.14), transparent 62%),
    radial-gradient(48vmax 48vmax at 85% 22%, rgba(64,120,40,.16), transparent 64%),
    radial-gradient(55vmax 55vmax at 70% 88%, rgba(139,92,246,.10), transparent 66%),
    radial-gradient(40vmax 40vmax at 12% 82%, rgba(189,236,44,.07), transparent 60%);
  animation:gz-aurora 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes gz-aurora{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(4vmax,-3vmax,0) scale(1.08) rotate(4deg)}
  100%{transform:translate3d(-4vmax,3vmax,0) scale(1.04) rotate(-4deg)}
}

/* ---------- hero glow ---------- */
.hero{position:relative}
.hero::after{
  content:""; position:absolute; inset:-40px -20px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%, rgba(189,236,44,.10), transparent 70%);
  animation:gz-breathe 7s ease-in-out infinite;
}
@keyframes gz-breathe{0%,100%{opacity:.7}50%{opacity:1}}

/* ---------- scroll reveal (JS adds .in) ---------- */
.gz-reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.gz-reveal.in{opacity:1; transform:none}

/* ---------- cards: lift + lime glow on hover ---------- */
.card{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease}
.card:hover{transform:translateY(-6px); border-color:rgba(189,236,44,.45)!important;
  box-shadow:0 18px 50px -18px rgba(189,236,44,.28), 0 8px 24px rgba(0,0,0,.45)}

/* ---------- buttons: shine sweep ---------- */
.btn{position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 30px -10px rgba(189,236,44,.5)}
.btn::after{content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease}
.btn:hover::after{left:130%}

/* ---------- gradient text accents ---------- */
.eyebrow{background:linear-gradient(90deg,#bdec2c,#7fd4a8,#bdec2c); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gz-shine 6s linear infinite}
@keyframes gz-shine{to{background-position:200% center}}

/* ---------- stats count-up pop ---------- */
.stat b{display:inline-block; transition:transform .3s ease}
.stat:hover b{transform:scale(1.12); color:#bdec2c}

/* ---------- section headings drift-in underline ---------- */
.section h2{position:relative}
.section h2::after{content:""; position:absolute; left:0; bottom:-10px; height:3px; width:0;
  background:linear-gradient(90deg,#bdec2c,transparent); border-radius:2px; transition:width .8s ease .15s}
.gz-reveal.in .section h2::after, .section.gz-reveal.in h2::after{width:72px}

/* ---------- play buttons pulse ---------- */
.play{animation:gz-pulse 2.6s ease-in-out infinite}
@keyframes gz-pulse{0%,100%{transform:scale(1); opacity:.92}50%{transform:scale(1.1); opacity:1}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body::before,.hero::after,.eyebrow,.play{animation:none!important}
  .gz-reveal{opacity:1; transform:none; transition:none}
  .card,.btn{transition:none}
}