/* ============================================================
   Copperhead — motion layer
   Everything here is gated behind .js so a JS failure or a
   no-JS crawler still gets the full page, and behind
   prefers-reduced-motion for anyone who asks us to stop.
   ============================================================ */

:root{
  --ease:cubic-bezier(.16,1,.3,1);   /* expo-out: fast start, long soft settle */
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- block reveal ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* a staggered container animates its children instead of itself */
.js .rv.stagger{opacity:1;transform:none}
.js .stagger>*{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 75ms);
}
.js .stagger.in>*{opacity:1;transform:none}

/* ---------- line-masked headings ---------- */
/* padding/margin pair gives descenders room inside overflow:hidden */
.js .lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .lines .ln__i{
  display:block;transform:translateY(110%);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js .lines.in .ln__i,
.js .rv.in .lines .ln__i{transform:none}

/* ---------- eyebrow rule draws itself ---------- */
.js .eyebrow::before{width:0;transition:width .8s var(--ease) .15s}
.js .rv.in .eyebrow::before,
.js .eyebrow.in::before{width:26px}

/* ---------- hero entrance ---------- */
.js .hero__media{will-change:transform}
.js .hero__in>*{opacity:0;transform:translateY(26px);animation:riseIn 1s var(--ease) forwards}
.js .hero__in>*:nth-child(1){animation-delay:.10s}
.js .hero__in>*:nth-child(2){animation-delay:.18s}
.js .hero__in>*:nth-child(3){animation-delay:.42s}
.js .hero__in>*:nth-child(4){animation-delay:.54s}
@keyframes riseIn{to{opacity:1;transform:none}}
/* the headline already reveals line by line — don't also rise it */
.js .hero__in>.display{opacity:1;transform:none;animation:none}

.js .rail{opacity:0;animation:riseIn .9s var(--ease) .9s forwards}
.js .rail b{transform-origin:top;animation:railGrow 1.6s var(--ease) 1s backwards}
@keyframes railGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- stats bar ---------- */
.js .stats{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .stats.in{opacity:1;transform:none}
.js .stat{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 120ms)}
.js .stats.in .stat{opacity:1;transform:none}

/* ---------- hover polish ---------- */
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost:hover svg,.btn--solid:hover svg{transform:translateX(4px)}

.svc{transition:border-color .35s var(--ease-soft),background .35s var(--ease-soft),transform .35s var(--ease),box-shadow .35s var(--ease-soft)}
.svc:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.svc svg{transition:transform .4s var(--ease),color .3s}
.svc:hover svg{transform:translateY(-3px) scale(1.06)}

.mcard__t,.mcard__s{transition:transform .5s var(--ease)}
.mcard:hover .mcard__t,.mcard:hover .mcard__s{transform:translateY(-3px)}

.quote{transition:transform .4s var(--ease),border-color .3s}
.quote:hover{transform:translateY(-4px);border-color:rgba(200,122,68,.4)}

.stars svg{animation:none}
.js .quotes.in .stars svg{animation:pop .5s var(--ease) backwards}
.js .quotes.in .stars svg:nth-child(1){animation-delay:.25s}
.js .quotes.in .stars svg:nth-child(2){animation-delay:.31s}
.js .quotes.in .stars svg:nth-child(3){animation-delay:.37s}
.js .quotes.in .stars svg:nth-child(4){animation-delay:.43s}
.js .quotes.in .stars svg:nth-child(5){animation-delay:.49s}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* process step markers */
.js .steps.in .step__n{animation:popIn .6s var(--ease) backwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
/* the connecting rule draws left to right behind them */
.js .steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .2s}
.js .steps.in::before{transform:scaleX(1)}
@media (max-width:900px){
  .js .steps::before{transform:scaleY(0);transform-origin:top}
  .js .steps.in::before{transform:scaleY(1)}
}

/* nav underline */
.nav a::before{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover::before{transform:scaleX(1);transform-origin:left}
.nav a.is-active::before{display:none}

/* header shrink is already a transition; make the brand settle with it */
.brand img{transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}

/* ---------- opt out ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .stagger>*,.js .stats,.js .stat,.js .hero__in>*,.js .rail{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  .js .lines .ln__i{transform:none!important;transition:none!important}
  .js .eyebrow::before{width:26px!important;transition:none!important}
  .js .steps::before{transform:none!important}
  .js .quotes.in .stars svg,.js .steps.in .step__n{animation:none!important}
}