/* mg-motion.css — Memorable Green shared motion layer.
   Vanilla, dependency-free. Pairs with mg-motion.js.
   Scroll-hidden states are gated behind html.mg-js (added by the JS),
   so if the script fails to load the page still renders fully visible. */

:root{
  --mg-accent:#5d8a6f;        /* matches site --hunter-bright */
  --mg-accent-deep:#2a4a3a;   /* matches site --hunter */
  --mg-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reveal on scroll ---------- */
.mg-js .mg-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--mg-ease), transform .7s var(--mg-ease);
}
.mg-js .mg-reveal.mg-in{opacity:1;transform:none}
.mg-js .mg-reveal[data-mg-delay="1"]{transition-delay:.08s}
.mg-js .mg-reveal[data-mg-delay="2"]{transition-delay:.16s}
.mg-js .mg-reveal[data-mg-delay="3"]{transition-delay:.24s}

/* ---------- Sticky nav: shrink on scroll ---------- */
[data-mg-nav]{
  transition:padding-top .3s var(--mg-ease), padding-bottom .3s var(--mg-ease),
             background-color .3s var(--mg-ease), box-shadow .3s var(--mg-ease);
}
[data-mg-nav].mg-shrink{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(11,26,46,.97);
  box-shadow:0 8px 30px rgba(11,26,46,.35);
}

/* ---------- Count-up numbers ---------- */
.mg-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Accordion ---------- */
.mg-acc-item{border-bottom:1px solid var(--line,#1f3252)}
.mg-acc-item:first-child{border-top:1px solid var(--line,#1f3252)}
.mg-acc-head{
  display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:26px 0;margin:0;cursor:pointer;
  background:none;border:0;text-align:left;font:inherit;color:inherit;
  transition:padding-left .25s var(--mg-ease);
}
.mg-acc-head:hover{padding-left:6px}
.mg-acc-head:focus-visible{outline:2px solid var(--mg-accent);outline-offset:4px}
.mg-acc-sign{
  flex:0 0 auto;margin-top:2px;line-height:1;
  font-family:var(--serif,Georgia,serif);font-weight:400;font-size:26px;
  color:var(--mg-accent);transition:transform .3s var(--mg-ease);
}
.mg-acc-item.mg-open .mg-acc-sign{transform:rotate(45deg)}
.mg-acc-body{overflow:hidden}
.mg-js .mg-acc-body{
  max-height:0;opacity:0;
  transition:max-height .42s var(--mg-ease), opacity .42s var(--mg-ease);
}
.mg-js .mg-acc-item.mg-open .mg-acc-body{opacity:1}
.mg-acc-body-inner{padding:0 0 28px}
.mg-acc-hint{
  display:block;margin-top:12px;
  font-family:var(--sans,Inter,system-ui,sans-serif);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mg-accent);opacity:.65;
  transition:opacity .25s var(--mg-ease);
}
.mg-acc-head:hover .mg-acc-hint,
.mg-acc-head:focus-visible .mg-acc-hint{opacity:1}
.mg-acc-hint::after{content:"Click to expand"}
.mg-acc-item.mg-open .mg-acc-hint::after{content:"Click to collapse"}

/* ---------- Animated underline (nav links) ---------- */
.mg-underline{position:relative}
.mg-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--mg-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--mg-ease);
}
.mg-underline:hover::after,
.mg-underline:focus-visible::after,
.mg-underline.active::after{transform:scaleX(1)}

/* ---------- Lift (buttons / CTAs) ---------- */
.mg-lift{transition:transform .25s var(--mg-ease), box-shadow .25s var(--mg-ease)}
.mg-lift:hover{transform:translateY(-2px)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mg-js .mg-reveal{opacity:1;transform:none;transition:none}
  [data-mg-nav],.mg-acc-head,.mg-acc-sign,.mg-acc-hint,
  .mg-js .mg-acc-body,.mg-underline::after,.mg-lift{transition:none}
  .mg-acc-head:hover,.mg-lift:hover{padding-left:0;transform:none}
}