/* ═══════════════════════════════════════════════════════════
   HMB polish layer — shared across every page.
   Pairs with assets/hmb-polish.js. Depends on the tokens in
   assets/hmb.css, so link this after it.

   Everything here is gated on (hover:hover) and
   prefers-reduced-motion, and switches off entirely on touch.
   ═══════════════════════════════════════════════════════════ */

/* ── signature: the grain breathes, very slightly ── */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
    body::after{animation:grain-drift 7s steps(6) infinite;}
}
@keyframes grain-drift{
    0%  {transform:translate3d(0,0,0);}
    17% {transform:translate3d(-2%,1%,0);}
    34% {transform:translate3d(1%,-2%,0);}
    51% {transform:translate3d(-1%,-1%,0);}
    68% {transform:translate3d(2%,1%,0);}
    85% {transform:translate3d(-1%,2%,0);}
    100%{transform:translate3d(0,0,0);}
}

/* ── custom cursor: accent dot, trailing ring ── */
#hmb-dot,#hmb-ring{
    position:fixed;top:0;left:0;z-index:9997;pointer-events:none;
    border-radius:50%;opacity:0;
    transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1);
}
#hmb-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--terra);}
#hmb-ring{
    width:30px;height:30px;margin:-15px 0 0 -15px;
    border:1px solid var(--terra-a45);
    transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),
               width 0.28s cubic-bezier(0.22,1,0.36,1),
               height 0.28s cubic-bezier(0.22,1,0.36,1),
               margin 0.28s cubic-bezier(0.22,1,0.36,1),
               border-color 0.28s cubic-bezier(0.22,1,0.36,1),
               background 0.28s cubic-bezier(0.22,1,0.36,1);
}
body.hmb-cursor-on #hmb-dot,body.hmb-cursor-on #hmb-ring{opacity:1;}
body.hmb-cursor-on #hmb-ring.on-target{
    width:52px;height:52px;margin:-26px 0 0 -26px;
    border-color:var(--terra-a80);
    background:var(--terra-a05);
}
/* the system cursor only hides once ours is actually running */
@media (hover:hover) and (pointer:fine){
    body.hmb-cursor-on,
    body.hmb-cursor-on a,
    body.hmb-cursor-on button{cursor:none;}
}

/* ── nav settles after the hero. Solid, not blurred: a translucent
      blurred bar would be glassmorphism, which the direction bans. ── */
nav{transition:padding 0.35s cubic-bezier(0.22,1,0.36,1),
                background 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s cubic-bezier(0.22,1,0.36,1);}
body.nav-settled nav{
    padding-top:12px;padding-bottom:12px;
    background:oklch(22.0% 0.058 5.4);
    border-bottom-color:var(--cream-a14);
    box-shadow:var(--lift-nav);
}

/* ── magnetic primary action ── */
.v2-btn,.btn-primary{will-change:transform;}

/* ── micro-interaction: nav links ── */
.nav-links a{position:relative;}
.nav-links a::after{
    content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;
    background:var(--blush);transform:scaleX(0);transform-origin:right center;
    transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left center;}

/* ── the floor: all of the above switches off ── */
@media (prefers-reduced-motion:reduce){
    body::after{animation:none !important;}
    #hmb-dot,#hmb-ring{display:none !important;}
    body.hmb-cursor-on,body.hmb-cursor-on a,body.hmb-cursor-on button{cursor:auto !important;}
    nav,.nav-links a::after{transition:none !important;}
    .v2-btn,.btn-primary{transform:none !important;}
}
@media (hover:none),(pointer:coarse){
    #hmb-dot,#hmb-ring{display:none !important;}
    body.hmb-cursor-on,body.hmb-cursor-on a,body.hmb-cursor-on button{cursor:auto !important;}
}