/* ==========================================================================
   SIGNAL — Components: chrome, controls, overlays, cards
   ========================================================================== */

@layer components {

  /* ======================================================================
     SCROLL PROGRESS RAIL
     ====================================================================== */
  .progress-rail {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    z-index: calc(var(--z-nav) + 5);
    pointer-events: none;
    background: transparent;
  }

  .progress-rail__bar {
    block-size: 100%;
    inline-size: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--scroll-progress, 0));
    background: linear-gradient(90deg, var(--accent), var(--brand) 45%, var(--accent-2));
    box-shadow: 0 0 14px var(--accent);
  }

  /* ======================================================================
     NAV
     ====================================================================== */
  .nav {
    position: fixed;
    inset-block-start: clamp(0.75rem, 1.6vw, 1.25rem);
    inset-inline: 0;
    z-index: var(--z-nav);
    display: flex;
    justify-content: center;
    padding-inline: var(--gutter);
    pointer-events: none;
  }

  .nav__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    inline-size: min(100%, var(--shell));
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--bg) 72%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--shadow-sm);
    transition: background var(--t-mid) var(--ease-out-quint),
                border-color var(--t-mid) var(--ease-out-quint),
                box-shadow var(--t-mid) var(--ease-out-quint),
                transform var(--t-mid) var(--ease-out-expo);
  }

  .nav.is-stuck .nav__inner {
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
  }

  .nav.is-hidden { transform: translateY(-160%); transition: transform var(--t-mid) var(--ease-out-expo); }

  /* Brand mark */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-inline-end: 0.35rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: -0.03em;
    white-space: nowrap;
  }

  .brand__mark {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 9px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.95rem;
    font-weight: 800;
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease-spring);
  }

  .brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }

  .brand__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.75) 50%, transparent 70%);
    transform: translateX(-140%);
    animation: mark-sheen 4.5s var(--ease-in-out) infinite;
  }

  @keyframes mark-sheen {
    0%, 65% { transform: translateX(-140%); }
    100% { transform: translateX(140%); }
  }

  .brand__text .brand__last { color: var(--ink-3); font-weight: 500; }

  /* Links */
  .nav__links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-inline: auto;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-2);
    transition: color var(--t-fast) var(--ease-out-quint);
    white-space: nowrap;
  }

  .nav__link span.idx {
    font-family: var(--font-mono);
    font-size: 0.68em;
    color: var(--ink-3);
    transition: color var(--t-fast);
  }

  .nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--surface-2);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--t-fast) var(--ease-out-quint),
                transform var(--t-fast) var(--ease-spring);
  }

  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::before { opacity: 1; transform: scale(1); }

  .nav__link.is-active { color: var(--ink); }
  .nav__link.is-active span.idx { color: var(--accent); }
  .nav__link.is-active::after {
    content: "";
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* ======================================================================
     ICON BUTTONS / TOGGLES
     ====================================================================== */
  .icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    color: var(--ink-2);
    background: var(--surface);
    transition: color var(--t-fast), border-color var(--t-fast),
                background var(--t-fast), transform var(--t-fast) var(--ease-spring);
  }

  .icon-btn:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-2);
    transform: translateY(-2px);
  }

  .icon-btn svg { inline-size: 1.05rem; block-size: 1.05rem; }

  /* Theme toggle — sun/moon crossfade */
  .theme-toggle .t-sun,
  .theme-toggle .t-moon {
    grid-area: 1 / 1;
    transition: opacity var(--t-mid) var(--ease-out-quint),
                transform var(--t-mid) var(--ease-spring);
  }

  .theme-toggle .t-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
  .theme-toggle .t-moon { opacity: 1; transform: rotate(0) scale(1); }

  :root[data-theme="light"] .theme-toggle .t-sun { opacity: 1; transform: rotate(0) scale(1); }
  :root[data-theme="light"] .theme-toggle .t-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle .t-sun { opacity: 1; transform: rotate(0) scale(1); }
    :root:not([data-theme]) .theme-toggle .t-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
  }

  /* Command palette trigger */
  .cmd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--step--1);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  }

  .cmd-trigger:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
  .cmd-trigger kbd { pointer-events: none; }

  @media (max-width: 1080px) { .cmd-trigger .cmd-trigger__label { display: none; } }

  /* Hamburger — flex column with a fixed gap so the X maths is exact:
     bar height 2px + gap 4px = 6px between bar centres. */
  .burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
  }

  .burger span {
    display: block;
    inline-size: 1rem;
    block-size: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--t-mid) var(--ease-spring), opacity var(--t-fast);
  }

  body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ======================================================================
     BUTTONS
     ====================================================================== */
  .btn {
    --mx: 0px;
    --my: 0px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    translate: var(--mx) var(--my);
    transition: translate 420ms var(--ease-out-expo),
                color var(--t-fast) var(--ease-out-quint),
                border-color var(--t-fast),
                box-shadow var(--t-mid) var(--ease-out-quint);
  }

  .btn__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; }
  .btn svg { inline-size: 1em; block-size: 1em; }

  /* Wipe fill on hover */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--btn-wipe, var(--ink));
    transform: translateY(101%);
    transition: transform 520ms var(--ease-out-expo);
  }
  .btn:hover::before { transform: translateY(0); }

  .btn--brand {
    background: var(--brand);
    color: var(--on-brand);
    --btn-wipe: var(--ink);
    box-shadow: 0 8px 26px -12px var(--brand);
  }
  .btn--brand:hover { color: var(--bg); box-shadow: 0 14px 40px -14px var(--brand); }

  .btn--fill {
    background: var(--ink);
    color: var(--bg);
    --btn-wipe: var(--brand);
  }
  .btn--fill:hover { color: var(--on-brand); }

  .btn--ghost {
    border-color: var(--line-strong);
    color: var(--ink);
    --btn-wipe: var(--ink);
  }
  .btn--ghost:hover { color: var(--bg); border-color: var(--ink); }

  .btn--sm { padding: 0.55rem 1rem; font-size: var(--step--2); }

  .btn--icon-slide svg { transition: transform var(--t-mid) var(--ease-spring); }
  .btn--icon-slide:hover svg { transform: translateX(4px); }

  /* ======================================================================
     MOBILE MENU
     ====================================================================== */
  .menu {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    display: grid;
    align-content: center;
    gap: 0.25rem;
    padding: 6rem var(--gutter) 3rem;
    /* Opaque: a translucent sheet let the huge hero type read straight through. */
    background:
      radial-gradient(ellipse 90% 55% at 100% 0%, var(--accent-soft), transparent 70%),
      var(--bg);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    clip-path: circle(0% at calc(100% - 3rem) 3rem);
    transition: clip-path 640ms var(--ease-out-expo);
    visibility: hidden;
  }

  body.menu-open .menu {
    clip-path: circle(150% at calc(100% - 3rem) 3rem);
    visibility: visible;
  }

  .menu__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-block: 0.45rem;
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.5s var(--ease-out-expo), translate 0.6s var(--ease-out-expo), color var(--t-fast);
  }

  body.menu-open .menu__link { opacity: 1; translate: 0 0; }
  body.menu-open .menu__link:nth-child(1) { transition-delay: 0.10s; }
  body.menu-open .menu__link:nth-child(2) { transition-delay: 0.16s; }
  body.menu-open .menu__link:nth-child(3) { transition-delay: 0.22s; }
  body.menu-open .menu__link:nth-child(4) { transition-delay: 0.28s; }
  body.menu-open .menu__link:nth-child(5) { transition-delay: 0.34s; }
  body.menu-open .menu__link:nth-child(6) { transition-delay: 0.40s; }

  .menu__link:hover { color: var(--accent); }
  .menu__link .idx { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); }

  .menu__foot {
    margin-block-start: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  @media (max-width: 900px) {
    .nav__links { display: none; }
    .burger { display: flex; }
    .cmd-trigger { display: none; }
    .nav__inner { justify-content: space-between; }
  }

  @media (min-width: 901px) {
    .menu { display: none; }
  }

  /* ======================================================================
     CUSTOM CURSOR
     ====================================================================== */
  .cursor {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    will-change: transform;
    opacity: 0;
    transition: opacity var(--t-mid);
  }

  body.cursor-ready .cursor { opacity: 1; }

  .cursor__dot {
    inline-size: 7px;
    block-size: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--brand);
    mix-blend-mode: difference;
  }

  .cursor__ring {
    inline-size: 34px;
    block-size: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: inline-size 320ms var(--ease-spring),
                block-size 320ms var(--ease-spring),
                margin 320ms var(--ease-spring),
                background-color var(--t-mid),
                border-color var(--t-mid);
  }

  .cursor__ring::after {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-brand);
    opacity: 0;
    transition: opacity var(--t-fast);
  }

  body.cursor-hover .cursor__ring {
    inline-size: 62px;
    block-size: 62px;
    margin: -31px 0 0 -31px;
    background: var(--brand);
    border-color: transparent;
  }

  body.cursor-hover .cursor__ring::after { opacity: 1; }
  body.cursor-hover .cursor__dot { opacity: 0; }

  @media (hover: none), (pointer: coarse) {
    .cursor { display: none; }
  }

  /* ======================================================================
     TICKER / MARQUEE
     ====================================================================== */
  .ticker {
    --dur: 34s;
    position: relative;
    display: flex;
    overflow: hidden;
    padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
    border-block: 1px solid var(--line);
    background: var(--surface);
    user-select: none;
    rotate: var(--tilt, 0deg);
    transform: skewY(calc(clamp(-40, var(--scroll-velocity, 0), 40) * 0.13deg));
    /* No transition: --scroll-velocity is already smoothed in JS, so a
       transition here just restarts itself every frame and lags behind. */
  }

  .ticker__track {
    display: flex;
    flex: 0 0 auto;
    gap: 2.5rem;
    padding-inline-end: 2.5rem;
    align-items: center;
    animation: ticker-run var(--dur) linear infinite;
    animation-direction: var(--dir, normal);
    will-change: transform;
  }

  .ticker:hover .ticker__track { animation-play-state: paused; }

  @keyframes ticker-run {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  .ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--ink);
  }

  .ticker__item i {
    color: var(--accent);
    font-style: normal;
    font-size: 0.7em;
  }

  .ticker--outline .ticker__item {
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
  }

  /* ======================================================================
     CHIPS + PILLS
     ====================================================================== */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
  }

  .pill--live::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: #35d07f;
    box-shadow: 0 0 0 0 rgb(53 208 127 / 0.6);
    animation: live-ping 2s var(--ease-out-quint) infinite;
  }

  @keyframes live-ping {
    0%   { box-shadow: 0 0 0 0 rgb(53 208 127 / 0.55); }
    70%  { box-shadow: 0 0 0 9px rgb(53 208 127 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(53 208 127 / 0); }
  }

  /* ======================================================================
     CARD SHELL (shared) — spotlight + border glow
     ====================================================================== */
  .card {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--t-mid) var(--ease-out-quint),
                transform 520ms var(--ease-out-expo),
                box-shadow var(--t-mid) var(--ease-out-quint),
                background var(--t-mid);
  }

  /* Pointer-tracked spotlight */
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(
      420px circle at var(--px, 50%) var(--py, 50%),
      color-mix(in oklab, var(--accent) 16%, transparent),
      transparent 62%
    );
    transition: opacity var(--t-mid) var(--ease-out-quint);
  }

  .card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
  }
  .card:hover::before { opacity: 1; }

  .card__kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ======================================================================
     COMMAND PALETTE
     ====================================================================== */
  .palette {
    position: fixed;
    inset: 0;
    z-index: var(--z-palette);
    display: grid;
    place-items: start center;
    padding: clamp(4rem, 12vh, 9rem) var(--gutter) var(--gutter);
    background: color-mix(in oklab, var(--bg) 62%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--ease-out-quint), visibility 260ms;
  }

  .palette.is-open { opacity: 1; visibility: visible; }

  .palette__panel {
    inline-size: min(100%, 620px);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--surface-solid) 92%, transparent);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    translate: 0 -18px;
    scale: 0.97;
    transition: translate 360ms var(--ease-out-expo), scale 360ms var(--ease-out-expo);
  }

  .palette.is-open .palette__panel { translate: 0 0; scale: 1; }

  .palette__search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-block-end: 1px solid var(--line);
  }

  .palette__search svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--ink-3); flex: none; }

  .palette__input {
    flex: 1;
    border: 0;
    background: none;
    outline: none;
    font-size: var(--step-0);
    color: var(--ink);
  }
  .palette__input::placeholder { color: var(--ink-3); }

  .palette__list {
    max-block-size: min(52vh, 420px);
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
  }

  .palette__group-label {
    padding: 0.7rem 0.75rem 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .palette__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    inline-size: 100%;
    padding: 0.7rem 0.75rem;
    border-radius: var(--r-sm);
    text-align: start;
    color: var(--ink-2);
    transition: background var(--t-fast), color var(--t-fast);
  }

  .palette__item[aria-selected="true"] {
    background: var(--surface-2);
    color: var(--ink);
  }

  .palette__item[aria-selected="true"] .palette__glyph {
    background: var(--brand);
    color: var(--on-brand);
    border-color: transparent;
  }

  .palette__glyph {
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.85rem;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  }

  .palette__meta { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

  .palette__foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-block-start: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
    flex-wrap: wrap;
  }

  .palette__foot span { display: inline-flex; align-items: center; gap: 0.35rem; }

  .palette__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ink-3);
    font-size: var(--step--1);
  }

  /* ======================================================================
     TOAST
     ====================================================================== */
  .toast-stack {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: var(--z-overlay);
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    pointer-events: none;
  }

  .toast {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--surface-solid) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md);
    font-size: var(--step--1);
    color: var(--ink);
    animation: toast-in 420ms var(--ease-spring) both;
  }

  .toast.is-out { animation: toast-out 300ms var(--ease-out-quint) both; }
  .toast b { color: var(--accent); font-weight: 600; }

  @keyframes toast-in {
    from { opacity: 0; translate: 0 18px; scale: 0.94; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes toast-out {
    to { opacity: 0; translate: 0 10px; scale: 0.96; }
  }

  /* ======================================================================
     BACK TO TOP
     ====================================================================== */
  .to-top {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in oklab, var(--surface-solid) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--ink-2);
    opacity: 0;
    translate: 0 18px;
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease-out-quint),
                translate var(--t-mid) var(--ease-out-expo),
                color var(--t-fast), border-color var(--t-fast);
  }

  .to-top.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
  .to-top:hover { color: var(--ink); border-color: var(--accent); }

  .to-top__ring {
    position: absolute;
    inset: -1px;
    rotate: -90deg;
  }
  .to-top__ring circle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-dasharray: 100;
    /* Updated every frame from the scroll engine — a transition would only
       ever be chasing a value that already moved. */
    stroke-dashoffset: calc(100 - (var(--scroll-progress, 0) * 100));
  }
}