:root {
  



  --mo-instant: 90ms;
  --mo-fast:    180ms;
  --mo-base:    420ms;
  --mo-slow:    660ms;
  --mo-hero:    720ms;

  









  --mo-art:     940ms;   
  --mo-draw:    560ms;   
  --mo-ico:     620ms;   

  


  --mo-out:    cubic-bezier(.2, .7, .3, 1);
  --mo-in:     cubic-bezier(.55, .06, .68, .19);
  --mo-press:  cubic-bezier(.3, 0, .1, 1);      
  --mo-spring: cubic-bezier(.16, 1.02, .28, 1); 

  


  --mo-rise:    18px;
  --mo-rise-sm: 9px;
  --mo-scale:   .985;

  




  --mo-stagger: 52ms;

  


  --mo-in-step:   88ms;   
  --mo-line-step: 78ms;   

  
  --mo-lift:    -4px;
  --mo-tilt:    5deg;   
  --mo-sweep:   1100ms;
}































html[data-wc-motion="on"] [data-wc-reveal="pending"] {
  opacity: 0;
  transform: translate3d(0, var(--mo-rise), 0) scale(var(--mo-scale));
}
html[data-wc-motion="on"] [data-wc-reveal] {
  transition:
    opacity   var(--mo-base) var(--mo-out),
    transform var(--mo-base) var(--mo-out);
  transition-delay: calc(var(--mo-i, 0) * var(--mo-stagger));
  



  will-change: opacity, transform;
}
html[data-wc-motion="on"] [data-wc-reveal="in"] {
  opacity: 1;
  transform: none;
}



html[data-wc-motion="on"] [data-wc-reveal="pending"][data-wc-kind="row"] {
  transform: translate3d(0, var(--mo-rise-sm), 0);
}



















.wc-line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.wc-line-in { display: block; }

html[data-wc-motion="on"] .wc-line-in {
  animation: mo-line-rise var(--mo-hero) var(--mo-out) backwards;
  animation-delay: calc(var(--mo-i, 0) * var(--mo-line-step, 78ms));
}
@keyframes mo-line-rise {
  from { transform: translate3d(0, 112%, 0); opacity: 0; }
  to   { transform: none;                    opacity: 1; }
}




html[data-wc-motion="on"] [data-wc-draw]::before {
  animation: mo-draw var(--mo-draw, 560ms) var(--mo-out) backwards;
  animation-delay: var(--mo-draw-delay, 0ms);
  transform-origin: left center;
}
@keyframes mo-draw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}































html[data-wc-motion="on"] [data-wc-in] {
  animation: mo-in var(--mo-slow) var(--mo-out) backwards;
  animation-delay: calc(var(--mo-i, 0) * var(--mo-in-step, 88ms));
}
@keyframes mo-in {
  from { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
  to   { opacity: 1; transform: none; }
}



html[data-wc-motion="on"] [data-wc-in="art"] {
  animation-name: mo-in-art;
  animation-duration: var(--mo-art, 940ms);
}
@keyframes mo-in-art {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.965); }
  to   { opacity: 1; transform: none; }
}



















@media (min-width: 821px) {
  .nav-links:has(.wc-ink) { position: relative; }
  .wc-ink {
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100px;             
    height: 2px;
    border-radius: var(--r-xs);
    background: var(--rule-accent);
    pointer-events: none;
    transform-origin: left center;
    transform: translate3d(var(--mo-ink-x, 0), 0, 0) scaleX(var(--mo-ink-w, 0));
    opacity: var(--mo-ink-o, 0);
    transition:
      transform var(--mo-fast) var(--mo-out),
      opacity   var(--mo-fast) var(--mo-out);
  }
}









html[data-wc-scrolled="1"] .nav {
  background-color: var(--surface-sink);
  box-shadow: 0 1px 0 var(--edge-sink), 0 20px 34px -24px var(--veil-deep);
  border-bottom-color: var(--border-2);
}
.nav,
.brand-txt span {
  transition:
    background-color var(--mo-base) var(--mo-out),
    box-shadow       var(--mo-base) var(--mo-out),
    border-color     var(--mo-base) var(--mo-out),
    opacity          var(--mo-base) var(--mo-out),
    transform        var(--mo-base) var(--mo-out);
}
html[data-wc-scrolled="1"] .brand-txt span {
  opacity: .35;
  transform: translate3d(0, -1px, 0);
}





.nav { position: sticky; }        
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rule-accent);
  transform-origin: left center;
  transform: scaleX(var(--mo-progress, 0));
  opacity: var(--mo-progress-o, 0);
  pointer-events: none;
  transition: opacity var(--mo-base) var(--mo-out);
}








@media (max-width: 820px) {
  .nav-links[data-open="true"] {
    transition:
      opacity   var(--mo-fast) var(--mo-out),
      transform var(--mo-fast) var(--mo-out);
  }
  @starting-style {
    .nav-links[data-open="true"] {
      opacity: 0;
      transform: translate3d(0, -10px, 0);
    }
  }
  


  html[data-wc-motion="on"] .nav-links[data-open="true"] a {
    animation: mo-in var(--mo-base) var(--mo-out) backwards;
  }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(1) { animation-delay: 20ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(2) { animation-delay: 46ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(3) { animation-delay: 72ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(4) { animation-delay: 98ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(5) { animation-delay: 124ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(6) { animation-delay: 150ms; }
  html[data-wc-motion="on"] .nav-links[data-open="true"] a:nth-child(n+7) { animation-delay: 168ms; }
}














[data-wc-card] {
  transition:
    transform  var(--mo-fast) var(--mo-out),
    box-shadow var(--mo-fast) var(--mo-out),
    border-color var(--mo-fast) var(--mo-out);
}




@media (hover: hover) and (pointer: fine) {
  html:not([data-wc-scrolling]) [data-wc-card]:hover {
    transform: translate3d(0, var(--mo-lift), 0);
    box-shadow: var(--lift-2);
    border-color: var(--border-2);
  }
}
[data-wc-card]:focus-visible,
[data-wc-card]:focus-within {
  transform: translate3d(0, var(--mo-lift), 0);
  box-shadow: var(--lift-2);
  border-color: var(--border-2);
}














@media (hover: hover) and (pointer: fine) {
  html:not([data-wc-scrolling]) [data-wc-card][data-wc-tilt] {
    transform:
      perspective(900px)
      translate3d(0, var(--mo-lift-now, 0px), 0)
      rotateX(var(--mo-rx, 0deg))
      rotateY(var(--mo-ry, 0deg));
    transition:
      transform 120ms linear,
      box-shadow var(--mo-fast) var(--mo-out),
      border-color var(--mo-fast) var(--mo-out);
  }
  

  html:not([data-wc-scrolling]) [data-wc-card][data-wc-tilt]:not(:hover) {
    transition:
      transform var(--mo-base) var(--mo-spring),
      box-shadow var(--mo-fast) var(--mo-out),
      border-color var(--mo-fast) var(--mo-out);
  }
}





[data-wc-card] { position: relative; }
[data-wc-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    color-mix(in srgb, var(--edge-lit) 26%, transparent) 50%,
    transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: opacity var(--mo-fast) var(--mo-out);
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-wc-scrolling]) [data-wc-card]:hover::after {
    opacity: 1; animation: mo-sweep var(--mo-sweep) var(--mo-out) 1;
  }
}
[data-wc-card]:focus-visible::after,
[data-wc-card]:focus-within::after { opacity: 1; animation: mo-sweep var(--mo-sweep) var(--mo-out) 1; }
@keyframes mo-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}



























   ★ IT IS DONE BY UN-MATCHING THE HOVER RULES, NOT BY OVERRIDING THEM, and
   that distinction is the whole reason this block is correct. The obvious
   version - a high-specificity `html[data-wc-scrolling] [data-wc-card]` that
   re-states `box-shadow` and `border-color` back to rest - has to NAME the
   resting values, and the seven classes motion.js stamps do not share them:
   `.card` rests on `--lift-1`/`--border` and `.status` on `--lift-2`/
   `--border-2`. One value for all seven would repaint half the cards on the
   page every time somebody scrolled - a second glitch shipped as the cure for
   the first. Gating the hover rules instead means the resting style is
   whatever that element's own sheet already says, which is right by
   construction and stays right when an owner restyles a panel.

   `transition: none` is likewise ABSENT on purpose: with the hover rules not
   matching there is nothing to transition away from, and forcing it would
   snap a card that a reader is genuinely hovering while the page happens to
   be settling.
   ------------------------------------------------------------------------- */

/* Press. A card that is also a control gives way under the finger. */
[data-wc-card]:active {
  transform: translate3d(0, -1px, 0) scale(.994);
  transition-duration: var(--mo-instant);
  transition-timing-function: var(--mo-press);
}

/* =========================================================================
   5. BUTTONS — press physics and an ember burst.
   -------------------------------------------------------------------------
   ★ FAST IN, SLOW OUT. site.css transitions `transform .16s` in both
     directions, so a press and its release take the same time — which is not
     how anything with mass behaves. The press is `--mo-instant` on the
     `--mo-press` curve (the finger arrives fast) and the release is
     `--mo-base` on `--mo-spring` (the control recovers). That asymmetry IS
     the weight; it is not a longer animation.
   ========================================================================= */
[data-wc-btn] {
  position: relative;
  overflow: hidden;               /* the burst is clipped to the control */
  transition:
    transform    var(--mo-base) var(--mo-spring),
    border-color var(--mo-fast) var(--mo-out),
    background   var(--mo-fast) var(--mo-out),
    box-shadow   var(--mo-fast) var(--mo-out);
}
[data-wc-btn]:active {
  transform: translate3d(0, 1px, 0) scale(.978);
  transition-duration: var(--mo-instant);
  transition-timing-function: var(--mo-press);
}
@media (hover: hover) and (pointer: fine) {
  [data-wc-btn]:hover { transform: translate3d(0, -2px, 0); }
}
[data-wc-btn]:focus-visible { transform: translate3d(0, -2px, 0); }

/* The burst. `--mo-px`/`--mo-py` are the press point in per-cent of the
   control, written once per press; the ember is the owner's accent, so a
   jungle palette bursts green and an ember one bursts ember. Nothing is
   created in the DOM — a ripple that appends a node per click leaves litter
   on a button somebody holds down. */
[data-wc-btn]::before {
  content: "";
  position: absolute;
  left: var(--mo-px, 50%);
  top: var(--mo-py, 50%);
  width: 8px; height: 8px;
  margin: -4px;
  border-radius: var(--r-round);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent-hi) 62%, transparent) 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 60%,
    transparent 72%);
}
html[data-wc-motion="on"] [data-wc-btn][data-wc-burst]::before {
  animation: mo-burst 620ms var(--mo-out) 1;
}
@keyframes mo-burst {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 0;   transform: scale(24); }
}




[data-wc-btn][aria-busy="true"] {
  cursor: progress;
  background-image: repeating-linear-gradient(
    115deg,
    color-mix(in srgb, var(--accent) 16%, transparent) 0 10px,
    transparent 10px 20px);
}
html[data-wc-motion="on"] [data-wc-btn][aria-busy="true"] {
  animation: mo-busy 900ms linear infinite;
}
@keyframes mo-busy {
  from { background-position: 0 0; }
  to   { background-position: 46px 0; }
}
html[data-wc-motion="on"] [data-wc-btn][data-wc-done] {
  animation: mo-done 520ms var(--mo-out) 1;
}
@keyframes mo-done {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--ok) 0%, transparent); }
}










html[data-wc-motion="on"] [data-wc-num][data-wc-delta="up"]   { animation: mo-delta-up   var(--mo-slow) var(--mo-out) 1; }
html[data-wc-motion="on"] [data-wc-num][data-wc-delta="down"] { animation: mo-delta-down var(--mo-slow) var(--mo-out) 1; }
@keyframes mo-delta-up {
  0%   { color: var(--ok); transform: translate3d(0, 2px, 0); }
  100% { color: inherit;   transform: none; }
}
@keyframes mo-delta-down {
  0%   { color: var(--warn); transform: translate3d(0, -2px, 0); }
  100% { color: inherit;     transform: none; }
}



html[data-wc-motion="on"] [data-wc-num][data-wc-swap] {
  animation: mo-swap var(--mo-base) var(--mo-out) 1;
}
@keyframes mo-swap {
  0%   { opacity: 0; transform: translate3d(0, 4px, 0); }
  100% { opacity: 1; transform: none; }
}




[data-wc-num] { font-variant-numeric: tabular-nums; }









.lb-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-round);
  pointer-events: none;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--ok) 70%, transparent);
}
.lb-pulse.part::after { border-color: color-mix(in srgb, var(--warn) 70%, transparent); }
.lb-pulse.off::after  { border-color: color-mix(in srgb, var(--bad) 70%, transparent); }

html[data-wc-motion="on"] #wc-livebar[data-wc-beat] .lb-pulse::after {
  animation: mo-beat 1100ms var(--mo-out) 1;
}
@keyframes mo-beat {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(3.6); }
}




#wc-livebar { position: fixed; }   
#wc-livebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 42%,
    color-mix(in srgb, var(--accent) 14%, transparent) 50%,
    transparent 58%);
  background-size: 240% 100%;
}
html[data-wc-motion="on"] #wc-livebar[data-wc-beat]::after {
  animation: mo-scan 1400ms var(--mo-out) 1;
}
@keyframes mo-scan {
  0%   { opacity: 1; background-position: 140% 0; }
  100% { opacity: 0; background-position: -40% 0; }
}


















html[data-wc-motion="on"] [data-wc-ico] {
  animation: mo-ico var(--mo-ico, 620ms) var(--mo-spring) backwards;
  animation-delay: var(--mo-ico-delay, 0ms);
}
@keyframes mo-ico {
  0%   { opacity: 0; transform: scale(.72) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}


html[data-wc-motion="on"] [data-wc-rule] {
  animation: mo-draw var(--mo-draw, 560ms) var(--mo-out) backwards;
  animation-delay: var(--mo-draw-delay, 0ms);
  transform-origin: left center;
}









[data-wc-skel] {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2);
  border-radius: var(--r-s);
  color: transparent;
}
[data-wc-skel]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--edge-lit) 18%, transparent) 50%,
    transparent 70%);
  background-size: 240% 100%;
}
html[data-wc-motion="on"] [data-wc-skel]::after {
  animation: mo-shimmer 1500ms linear infinite;
}
@keyframes mo-shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

html[data-wc-motion="on"] [data-wc-swap="in"] {
  animation: mo-crossfade var(--mo-base) var(--mo-out) 1;
}
@keyframes mo-crossfade {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}














.wc-flash {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--edge-lit) 22%, transparent),
    transparent 60%);
}
html[data-wc-motion="on"] .wc-flash[data-wc-lit] {
  animation: mo-flash 420ms var(--mo-out) 1;
}
@keyframes mo-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}













@view-transition { navigation: auto; }

::view-transition-old(root) { animation: mo-vt-out 140ms var(--mo-in) both; }
::view-transition-new(root) { animation: mo-vt-in  260ms var(--mo-out) both; }
@keyframes mo-vt-out { to   { opacity: 0; } }
@keyframes mo-vt-in  { from { opacity: 0; } }



















.nav        { view-transition-name: wc-nav; }
#wc-livebar { view-transition-name: wc-livebar; }






html[data-wc-motion="on"] body[data-wc-leaving] {
  opacity: .38;
  transition: opacity var(--mo-fast) var(--mo-in);
}


















@media (prefers-reduced-motion: no-preference) {
  body { animation: mo-page-in 240ms var(--mo-out) 1; }
  @keyframes mo-page-in { from { opacity: .5; } to { opacity: 1; } }
}















@media (prefers-reduced-motion: reduce) {
  html[data-wc-motion="on"] [data-wc-reveal],
  html[data-wc-motion="on"] [data-wc-reveal="pending"] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .wc-line-in,
  [data-wc-in],
  [data-wc-ico],
  [data-wc-draw]::before,
  [data-wc-rule] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-wc-card],
  [data-wc-card][data-wc-tilt],
  [data-wc-btn] { transform: none !important; }
  [data-wc-card]::after,
  [data-wc-btn]::before,
  #wc-livebar::after,
  .lb-pulse::after,
  [data-wc-skel]::after,
  .wc-flash { animation: none !important; opacity: 0 !important; }
  
  [data-wc-skel] { background-color: var(--surface-2); }
  .wc-ink { transition: none !important; }
  body[data-wc-leaving] { opacity: 1 !important; }
  @view-transition { navigation: none; }
}




@media (prefers-reduced-transparency: reduce) {
  [data-wc-card]::after,
  #wc-livebar::after,
  [data-wc-skel]::after,
  .wc-flash { display: none; }
  [data-wc-btn]::before { display: none; }
}








@media (forced-colors: active) {
  [data-wc-card]::after,
  [data-wc-btn]::before,
  #wc-livebar::after,
  [data-wc-skel]::after,
  .wc-flash { display: none; }
  .wc-ink, .nav::after { background: Highlight; forced-color-adjust: none; }
  [data-wc-card]:hover, [data-wc-card]:focus-within { box-shadow: none; }
}






@media print {
  [data-wc-reveal],
  [data-wc-reveal="pending"],
  [data-wc-in],
  .wc-line-in,
  [data-wc-skel] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    color: inherit !important;
  }
  .wc-line { overflow: visible !important; }
  .wc-ink, .nav::after, .wc-flash,
  [data-wc-card]::after, [data-wc-btn]::before,
  #wc-livebar::after, [data-wc-skel]::after { display: none !important; }
}