/* ============================================================
   Motion + depth layer - vanilla, dependency-free
   Reveals · staggers · word-cascade headings · hero entrance ·
   continuous float. Cinematic image motion (Ken Burns, scroll-zoom,
   clip-reveal) lives in styles.css; this file is the entrance system.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* scroll reveals */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out,cubic-bezier(.16,.84,.3,1)),transform .8s var(--ease-out,cubic-bezier(.16,.84,.3,1))}
  .reveal.in{opacity:1;transform:none}
  .reveal--scale{transform:scale(.94)} .reveal--scale.in{transform:none}
  .reveal--right{transform:translateX(40px)} .reveal--right.in{transform:none}
  .reveal--left{transform:translateX(-40px)} .reveal--left.in{transform:none}
  .reveal--blur{filter:blur(10px)} .reveal--blur.in{filter:blur(0)}

  /* staggered children */
  .stagger > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out,cubic-bezier(.16,.84,.3,1)),transform .7s var(--ease-out,cubic-bezier(.16,.84,.3,1));transition-delay:calc(var(--i,0)*80ms)}
  .stagger.in > *{opacity:1;transform:none}

  /* word-cascade heading reveal (built by motion.js: [data-split]) */
  .rw{display:block}
  .rw__l{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
  .rw__w{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-spring,cubic-bezier(.22,.7,.12,1));transition-delay:calc(var(--wi,0)*55ms + var(--wd,0s))}
  .rw.in .rw__w{transform:translateY(0)}

  /* hero load entrance (per-element --d delay) */
  .hero-anim{opacity:0;transform:translateY(30px);animation:heroUp .95s var(--ease-out,cubic-bezier(.16,.84,.3,1)) forwards;animation-delay:var(--d,0s)}
  @keyframes heroUp{to{opacity:1;transform:none}}

  /* gentle continuous float on hero tiles */
  .hero-panel{animation:panelBreath 11s ease-in-out infinite}
  .hero-float{animation:floaty 7.5s ease-in-out infinite}
  .hero-float--stat{animation-duration:8.4s}
  @keyframes panelBreath{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6px,5px,0) scale(1.012)}}
  @keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger > *,.hero-anim{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
  .rw__w{transform:none !important}
  .hero-float,.hero-panel{animation:none !important}
}

/* hover micro-interactions */
.btn{will-change:transform}
.btn--primary:hover,.btn--dark:hover,.btn--light:hover,.btn--ghost:hover{transform:translateY(-2px)}
.card--link:hover .arrow-link::after{transform:translateX(5px)}

/* ---------- HERO STAGE: framed editorial photo + offset green panel + one stat card ---------- */
.hero{position:relative;overflow:hidden}
.hero-stage{position:relative;min-height:clamp(540px,52vw,700px);isolation:isolate}

/* ambient color wash behind the photo -> depth WITHOUT a hard card */
.hero-panel{position:absolute;left:-10%;bottom:-16%;width:70%;height:88%;border-radius:50%;
  background:radial-gradient(58% 58% at 46% 52%, rgba(74,124,89,.5), rgba(74,124,89,0) 72%);
  filter:blur(46px);opacity:.6;z-index:0;pointer-events:none}
.hero-panel::before,.hero-panel::after{content:none}

/* main photo: large, fills the whole stage, framed */
.hero-photo{position:absolute;right:0;top:0;width:97%;height:100%;border-radius:24px;overflow:hidden;
  border:10px solid #fff;box-shadow:0 44px 90px -34px rgba(8,40,28,.5),0 12px 30px -16px rgba(8,40,28,.28),0 0 0 1px rgba(11,61,46,.06);will-change:transform;z-index:1;background:#fff}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-photo img.fit-whole{object-fit:contain;background:#fff}
/* Home hero: fill the frame (no white letterbox), keep heads in view */
.hero .hero-photo img{object-fit:cover;object-position:center 30%}
.hero .hero-photo{border-width:6px}

/* single floating stat card -> sits on the exposed green panel (lower-left) */
.hero-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:1.25rem 1.5rem;font-family:var(--font-sans);z-index:2}
.hero-float .n{display:block;font-family:var(--font-serif);font-weight:600;color:var(--green-700);line-height:1;font-size:2.7rem}
.hero-float small{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:.35rem;max-width:18ch}
.hero-float--stat{left:-1%;bottom:2%}

@media(max-width:980px){
  .hero-stage{min-height:0;margin-top:1.4rem}
  .hero-panel{display:none}
  .hero-photo{position:relative;right:auto;top:auto;width:100%;height:auto;aspect-ratio:5/4}
  .hero-float{position:static;display:inline-block;margin-top:1rem}
}

/* interior page hero -> same stage, slightly more compact */
.page-hero--stage .container{padding-right:0!important}
.page-hero--stage .container::after{display:none!important}
.page-hero--stage .page-hero-copy{min-width:0}
@media(min-width:981px){
  .page-hero--stage .container{display:grid;grid-template-columns:.88fr 1.18fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
  .page-hero--stage .hero-stage{min-height:clamp(500px,49vw,660px)}
}