/* ==========================================================================
   Motion: smooth scroll, the load sequence, scroll reveals, the highlighter.
   Everything that hides content is scoped to .js (set in <head>) and to
   people who haven't asked for reduced motion, so nothing is ever stuck
   invisible.
   ========================================================================== */

/* Lenis owns smooth scrolling when it loads; native smooth is the fallback */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
html{scroll-padding-top:78px}

/* nav picks up a shadow once you leave the top */
.nav,.bar{transition:box-shadow .3s ease}
.is-scrolled .nav,.is-scrolled .bar{box-shadow:0 10px 30px -22px rgba(0,0,0,.35)}

/* small physical responses */
.btn{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px) scale(.985)}

@media (prefers-reduced-motion:no-preference){

  /* ---- 1. load sequence: things arrive in the order you read them ---- */
  @keyframes intro-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes intro-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
  @keyframes intro-pop{
    0%{opacity:0;transform:translateY(34px) scale(.94) rotate(-1.2deg)}
    70%{opacity:1;transform:translateY(-3px) scale(1.005) rotate(0)}
    100%{opacity:1;transform:none}
  }

  .js .nav,.js .bar{animation:intro-down .6s cubic-bezier(.32,.72,0,1) both}
  .js [data-intro]{animation:intro-up .8s cubic-bezier(.32,.72,0,1) both;
    animation-delay:calc(180ms + var(--i,0) * 120ms)}
  .js [data-intro="pop"]{animation-name:intro-pop;animation-duration:1s}

  /* ---- 2. scroll reveals ---- */
  .js [data-reveal]{opacity:0;transform:translateY(26px);
    transition:opacity .75s cubic-bezier(.32,.72,0,1),transform .75s cubic-bezier(.32,.72,0,1);
    transition-delay:var(--d,0ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}

  /* ---- 3. the highlighter draws itself across the line ---- */
  @keyframes mark-draw{from{background-size:0% 58%}to{background-size:100% 58%}}
  .js .mark{background-size:0% 58%}
  .js .mark.is-marked{animation:mark-draw .9s cubic-bezier(.65,0,.35,1) both}

  /* ---- 4. hover lift on the things you'd pick up ---- */
  .card,.plan,.dl__item,.post-card{transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .35s cubic-bezier(.32,.72,0,1),border-color .16s ease}
  .card:hover,.dl__item:hover,.post-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(0,0,0,.35)}
  .plan:hover{transform:translateY(-4px)}
  .step{transition:background .25s ease}
  .step:hover{background:#fcfcfa}
}