/* ==========================================================================
   AMINO — COMPONENTS
   Each block below maps to one React component when this ports to Next.js.
   ========================================================================== */

/* ==========================================================================
   1. CURSOR
   Two bodies: a small solid dot that tracks 1:1, and a lagging ring that
   eases behind it. The lag is what makes it feel physical rather than glued.
   ========================================================================== */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: difference;
}

.cursor__dot {
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #FFF;
}

.cursor__ring {
  position: absolute;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFF;
  opacity: 0;
  white-space: nowrap;
}

/* Hover states, driven from js/lib/cursor.js via data-cursor */
.cursor.is-link  .cursor__ring { border-color: var(--ember); }
.cursor.is-view  .cursor__ring { background: var(--ember); border-color: var(--ember); }
.cursor.is-view  .cursor__label { opacity: 1; }
.cursor.is-hide  { opacity: 0; }

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

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.9375rem 1.75rem 0.9375rem 1.75rem;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}

/* The fill wipe. Scales from the bottom edge on enter, exits through the
   top — so repeated hovers always travel the same direction. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.45s var(--e-out);
}

.btn:hover::before { transform: scaleY(1); }

/* -- Primary: paper pill, with the ember light-capsule sitting inside it.
      Reference move — a small orange streak object riding in the button.  */
.btn--primary {
  background: var(--paper);
  color: var(--ink);
  padding-inline-start: 0.4375rem;
}
.btn--primary::before { background: var(--ink); }
.btn--primary:hover { color: var(--paper); }

.btn__capsule {
  width: 3.25rem;
  height: 2.125rem;
  border-radius: var(--r-pill);
  background: radial-gradient(120% 160% at 30% 50%, #FFF3E0 0%, var(--amber) 26%, var(--ember) 62%, #8F1F00 100%);
  box-shadow: 0 0 1.5rem -0.25rem var(--ember-glow);
  flex: none;
  position: relative;
  overflow: hidden;
}

/* the streak travelling through the capsule */
.btn__capsule::after {
  content: "";
  position: absolute;
  inset: 30% -40% 30% -40%;
  background: linear-gradient(90deg, transparent, #FFF 45%, #FFE2BC 60%, transparent);
  filter: blur(3px);
  opacity: 0.85;
  transform: translateX(-40%);
  transition: transform 0.7s var(--e-out);
}
.btn:hover .btn__capsule::after { transform: translateX(40%); }

/* -- Ghost: hairline outline, fills to solid on hover */
.btn--ghost {
  border: var(--hair) solid var(--line);
  color: var(--fg);
}
.btn--ghost::before { background: var(--fg); }
.btn--ghost:hover { color: var(--bg); border-color: var(--fg); }

/* -- Ember: the single loudest element. One per viewport, maximum. */
/* --ember-fill, not --ember: white on the bright accent is only 3.5:1, which
   fails AA for button text. The deeper fill reads at 4.66:1 and is close
   enough that the two sit together without looking like different oranges. */
.btn--ember {
  background: var(--ember-fill);
  color: #FFF;
  box-shadow: 0 0.75rem 2.5rem -0.75rem var(--ember-glow);
}
.btn--ember::before { background: var(--ink); }

.btn--lg { padding: 1.125rem 2.25rem; font-size: var(--t-body); }
.btn--sm { padding: 0.6875rem 1.25rem; font-size: 0.8125rem; }

.btn__arrow {
  display: inline-block;
  transition: transform var(--d-fast) var(--e-out);
}
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

/* -- Text link: mono, rule underneath that wipes left→right on hover */
/* min-height meets the 24px WCAG 2.5.8 target minimum — measured at 25px
   before, which passed only by accident and failed once line-height shifted */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: -0.01em;
  color: var(--fg);
  padding-block-end: 2px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--e-out);
}
.link:hover::after { transform: scaleX(1); transform-origin: left center; }
.link:hover { color: var(--ember-fg); }

.link--on { color: var(--ember-fg); }
.link--on::after { transform: scaleX(1); }

/* ==========================================================================
   3. INLINE PILL OBJECT
   The signature move: a small light-streak capsule set *inside* a headline,
   mid-sentence, at cap-height. Costs nothing, reads as art direction.
   ========================================================================== */

.pill-obj {
  display: inline-block;
  vertical-align: middle;
  width: 1.55em;
  height: 0.72em;
  margin-inline: 0.12em;
  border-radius: var(--r-pill);
  background: radial-gradient(130% 180% at 26% 50%, #FFFAF0 0%, var(--amber) 24%, var(--ember) 58%, #7A1A00 100%);
  box-shadow: 0 0 1.1em -0.15em var(--ember-glow);
  position: relative;
  overflow: hidden;
  translate: 0 -0.06em;
}

.pill-obj::after {
  content: "";
  position: absolute;
  inset: 22% -50% 22% -50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 48%, transparent);
  filter: blur(2px);
  animation: pill-sweep 3.4s var(--e-inout) infinite;
}

@keyframes pill-sweep {
  0%, 62%  { transform: translateX(-55%); }
  100%     { transform: translateX(55%); }
}

/* Monochrome variant for paper sections where ember would over-spend */
.pill-obj--mono {
  background: linear-gradient(100deg, #3A3A38, #0A0A0A 60%);
  box-shadow: none;
}

/* The 6-point brand asterisk (Reload move), used as section punctuation */
.star {
  display: inline-block;
  width: 1em; height: 1em;
  color: var(--ember-fg);
  flex: none;
}
.star svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.star--spin svg { animation: star-spin 14s linear infinite; }

@keyframes star-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   4. NAV
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: clamp(0.875rem, 1.6vw, 1.5rem) 0;
  transition: transform 0.55s var(--e-out), background 0.4s linear;
  will-change: transform;
}

.nav.is-hidden { transform: translateY(-105%); }

.nav.is-solid .nav__inner {
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-color: var(--glass-line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--r-pill);
  border: var(--hair) solid transparent;
  transition: background 0.4s linear, border-color 0.4s linear, padding 0.4s var(--e-out);
}

.nav__mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: var(--w-medium);
  letter-spacing: -0.04em;
  color: var(--paper);
  flex: none;
}

.nav__glyph {
  width: 1.5rem; height: 1.5rem;
  flex: none;
}
.nav__glyph svg { width: 100%; height: 100%; display: block; }

/* the supplied Amino mark is white-on-transparent, so it needs no filter */
.nav__logo {
  height: clamp(1.5rem, 2vw, 1.875rem);
  width: auto;
  max-width: none;
  display: block;
  transition: opacity 0.35s var(--e-out), filter 0.4s var(--e-out);
}
.nav__mark:hover .nav__logo { opacity: 0.72; }

/* ==========================================================================
   NAV — LIGHT-SECTION MODE
   The bar floats over both ink and paper sections. A single fixed colour is
   invisible over one of them, so the nav reads the theme of whatever section
   is beneath it (see js/core/nav.js) and flips.
   ========================================================================== */

.nav[data-on="paper"] .nav__link { color: rgba(10, 10, 10, 0.6); }
.nav[data-on="paper"] .nav__link:hover,
.nav[data-on="paper"] .nav__link[aria-current="page"] { color: var(--ink); }

/* the mark ships as pure white — invert lands it on near-black */
.nav[data-on="paper"] .nav__logo { filter: invert(1); }

.nav[data-on="paper"] .nav__burger { border-color: rgba(10, 10, 10, 0.16); }
.nav[data-on="paper"] .nav__burger span { background: var(--ink); }

.nav[data-on="paper"].is-solid .nav__inner {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(10, 10, 10, 0.07);
}

/* the primary pill is paper-on-ink by default — that's white on white here */
.nav[data-on="paper"] .btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.nav[data-on="paper"] .btn--primary::before { background: var(--paper); }
.nav[data-on="paper"] .btn--primary:hover { color: var(--ink); }

.nav__reg {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  vertical-align: super;
  color: var(--steel);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}

.nav__link {
  position: relative;
  font-size: var(--t-small);
  color: rgba(245, 244, 242, 0.7);
  transition: color var(--d-fast) var(--e-out);
  padding-block: 0.25rem;
}

.nav__link:hover, .nav__link[aria-current="page"] { color: var(--paper); }

/* the active dot sits under the item, reference move */
.nav__link::after {
  content: "";
  position: absolute;
  bottom: -0.375rem; left: 50%;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--ember);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-back);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { opacity: 1; transform: scale(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav__burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: var(--hair) solid var(--glass-line);
  place-items: center;
  gap: 5px;
  grid-auto-flow: row;
}
.nav__burger span {
  display: block;
  width: 16px; height: 1px;
  background: var(--paper);
  transition: transform 0.4s var(--e-out), opacity 0.2s linear;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* -- Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--ink);
  padding: 7rem var(--gutter) var(--gutter);
  display: grid;
  align-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.8s var(--e-inout), visibility 0s linear 0.8s;
}
.drawer.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.8s var(--e-inout), visibility 0s linear 0s;
}

.drawer__list { display: grid; gap: 0.25rem; }

.drawer__item { overflow: clip; }

.drawer__link {
  display: block;
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.035em;
  line-height: 1.16;
  color: var(--paper);
  transform: translateY(110%);
}
.drawer.is-open .drawer__link {
  transform: translateY(0);
  transition: transform 0.9s var(--e-out) calc(var(--i, 0) * 0.055s + 0.12s);
}

.drawer__foot {
  display: grid;
  gap: var(--s-4);
  padding-block-start: var(--s-8);
  border-top: var(--hair) solid var(--ink-line);
}

/* ==========================================================================
   5. CARDS
   ========================================================================== */

.card {
  position: relative;
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: clip;
  isolation: isolate;
  transition: transform 0.6s var(--e-out), background 0.5s var(--e-out);
}

.card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1;
  background: transparent;
}

.card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s var(--e-out);
}
.card.is-active .card__media { opacity: 1; }

/* ==========================================================================
   6. WEBGL SURFACES
   Every "image" on this site is generated. These are the mount points.
   ========================================================================== */

.surface {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  background: #0C0C0C;
  isolation: isolate;
}

.surface canvas { display: block; width: 100%; height: 100%; }

.surface__canvas { position: absolute; inset: 0; }

/* CSS-only streak field — the cheap fallback and the base layer under WebGL */
.streak-field {
  position: absolute;
  inset: 0;
  overflow: clip;
  background:
    radial-gradient(120% 70% at 8% 52%, rgba(255,77,13,.5), transparent 62%),
    radial-gradient(90% 55% at 62% 48%, rgba(255,160,51,.36), transparent 66%),
    linear-gradient(180deg, #0B0B0B, #171412 50%, #0B0B0B);
}

.streak-field::before,
.streak-field::after {
  content: "";
  position: absolute;
  left: -25%; right: -25%;
  height: 2px;
  background: var(--streak);
  filter: blur(1.5px);
  opacity: 0.9;
}
.streak-field::before { top: 44%; transform: scaleY(3); filter: blur(7px); opacity: .55; }
.streak-field::after  { top: 51%; }

.streak-field--soft { opacity: 0.6; }

/* Monochrome "long exposure" plate — pure CSS, used behind editorial blocks */
.plate {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(96deg,
      rgba(255,255,255,.055) 0 1px,
      transparent 1px 7px),
    radial-gradient(80% 120% at 24% 30%, #4A4A48, transparent 70%),
    radial-gradient(70% 100% at 78% 70%, #2A2A28, transparent 72%),
    linear-gradient(160deg, #1C1C1A, #0A0A0A);
  filter: contrast(1.15) saturate(0);
}

.plate--warm { filter: contrast(1.18) saturate(0.35) hue-rotate(-8deg); }

/* ==========================================================================
   7. MARQUEE
   ========================================================================== */

.marquee {
  display: flex;
  overflow: clip;
  width: 100%;
  user-select: none;
  gap: 0;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline-end: clamp(2rem, 5vw, 5rem);
  flex: none;
  will-change: transform;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  color: var(--fg-ghost);
  white-space: nowrap;
  transition: color 0.4s var(--e-out);
  flex: none;
}
.marquee__item:hover { color: var(--fg); }

/* -- CLIENT LOGOS ----------------------------------------------------------
   The supplied marks span teal gradients, mid-blue and near-white, which on
   one dark strip would read as six unrelated stickers. Knocking them all to
   flat white unifies the row, keeps the palette monochrome, and is what the
   reference decks do. Colour returns on hover as the reward.              */

.marquee__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: clamp(1.5rem, 2.4vw, 2.25rem);
  opacity: 0.5;
  transition: opacity 0.45s var(--e-out), filter 0.45s var(--e-out),
              transform 0.55s var(--e-out);
}

.marquee__logo img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  /* brightness(0) crushes any colour to black, invert(1) lifts it to white —
     works for both the light and the dark source marks. */
  filter: brightness(0) invert(1);
}

.marquee__logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* restore the mark's real colour on hover */
.marquee__logo:hover img { filter: none; }

/* Apex Amino and Patriot ship as white-on-transparent already; inverting
   them would turn them black, so they only need the opacity treatment. */
.marquee__logo[data-white] img { filter: none; }
.marquee__logo[data-white] { opacity: 0.42; }
.marquee__logo[data-white]:hover { opacity: 0.95; }

.marquee__dot {
  width: 0.3125rem; height: 0.3125rem;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
}

/* edge fade so items dissolve rather than clip */
.marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* ==========================================================================
   8. ACCORDION
   ========================================================================== */

.acc__item {
  border-bottom: var(--hair) solid var(--line);
}
.acc__item:first-child { border-top: var(--hair) solid var(--line); }

.acc__btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  text-align: left;
  padding-block: clamp(1.375rem, 2.4vw, 2.125rem);
  color: var(--fg-ghost);
  transition: color 0.45s var(--e-out);
}

.acc__item.is-open .acc__btn,
.acc__btn:hover { color: var(--fg); }

.acc__idx {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  align-self: center;
}
.acc__item.is-open .acc__idx { color: var(--ember-fg); }

.acc__q {
  font-size: clamp(1.125rem, 2.1vw, 1.75rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.025em;
  line-height: 1.22;
}

.acc__sign {
  position: relative;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: var(--hair) solid var(--line);
  flex: none;
  align-self: center;
  transition: background 0.45s var(--e-out), border-color 0.45s var(--e-out), transform 0.55s var(--e-out);
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 32%;
  height: 1px;
  margin-top: -0.5px;
  background: currentColor;
  transition: transform 0.5s var(--e-out);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign { background: var(--ember); border-color: var(--ember); color: #FFF; transform: rotate(180deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }

.acc__panel {
  overflow: hidden;
  height: 0;
}

.acc__body {
  padding-block: 0 clamp(1.5rem, 2.6vw, 2.25rem);
  padding-inline-start: clamp(0px, 6vw, 5.5rem);
  max-width: 68ch;
  color: var(--fg-mute);
  font-size: var(--t-body);
  line-height: 1.65;
}

/* ==========================================================================
   9. FORM
   ========================================================================== */

.field { position: relative; display: grid; gap: 0.5rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.field__input {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: var(--hair) solid var(--glass-line);
  color: var(--fg);
  font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

.field__input::placeholder { color: #55554F; }
.field__input:focus {
  outline: none;
  border-color: var(--ember);
  background: rgba(255, 255, 255, 0.08);
}
.field__input:focus-visible { outline: none; }

select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.field__input option { background: var(--ink-card); color: var(--paper); }

textarea.field__input { resize: vertical; min-height: 7rem; line-height: 1.55; }

.checklist { display: grid; gap: 0.875rem; }

.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--t-small);
  color: var(--fg-mute);
}

.checklist__tick {
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: var(--ember);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 0.125rem;
}
.checklist__tick svg { width: 0.625rem; height: 0.625rem; stroke: #FFF; fill: none; stroke-width: 2.5; }

/* ==========================================================================
   10. REVEAL PRIMITIVES
   Pre-animation state. JS clears these; if JS fails, the .no-js rule below
   makes everything visible so the page is never blank.
   ========================================================================== */

.r-line   { display: block; overflow: hidden; }
.r-line > * { display: block; will-change: transform; }

.r-mask   { clip-path: inset(0 0 100% 0); }
.r-fade   { opacity: 0; }
.r-up     { opacity: 0; transform: translateY(2.5rem); }

html.no-js .r-mask,
html.no-js .r-fade,
html.no-js .r-up { clip-path: none; opacity: 1; transform: none; }

/* ==========================================================================
   11. PAGE TRANSITION CURTAIN
   ========================================================================== */

.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  clip-path: inset(0 0 100% 0);
}

.curtain.is-active { pointer-events: all; }

.curtain__mark {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.05em;
  color: var(--paper);
  opacity: 0;
}

/* ==========================================================================
   12. PRELOADER
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 10);
  background: var(--ink);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
}

.loader__center {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-6);
}

.loader__word {
  font-size: clamp(3rem, 13vw, 9rem);
  font-weight: var(--w-medium);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--paper);
  display: flex;
  overflow: hidden;
}
.loader__word span { display: inline-block; will-change: transform; }

.loader__bar {
  width: min(22rem, 60vw);
  height: 1px;
  background: var(--ink-line);
  position: relative;
  overflow: hidden;
}
.loader__bar i {
  position: absolute;
  inset: 0;
  background: var(--streak);
  transform: scaleX(0);
  transform-origin: left center;
}

.loader__foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-light);
}

.loader__pct { font-variant-numeric: tabular-nums; color: var(--paper); }