/* Show Me Epoxy — sitewide motion.
   Paired with motion.js, which tags elements at runtime so no page markup
   changes. Nothing here hides content on its own: motion.js only adds .m-pre
   to elements that start below the fold, so the hero paints untouched and LCP
   is unaffected. If the script never runs, every rule below is inert. */

/* ── scroll reveal ─────────────────────────────────────────────────────── */
.m-pre{opacity:0;transform:translateY(18px);will-change:opacity,transform}
.m-in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--m-i,0) * 70ms)}
/* Drop the compositor hint once the element has arrived. */
.m-done{will-change:auto}

/* Variants motion.js picks per element type. */
.m-pre.m-zoom{transform:scale(.965)}
.m-pre.m-rise{transform:translateY(26px)}

/* ── hero entrance ─────────────────────────────────────────────────────── */
/* Pure CSS, no JS gate, so it plays the moment the page paints. The h1 and the
   hero background are deliberately left out: they are the LCP candidates, and
   an element painted at opacity 0 would push that measurement later.
   animation-fill-mode is backwards, not both, so if animations never run the
   element simply shows in its normal state rather than staying hidden. */
@keyframes mUp{from{opacity:0;transform:translateY(14px)}}
.hero-badge,.hero-sub,.hero-checks li,.hero-btns>*,
.page-hero .hero-label,.page-hero p{animation:mUp .6s cubic-bezier(.22,.61,.36,1) backwards}
.hero-sub{animation-delay:.08s}
.hero-checks li:nth-child(1){animation-delay:.14s}
.hero-checks li:nth-child(2){animation-delay:.20s}
.hero-checks li:nth-child(3){animation-delay:.26s}
.hero-checks li:nth-child(4){animation-delay:.32s}
.hero-btns>:nth-child(1){animation-delay:.36s}
.hero-btns>:nth-child(2){animation-delay:.42s}
.hero-btns>:nth-child(3){animation-delay:.48s}
.page-hero p{animation-delay:.10s}

/* ── hover micro-interaction ───────────────────────────────────────────── */
/* Cards already carry transition:all .3s in the page styles; these add the
   lift itself without fighting that declaration. */
.m-lift{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.m-lift:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,45,110,.15)}
.m-lift:active{transform:translateY(-2px)}

/* Image cards: slow push-in behind their own rounded corners. */
.m-media{overflow:hidden}
.m-media img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.m-media:hover img{transform:scale(1.045)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.m-btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,background .2s}
.m-btn:hover{transform:translateY(-2px)}
.m-btn:active{transform:translateY(0)}
/* A single light sweep across the face on hover. */
.m-btn::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none}
.m-btn:hover::after{animation:mSheen .75s ease-out}
@keyframes mSheen{to{left:130%}}

/* Phone links get a small nudge rather than a sweep. */
.m-tel{transition:transform .2s ease}
.m-tel:hover{transform:translateY(-1px) scale(1.015)}

/* ── header ────────────────────────────────────────────────────────────── */
.m-nav{transition:box-shadow .25s ease,background .25s ease}
.m-nav.m-stuck{box-shadow:0 6px 24px rgba(13,45,110,.13)}

/* ── counters ──────────────────────────────────────────────────────────── */
/* Keeps the box from reflowing while digits tick. */
.m-count{font-variant-numeric:tabular-nums}

/* ── anchor scrolling ──────────────────────────────────────────────────── */
html.m-smooth{scroll-behavior:smooth}

/* ── reduced motion ────────────────────────────────────────────────────── */
/* motion.js also bails out early, so this is the belt to its braces: anything
   already tagged lands in its final state with no transition. */
@media (prefers-reduced-motion:reduce){
  html.m-smooth{scroll-behavior:auto}
  .m-pre,.m-in{opacity:1!important;transform:none!important;transition:none!important}
  .hero-badge,.hero-sub,.hero-checks li,.hero-btns>*,
  .page-hero .hero-label,.page-hero p{animation:none}
  .m-lift:hover,.m-btn:hover,.m-tel:hover{transform:none}
  .m-media:hover img{transform:none}
  .m-btn:hover::after{animation:none}
}