/* Hide-on-scroll nav. The bar slides up out of view the moment you scroll down and slides back the moment you
   scroll up. part.js toggles .is-hidden (and html.is-nav-hidden); this file is the motion.
   Markup: <header class="hosn"> <div class="hosn__bar"> logo, links, button </div> </header>

   Three looks, all measured:
   - default (Cabalar): the whole bar moves, 150ms cubic-bezier(.4,0,.2,1) (Tailwind's `transition`)
   - .hosn--spring (Sadewa): .7s Framer spring (bounce 0), and the bar turns from paper to white with a hairline once
     the page has scrolled 10px
   - .hosn--items (Truus): the bar stays, each of its items leaves on its own: translateY(-300%), .8s
     cubic-bezier(.625,.05,0,1), 75ms apart, left to right */

.hosn {
  --hosn-dur: 150ms;
  --hosn-ease: cubic-bezier(.4, 0, .2, 1);
  --hosn-top: 0px;                      /* where the bar rests; part.js clears it fully on hide (top + height) */
  position: fixed; z-index: 50;
  top: var(--hosn-top); left: 0; right: 0;
  transition: transform var(--hosn-dur) var(--hosn-ease);
  will-change: transform;
}
/* --hosn-shift is written by part.js in px (resting top + height, so a floating bar clears the top edge too);
   -100% is the no-JS fallback */
.hosn.is-hidden { transform: translateY(var(--hosn-shift, -100%)); }

/* Sadewa: soft spring + a paper bar that whitens with a hairline once scrolled */
.hosn--spring {
  --hosn-dur: .7s;
  --hosn-ease: linear(0, .0041 1%, .0154 2%, .0326 3%, .0545 4%, .0802 5%, .1088 6%, .1396 7%, .172 8%, .2054 9%, .2395 10%, .2738 11%, .308 12%, .3419 13%, .3752 14%, .4078 15%, .4396 16%, .4704 17%, .5001 18%, .5288 19%, .5563 20%, .5827 21%, .6079 22%, .6319 23%, .6547 24%, .6764 25%, .6969 26%, .7164 27%, .7348 28%, .7522 29%, .7686 30%, .784 31%, .7985 32%, .8122 33%, .825 34%, .837 35%, .8483 36%, .8588 37%, .8687 38%, .8779 39%, .8866 40%, .8946 41%, .9022 42%, .9092 43%, .9157 44%, .9218 45%, .9275 46%, .9328 47%, .9377 48%, .9423 49%, .9466 50%, .9542 52%, .9608 54%, .9664 56%, .9713 58%, .9755 60%, .9791 62%, .9822 64%, .9848 66%, .9871 68%, .989 70%, .9906 72%, .9921 74%, .9932 76%, .9943 78%, .9951 80%, .9959 82%, .9965 84%, .997 86%, .9975 88%, .9979 90%, .9982 92%, .9985 94%, .9987 96%, .9989 98%, 1);
  --hosn-bg: #f3f3f3;
  --hosn-bg-scrolled: #fff;
  --hosn-line: #e5e5e5;
  background-color: var(--hosn-bg);
  transition: transform var(--hosn-dur) var(--hosn-ease), background-color .3s, box-shadow .3s;
}
.hosn--spring.is-scrolled { background-color: var(--hosn-bg-scrolled); box-shadow: 0 1px 0 var(--hosn-line); }

/* Truus: the items leave one by one instead of the bar */
.hosn--items {
  --hosn-dur: .8s;
  --hosn-ease: cubic-bezier(.625, .05, 0, 1);
  --hosn-stagger: 75ms;
  --hosn-items-shift: -300%;
  pointer-events: none;                 /* the empty bar never blocks clicks; its items take them */
}
.hosn--items.is-hidden { transform: none; }
.hosn--items .hosn__bar > * {
  pointer-events: auto;
  transition: transform var(--hosn-dur) var(--hosn-ease);
  transition-delay: calc(var(--hosn-i, 0) * var(--hosn-stagger));
}
.hosn--items.is-hidden .hosn__bar > * { transform: translateY(var(--hosn-items-shift)) rotate(.001deg); }

@media (prefers-reduced-motion: reduce) {
  .hosn, .hosn--items .hosn__bar > * { transition-duration: 1ms; transition-delay: 0s; }
}