/* Happiness(R) whimsy - links lane (non-critical half; the intro CSS is inline in hl-sprite.html).
   Everything is scoped to .hl- classes and --hl-* custom properties. */

/* the hero H is a toy (triple-tap), not a link: no double-tap zoom, no text selection, no tap flash */
.hl-h{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* "Clink": the chain goes taut (pink up, blue down, until the arcs nearly catch) and snaps back, sparks at
   both crossings. The whole links are shown for it (the resting favicon pieces cannot move that way).
   Mouse hover only (a touch tap on the nav logo must just navigate), plus keyboard focus. Never while an
   intro is still playing on that logo. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  html:not(.hl-pn) .navbar-brand:hover .hl-n,.mobile-menu-brand:hover .hl-m:not(.hl-go){
    --hl-D:inline;--hl-V:hidden;--hl-TP:hl-tp .5s;--hl-TB:hl-tb .5s;--hl-KH:hl-spk .4s .26s}
}
@media (prefers-reduced-motion:no-preference){
  html:not(.hl-pn) .navbar-brand:focus-visible .hl-n,.mobile-menu-brand:focus-visible .hl-m:not(.hl-go),
  html:not(.hl-ph) .hl-h.hl-tug{
    --hl-D:inline;--hl-V:hidden;--hl-TP:hl-tp .5s;--hl-TB:hl-tb .5s;--hl-KH:hl-spk .4s .26s}

  /* secret: three quick taps on the hero H pull the links apart; they fall back and re-lock */
  .hl-h.hl-un{--hl-D:inline;--hl-V:hidden;--hl-P:hl-pU 1.7s;--hl-B:hl-bU 1.7s;--hl-TP:none;--hl-TB:none;
    --hl-Q:hl-sq .3s 1.33s;--hl-K:hl-spk .55s 1.33s;--hl-KH:none}
}
@keyframes hl-tp{0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.7,.4)}40%{transform:translateY(-34px);animation-timing-function:cubic-bezier(.6,0,.9,.5)}55%{transform:translateY(6px)}75%{transform:translateY(-2px)}100%{transform:none}}
@keyframes hl-tb{0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.7,.4)}40%{transform:translateY(34px);animation-timing-function:cubic-bezier(.6,0,.9,.5)}55%{transform:translateY(-6px)}75%{transform:translateY(2px)}100%{transform:none}}
/* unlink: pink slides back down through blue and out, both wobble apart, then fall back together */
@keyframes hl-pU{0%{transform:none;animation-timing-function:cubic-bezier(.2,.8,.3,1)}24%{transform:translateY(270px) rotate(6deg)}36%{transform:translateY(255px) rotate(-4deg)}48%{transform:translateY(262px) rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}78%{transform:none;animation-timing-function:cubic-bezier(.3,.6,.5,1)}86%{transform:translateY(-5px)}94%,100%{transform:none}}
@keyframes hl-bU{0%{transform:none;animation-timing-function:cubic-bezier(.2,.8,.3,1)}24%{transform:translateY(-270px) rotate(-6deg)}36%{transform:translateY(-255px) rotate(4deg)}48%{transform:translateY(-262px) rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.5)}78%{transform:none;animation-timing-function:cubic-bezier(.3,.6,.5,1)}86%{transform:translateY(5px)}94%,100%{transform:none}}