/* Nav lab: five scroll behaviours for the top nav, switchable with ?nav=0..5 (or the pill bottom-left, or keys 0-5).
   0 = today's nav, untouched. Everything here is scoped under html[data-nav="N"]. */

/* while setting up or switching: land in the right state, no entrance animation */
html.nl-still .nav,html.nl-still .nav *,html.nl-still .nav::before{transition:none!important;animation:none!important}

/* 1-5: the nav stays with you */
html[data-nav]:not([data-nav="0"]) .nav{position:fixed;z-index:50}

/* 2-4: a blue backdrop fades in once the page moves, so the nav never sits on top of text */
html:is([data-nav="2"],[data-nav="3"],[data-nav="4"]) .nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;z-index:-1;pointer-events:none;
  background:rgb(46 44 171 / .8);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line);
  opacity:0;transition:opacity .3s}
html:is([data-nav="2"],[data-nav="3"],[data-nav="4"]) .nav.nl-sc::before{opacity:1}

/* ---------- 1. toast pill ---------- */
html[data-nav="1"] .nav.nl-pill{top:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 7px 6px 20px;gap:20px;justify-content:center}
html[data-nav="1"] .nav.nl-pill .nav-mark img{height:22px;filter:brightness(0);opacity:.78}
html[data-nav="1"] .nav.nl-pill nav{gap:18px;color:#3b1e0a}
html[data-nav="1"] .nav.nl-pill .nav-lang{color:rgb(59 30 10 / .72)}
html[data-nav="1"] .nav.nl-pill .nav-lang a[aria-current]{color:#3b1e0a}
html[data-nav="1"] .nav.nl-pill :focus-visible{outline-color:#3b1e0a}
html[data-nav="1"] .nav.nl-pill .btn-mini{rotate:-4deg;box-shadow:0 3px 6px -2px rgb(70 30 5 / .55),0 0 0 1px rgb(70 30 5 / .12)}
.nl-bg{position:absolute;inset:0;z-index:-1;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(rgb(255 238 205 / .42),rgb(255 238 205 / .42)),url(/site/img/tex-plain-toast.webp) 50% 38%/280px auto;
  box-shadow:inset 0 0 0 2.5px var(--crust),inset 0 0 14px rgb(120 50 10 / .5),0 14px 28px -12px rgb(8 6 50 / .7)}
html[data-nav="1"] .nav.nl-pill .nl-bg{opacity:1}
@media (max-width:860px){
  html[data-nav="1"] .nav.nl-pill{top:10px;padding:5px 5px 5px 16px;gap:14px}
  html[data-nav="1"] .nav.nl-pill .nav-mark img{height:20px}
  html[data-nav="1"] .nav.nl-pill nav{gap:12px}
}

/* ---------- 2. bite progress ---------- */
.nl-bar{position:absolute;left:50%;width:100vw;translate:-50% 0;bottom:-6px;height:12px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s}
.nav.nl-sc .nl-bar{opacity:1}
/* the loaf slides right as you scroll; its left edge is a bite (svg tooth marks + solid rest) */
.nl-loaf{position:absolute;inset:0;will-change:transform;
  background:linear-gradient(rgb(255 236 200 / .25),transparent 45%,rgb(120 50 10 / .35)),url(/site/img/tex-plain-toast.webp) 0 40%/200px auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Cpath d='M24 0H2A2.6 2.6 0 0 1 6 3A2 2 0 0 1 7.5 6A2 2 0 0 1 6 9A2.6 2.6 0 0 1 2 12H24Z'/%3E%3C/svg%3E") 0 0/24px 100% no-repeat,linear-gradient(#000,#000) 23.5px 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Cpath d='M24 0H2A2.6 2.6 0 0 1 6 3A2 2 0 0 1 7.5 6A2 2 0 0 1 6 9A2.6 2.6 0 0 1 2 12H24Z'/%3E%3C/svg%3E") 0 0/24px 100% no-repeat,linear-gradient(#000,#000) 23.5px 0/100% 100% no-repeat}
.nl-crumb{position:absolute;top:0;left:0;width:13px;height:auto;pointer-events:none;filter:drop-shadow(0 2px 2px rgb(8 6 50 / .45))}

/* ---------- 3. sliced wordmark ---------- */
html:is([data-nav="3"],[data-nav="6"]) .nav-mark{position:relative;display:block}
html:is([data-nav="3"],[data-nav="6"]) .nav-mark>img{opacity:0}
.nl-sls{position:absolute;inset:0;pointer-events:none;--f:0;--c:0;--k:0}
.nl-sl{position:absolute;inset:0;display:flex;align-items:center;
  clip-path:inset(-30% calc(80% - var(--i)*20% - .5px) -30% calc(var(--i)*20% - .5px));
  translate:calc((var(--i) - 2)*var(--f)*(1 - var(--c))*11px + var(--c)*(14% - (var(--i) + .5)*20%)) calc(var(--f)*(1 - var(--c))*((var(--i) - 2)*(var(--i) - 2)*2px - 3px));
  rotate:calc((var(--i) - 2)*var(--f)*(1 - var(--c))*9deg - var(--c)*14deg);
  scale:calc(1 - var(--c)*.6);opacity:calc(1 - var(--c)*1.6)}
.nl-sl img{height:100%;width:auto;display:block}
.nl-ic{position:absolute;left:-2px;top:50%;height:150%;width:auto;overflow:visible;translate:0 -50%;transform-origin:30% 80%;
  scale:calc(.35 + var(--k)*.65);rotate:calc((1 - var(--k))*-40deg);opacity:var(--k)}
.nl-ic path{stroke:var(--blue);stroke-width:16;stroke-linejoin:round}

/* ---------- 4. section stickers ---------- */
.nl-stk{position:absolute;left:calc(var(--gutter) + 120px);top:50%;width:0;height:0;pointer-events:none}
.nl-tag{position:absolute;left:0;top:0;translate:0 -50%;white-space:nowrap;rotate:var(--r);transform-origin:0 100%;
  background:#fffdf7;color:var(--blue);font:400 19px/1 var(--f-hand);padding:5px 11px 7px;border-radius:9px;
  box-shadow:0 5px 10px -4px rgb(8 6 50 / .55),0 1px 1px rgb(8 6 50 / .25)}
.nl-tag.in{animation:nl-slap .55s var(--spring) both}
.nl-tag.out{animation:nl-peel .42s cubic-bezier(.5,0,.8,.4) both}
@keyframes nl-slap{0%{transform:scale(1.3) rotate(-9deg);opacity:0}35%{opacity:1}100%{transform:none;opacity:1}}
@keyframes nl-peel{0%{transform:none;opacity:1}30%{transform:translate(2px,-5px) rotate(6deg) skewX(-4deg);opacity:1}100%{transform:translate(34px,-30px) rotate(24deg) scale(.86);opacity:0}}
@media (max-width:860px){
  .nl-stk{left:calc(var(--gutter) + 70px);top:62%}
  .nl-tag{font-size:15px;padding:3px 8px 5px;border-radius:7px}
}

/* ---------- 5. hide & swing ---------- */
html:is([data-nav="5"],[data-nav="6"]) .nav{transform-origin:50% -14px;transition:top .3s var(--ease-out),left .3s var(--ease-out),right .3s var(--ease-out),padding .3s var(--ease-out)}
html:is([data-nav="5"],[data-nav="6"]) .nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;pointer-events:none;background:var(--blue-deep);
  box-shadow:inset 0 0 0 1.5px rgb(216 216 246 / .22),0 16px 30px -14px rgb(8 6 50 / .8);opacity:0;transition:opacity .3s}
html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hang{top:14px;left:12px;right:12px;padding:12px 20px}
html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hang::before{opacity:1}
html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hid{transform:translateY(calc(-100% - 40px));pointer-events:none}
.nl-str{position:absolute;bottom:100%;width:2px;height:60px;margin-left:-1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(rgb(216 216 246 / .15),rgb(216 216 246 / .85));opacity:0;transition:opacity .3s}
.nl-str::after{content:"";position:absolute;left:-2px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--on-2)}
html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hang .nl-str{opacity:1}
@media (max-width:860px){html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hang{left:8px;right:8px;padding:10px 14px}}

/* ---------- 6. combo: 3's wordmark on 5's card (always shown) + a baguette being eaten ---------- */
/* Counter-translate the image inside its bite mask so the crust stays put. */
.nl-bag{--bh:44px;--face:48px;--mouth:14px;--eaten:0;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 1px);height:var(--bh);pointer-events:none;
  filter:drop-shadow(0 3px 3px rgb(8 6 50 / .28));
  transition:left .3s var(--ease-out),right .3s var(--ease-out)}
html[data-nav="6"] .nav.nl-hang .nl-bag{left:20px;right:20px;top:calc(100% - 5px)}
.nl-bgc{position:absolute;inset:0;overflow:hidden;transform:translateX(calc(var(--eaten)*100%))}
.nl-bgl{position:absolute;inset:0;transform:translateX(calc(var(--eaten)*-100%));
  /* One continuous extra-long loaf, including both tips: no tiles or cap joins.
     Narrow screens crop its left side instead of compressing all the scores. */
  background:url(/site/img/nav-baguette-continuous-v2.webp) right center / max(100%,calc(var(--bh)*20)) 100% no-repeat}
/* Three tooth scallops cut into the remaining loaf at every mouthful. */
.nl-bag.bit .nl-bgc{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' preserveAspectRatio='none'%3E%3Cpath d='M24 0H2Q13 3 6 12Q22 17 11 25Q20 33 5 36Q11 42 2 44H24Z'/%3E%3C/svg%3E") 0 0/24px 100% no-repeat,linear-gradient(#000,#000) 23px 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' preserveAspectRatio='none'%3E%3Cpath d='M24 0H2Q13 3 6 12Q22 17 11 25Q20 33 5 36Q11 42 2 44H24Z'/%3E%3C/svg%3E") 0 0/24px 100% no-repeat,linear-gradient(#000,#000) 23px 0/100% 100% no-repeat}
.nl-bag.finished .nl-bgc{visibility:hidden}
.nl-bgf{position:absolute;inset:0}
.nl-face{position:absolute;left:calc(var(--face)*-.58);top:50%;width:var(--face);height:auto;margin-top:calc(var(--face)*-.52);
  filter:drop-shadow(0 2px 3px rgb(8 6 50 / .5));transform-origin:70% 65%}
.nl-face.nl-chomp{animation:nl-chomp .24s ease-out}
@keyframes nl-chomp{0%,100%{scale:1;rotate:0deg}35%{scale:1.12 .83;rotate:-9deg}65%{scale:.97 1.06;rotate:4deg}}
@media (max-width:860px){
  .nl-bag{--bh:30px;--face:36px;--mouth:12px;left:calc(var(--gutter) + 8px)}
  html[data-nav="6"] .nav.nl-hang .nl-bag{left:22px;right:14px}
}
@media (prefers-reduced-motion:reduce){.nl-face.nl-chomp{animation:none}.nl-bag{transition:none}}

/* ---------- reduced motion: states still change, just without the show ---------- */
@media (prefers-reduced-motion:reduce){
  .nl-bg{transition:opacity .2s}
  .nl-tag.in{animation:nl-fade .2s both}
  .nl-tag.out{animation:nl-fade .15s reverse both}
  html:is([data-nav="5"],[data-nav="6"]) .nav{transition:opacity .2s}
  html:is([data-nav="5"],[data-nav="6"]) .nav.nl-hid{transform:none;opacity:0}
}
@keyframes nl-fade{from{opacity:0}to{opacity:1}}

/* ---------- the lab switcher (dev tool) ---------- */
.nl-lab{position:fixed;left:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:1px;background:#fff;color:var(--blue);
  border-radius:999px;padding:4px 14px 4px 5px;font:400 17px/1 var(--f-hand);box-shadow:0 8px 22px -8px rgb(8 6 50 / .7),0 0 0 1px rgb(8 6 50 / .08)}
.nl-lab b{font-weight:400;opacity:.55;margin:0 5px 0 7px}
.nl-lab button{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;width:26px;height:26px;padding:0 0 2px;border-radius:50%}
.nl-lab button:hover{background:rgb(46 44 171 / .1)}
.nl-lab button[aria-pressed="true"]{background:var(--blue);color:#fff}
.nl-lab button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.nl-lab output{min-width:58px;margin-left:7px}
body.noscroll .nl-lab{display:none}