/* Aimlink | React Bits ports (styles for assets/rb.js).
   Every effect here is a vanilla port of a component from the React Bits library (reactbits.dev, MIT + Commons Clause),
   re-drawn in Aimlink's tokens. Each one is opt-in from rb.js; without the script the page is exactly what the HTML says.
   Rules kept: lime only on dark, no will-change, no animated width/height/top/left, nothing that only lives in a canvas,
   reduced motion gets the finished state. */

/* ───────────── shared ───────────── */
.rb-sw { display: inline-block; white-space: nowrap; }
.rb-ch { display: inline-block; }

/* ───────────── Counter (proof number): digits roll like an odometer ───────────── */
.rb-ctr { display: inline-flex; align-items: flex-start; }
.rb-ctr .rb-sep { display: block; height: 1em; line-height: 1; }
.rb-col { display: block; height: 1em; overflow: hidden; line-height: 1; text-align: center; }
.rb-strip { display: block; transition: transform 1700ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--k, 0) * 110ms); }
.rb-strip > span { display: block; height: 1em; line-height: 1; }

/* ───────────── GooeyNav (News: year links): a pill that stretches from link to link ───────────── */
.np-years { position: relative; }
.np-years > a { position: relative; z-index: 1; }
.rb-gloo {
  position: absolute; left: 0; top: 0; z-index: 0; width: 58px; height: 44px; border-radius: var(--radius-pill);
  background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transform-origin: 0 0;
  transition: opacity var(--duration-hover) var(--ease-hover);
}
.rb-gloo.is-on { opacity: 1; }

/* ───────────── BorderGlow (GO / CLUB / TARGET: the three numbers on dark): a hotspot runs along the hairline ───────────── */
.rb .rest-stats > div { position: relative; }
.rb .rest-stats > div::before, .rb .rest-stats > div::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; pointer-events: none; opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-hover);
}
.rb .rest-stats > div::before {
  height: 1px;
  background: radial-gradient(180px 1px at var(--mx, 50%) 50%, var(--color-lime), transparent 70%);
}
.rb .rest-stats > div::after {
  height: 3.5rem;
  background: radial-gradient(240px 3.5rem at var(--mx, 50%) 0, rgb(160 224 32 / 0.16), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .rb .rest-stats > div:hover::before, .rb .rest-stats > div:hover::after { opacity: 1; }
}

/* ───────────── SpotlightCard (GO / CLUB / TARGET: "Everything in …"): a soft light follows the pointer ───────────── */
.rb .index-group { position: relative; isolation: isolate; }
.rb .index-group::before {
  content: ""; position: absolute; inset: calc(var(--space-3) * -1) calc(var(--space-4) * -1); z-index: -1; border-radius: var(--radius-icon);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(12 20 28 / 0.07), transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) { .rb .index-group:hover::before { opacity: 1; } }

/* ───────────── GlareHover (News: story pictures): one diagonal sheen across the picture ───────────── */
.np-media { position: relative; overflow: hidden; }
.np-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.3) 50%, transparent 62%) -140% 0 / 260% 100% no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .np-open:hover .np-media::after, .np-open:focus-visible .np-media::after {
    opacity: 1; background-position: 140% 0; transition: background-position 900ms var(--ease-out);
  }
}

/* ───────────── RubberSegment (Contact: "Who are you?"): one thumb stretches to the chosen chip ───────────── */
.cp-chips.rb-seg { position: relative; }
.cp-chips.rb-seg .cp-chip { position: relative; z-index: 1; }
.cp-chips.rb-seg :checked + .chip { background: transparent; box-shadow: inset 0 0 0 2px transparent; color: var(--action-fg); }
.rb-seg-thumb {
  position: absolute; left: 0; top: 0; z-index: 0; width: 100px; height: 44px; border-radius: var(--radius-pill);
  background: var(--action-bg); transform-origin: 0 0; pointer-events: none;
}

/* ───────────── StatusMark (Contact: Copy the address): the tick draws itself ───────────── */
.rb-check { display: none; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rb-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rb-copied .rb-check { display: block; }
.rb-copied .rb-check path { animation: rb-tick 420ms var(--ease-out) 40ms forwards; }
@keyframes rb-tick { to { stroke-dashoffset: 0; } }

/* ───────────── WarmTooltip (the social icons): the first waits, the next ones are there at once ───────────── */
.rb-tip {
  position: fixed; left: 0; top: 0; z-index: 90; max-width: 16rem; padding: 7px 12px 6px; border-radius: 10px;
  background: var(--color-night); color: var(--color-snow); box-shadow: var(--shadow-md, 0 6px 20px rgb(12 20 28 / 0.28));
  font: 700 var(--type-label-size)/1.2 var(--font-text); letter-spacing: var(--type-label-tracking); text-transform: uppercase;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(0.94);
  transform-origin: 50% 100%; transition: opacity var(--duration-exit) var(--ease-out), transform var(--duration-exit) var(--ease-out);
}
.rb-tip.is-on { opacity: 1; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1); }
.rb-tip.is-flip { transform-origin: 50% 0; }
.rb-tip.is-instant { transition-duration: 0ms; }

/* ───────────── ImageTrail (Contact hero): bullet holes follow the pointer ───────────── */
.rb-trail { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rb-hole { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; animation: rb-hole 2200ms var(--ease-out) forwards; }
.rb-hole svg { display: block; width: 100%; height: 100%; }
.rb-hole::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--color-lime); opacity: 0;
  animation: rb-hole-ring 620ms var(--ease-out) forwards;
}
@keyframes rb-hole {
  0% { opacity: 0; transform: scale(0.35) rotate(var(--r, 0deg)); }
  6% { opacity: 1; transform: scale(1.14) rotate(var(--r, 0deg)); }
  12% { transform: scale(1) rotate(var(--r, 0deg)); }
  70% { opacity: 0.92; transform: scale(1) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: scale(1) rotate(var(--r, 0deg)); }
}
@keyframes rb-hole-ring { 0% { opacity: 0.85; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2); } }

/* ───────────── MagnetLines (About: the closing call): a field of needles that all aim at you ───────────── */
.about-close { position: relative; overflow: clip; }
.about-close .container { position: relative; }
.rb-ml {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 0 34%, #000 78%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 0 34%, #000 78%);
}
.rb-ml i {
  position: absolute; width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 2px;
  background: rgb(12 20 28 / 0.2); rotate: var(--a, 0deg);
}

/* ───────────── Noise (dark photo plates): film grain, still ───────────── */
.proof-plate, .rest-plate { overflow: clip; }
.rb-noise {
  position: absolute; inset: -64px; z-index: 1; pointer-events: none; background: var(--rb-noise) 0 0 / 128px 128px; opacity: 0.4;
}
.rb-noise.is-live { animation: rb-grain 900ms steps(1, end) infinite; }
@keyframes rb-grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-23px, 17px); } 34% { transform: translate(31px, -27px); }
  51% { transform: translate(-19px, -34px); } 68% { transform: translate(27px, 21px); } 85% { transform: translate(-37px, 5px); }
}

/* ───────────── TrueFocus (start page statement): a sight hops from word to word ───────────── */
.statement-line { position: relative; }
.rb-fw { display: inline-block; transition: opacity 320ms var(--ease-out); }
.rb-fw.is-dim { opacity: 0.32; }
.rb-focus { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 240ms var(--ease-out); }
.rb-focus.is-on { opacity: 1; }
.rb-focus i {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 0 solid var(--text);
  transition: transform 460ms var(--ease-in-out);
}
.rb-focus.is-still i { transition: none; }
.rb-focus i:nth-child(1) { border-top-width: 3px; border-left-width: 3px; }
.rb-focus i:nth-child(2) { border-top-width: 3px; border-right-width: 3px; }
.rb-focus i:nth-child(3) { border-bottom-width: 3px; border-right-width: 3px; }
.rb-focus i:nth-child(4) { border-bottom-width: 3px; border-left-width: 3px; }

/* ───────────── ShinyText (accent words on dark): one sweep of light when the heading arrives ───────────── */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rb-shine {
    background-image: linear-gradient(105deg, var(--emphasis) 36%, var(--color-white) 50%, var(--emphasis) 64%) !important;
    background-size: 300% 100%; background-position: 125% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: rb-shine 1300ms var(--ease-out) both;
  }
}
@keyframes rb-shine { from { background-position: 125% 0; } to { background-position: -25% 0; } }

/* ───────────── ScrollFloat / VariableProximity helpers ───────────── */
.rb-float .rb-ch { transform-origin: 50% 0; }
.rb-vp .rb-ch { text-align: center; }

/* ───────────── GradualBlur (dialogs): the text melts under the bottom edge ───────────── */
.rb-gblur { position: sticky; bottom: 0; z-index: 3; height: 64px; margin-top: -64px; pointer-events: none; }
.rb-gblur i { position: absolute; inset: 0; }
.rb-gblur i:nth-child(1) { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 50%, transparent 62%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 50%, transparent 62%); }
.rb-gblur i:nth-child(2) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(180deg, transparent 25%, #000 50%, #000 75%, transparent 87%); mask-image: linear-gradient(180deg, transparent 25%, #000 50%, #000 75%, transparent 87%); }
.rb-gblur i:nth-child(3) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 75%); mask-image: linear-gradient(180deg, transparent 50%, #000 75%); }

@media (prefers-reduced-motion: reduce) {
  .rb-strip { transition: none; }
  .rb-noise.is-live { animation: none; }
  .rb-shine { animation: none; }
  .rb-hole, .rb-hole::after { animation: none; }
  .rb-tip, .rb-focus, .rb-focus i, .rb-fw { transition-duration: 0ms; }
}