/* ══════════════════════════════════════════════════════════════
   ANIMATIONS · keyframes, reveals, hero environment
   ══════════════════════════════════════════════════════════════ */

/* ── keyframes ── */
@keyframes shine{to{left:135%}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(49,218,35,.55)}70%{box-shadow:0 0 0 12px rgba(49,218,35,0)}100%{box-shadow:0 0 0 0 rgba(49,218,35,0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floaty-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}
@keyframes walk{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-60px)}}
@keyframes rise{0%{transform:translateY(30px) scale(.4);opacity:0}30%{opacity:.5}100%{transform:translateY(-40px) scale(1);opacity:0}}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* ── loader ── */
.loader{position:fixed;inset:0;z-index:800;display:grid;place-items:center;background:var(--white);
  transition:opacity .6s var(--ease),visibility .6s}
.loader__inner{display:flex;flex-direction:column;align-items:center;justify-content:center}
.loader.done{opacity:0;visibility:hidden}
.loader__turtle{animation:walk 1.05s ease-in-out infinite;width:92px;height:92px;border-radius:24px;
  background:var(--grad-green);display:grid;place-items:center;
  box-shadow:0 14px 34px -12px rgba(49,218,35,.6)}
.loader__turtle img{width:58px;height:58px;display:block}
.loader__bar{width:150px;height:5px;border-radius:5px;background:var(--green-soft);margin:1.4rem auto 0;overflow:hidden}
.loader__bar i{display:block;height:100%;width:38%;border-radius:5px;background:var(--grad-green);
  animation:load 1.1s ease-in-out infinite}

/* ── marquees ── */
.ticker{background:var(--grad-green);overflow:hidden;white-space:nowrap;position:relative;z-index:250}
.ticker__track{display:inline-flex;animation:marquee 36s linear infinite;padding:.55rem 0;
  font-weight:900;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.ticker__track span{padding:0 1.3rem}
.ticker__track span::after{content:"🐢";margin-left:1.3rem}
.strip__track{animation:marquee 30s linear infinite}

/* Respect motion preferences without changing the visual system. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* ── floating elements ── */
[data-float]{animation:floaty 7s ease-in-out infinite;will-change:transform}
.split__art [data-float]{animation-duration:8s}
.cta__turtle--l{animation:floaty 6.5s ease-in-out infinite}
.cta__turtle--r{animation:floaty 7.5s ease-in-out .6s infinite}
.foot__egg{animation:floaty-sm 8s ease-in-out infinite}

/* ══ HERO ENVIRONMENT ══ */
.hero__env{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__bg{position:absolute;inset:-3% -2% 0;background:url("../img/hero-bg.webp") center top/cover no-repeat;
  will-change:transform}
/* soft light scrim up top so the headline stays readable over the sky */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 60% at 50% 22%,rgba(255,255,255,.55),transparent 60%)}
/* fade the illustration into the page so the stats sit cleanly (kept gentle to preserve the pond) */
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35) 70%,rgba(255,255,255,.85))}
.hero__particles{position:absolute;inset:0;z-index:1}
.hero__particles i{position:absolute;bottom:30%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff8b0,rgba(255,240,120,.2));opacity:0;animation:rise linear infinite;
  box-shadow:0 0 6px rgba(255,240,150,.6)}

/* ── reveal ── */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
.hero__title .line>span{transform:translateY(110%);transition:transform .9s var(--ease-out)}
.hero__title .line.in>span{transform:none}

/* ── tilt / magnetic set by JS; base transition here ── */
[data-tilt]{transition:transform .3s var(--ease)}
.magnetic>span{display:inline-flex}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  [data-reveal],.hero__title .line>span{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}