/* ============================================================================
   LUXWRAP — COMPONENTS
   The HUD kit: panels, buttons, chips, bars, stars, pills, orbs, tickers.
   Rule we hold to: glow means STATE (active / hovered / earned), never decor.
   ========================================================================= */

/* ------------------------------------------------------------------ shapes
   The bevel polygons are declared on the UNIVERSAL selector, not on :root.

   This is load-bearing. A custom property's computed value is its specified
   value *with its var()s already substituted* — so if --clip-bevel lived on
   :root, its --cut would be frozen at :root's 14px and every per-component
   `--cut: 8px` would be silently inert (every chip, button and badge would
   render the same 14px cut and the small ones would deform).
   Declaring it on every element instead means each element resolves the
   polygon against ITS OWN --cut. Set --cut, get that bevel. That's the whole
   contract of this kit, so don't move these back into :root.                */
:root {
  --cut: 14px;
  --clip-tag: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

*,
*::before,
*::after {
  --clip-bevel: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  --clip-bevel-alt: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  --clip-notch: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
}

/* ------------------------------------------------------------------ panel
   Bevelled panel with a REAL 1px hairline. clip-path eats borders, so we
   stack: outer = the hairline colour, ::before (inset 1px) = the fill.       */
.panel {
  --cut: 14px;
  --panel-line: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 42%, rgba(44, 233, 255, 0.16));
  --panel-fill: linear-gradient(160deg, rgba(23, 31, 47, 0.94), rgba(10, 14, 23, 0.97));
  position: relative;
  isolation: isolate;
  padding: 1px;
  clip-path: var(--clip-bevel);
  background: var(--panel-line);
  transition: filter var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--clip-bevel);
  background: var(--panel-fill);
  z-index: -1;
}
.panel__body {
  padding: var(--sp-5);
}
.panel--alt {
  clip-path: var(--clip-bevel-alt);
}
.panel--alt::before {
  clip-path: var(--clip-bevel-alt);
}
/* The one place a real backdrop blur earns its cost: a glass panel sitting on
   top of a photograph. Budget it — never more than one of these on screen at a
   time (hero card / about profile / contact panel live in different sections). */
.panel--glass {
  --panel-fill: linear-gradient(160deg, rgba(20, 28, 44, 0.74), rgba(8, 12, 20, 0.84));
  backdrop-filter: blur(10px);
}
.panel--flat {
  --panel-fill: linear-gradient(160deg, rgba(16, 22, 34, 0.9), rgba(9, 12, 20, 0.95));
}
.panel--hot {
  --panel-line: linear-gradient(150deg, rgba(44, 233, 255, 0.6), rgba(139, 92, 255, 0.32) 55%, rgba(255, 61, 139, 0.5));
  filter: drop-shadow(0 0 20px rgba(44, 233, 255, 0.14));
}
.panel--holo {
  --panel-line: var(--holo);
}
.panel--lift:hover,
.panel--lift:focus-within {
  transform: translateY(-4px);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(44, 233, 255, 0.16));
}

/* corner brackets — mark "this one matters", not every panel */
.brackets::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 3;
  --b: 1px;
  --l: 16px;
  --c: var(--cy);
  background: linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c) 0 0) 0 0 / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--b) var(--l) no-repeat;
  opacity: 0.55;
  /* scale, not inset — `inset` is a layout property and animating it forces a
     reflow of the pseudo every frame. scale composites for free. */
  transform: scale(1);
  transform-origin: center;
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.brackets:hover::after {
  opacity: 1;
  transform: scale(1.012);
}

/* ------------------------------------------------------------------ sheen
   Light passing over glass. Built, then halved. You should barely name it.  */
.sheen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sheen::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 42%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(255, 255, 255, 0.04) 54%,
    transparent 60%
  );
  translate: -130% 0;
  transition: translate 0s;
}
.sheen:hover::after,
.sheen:focus-within::after {
  translate: 130% 0;
  transition: translate 950ms var(--ease-out);
}

/* ------------------------------------------------------------------ buttons */
.btn {
  --cut: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 15px 26px;
  clip-path: var(--clip-bevel);
  font-family: var(--f-hud);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t) var(--ease-out),
    background var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* primary — the "GO" button. Lime, because in a cockpit green means go. */
.btn--primary {
  background: linear-gradient(120deg, var(--li), #f2b70a 55%, var(--li));
  color: var(--ink-950);
  font-weight: 800;
  box-shadow: 0 10px 30px -12px rgba(255, 200, 40, 0.6);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  filter: brightness(1.1);
  box-shadow: 0 14px 40px -12px rgba(255, 200, 40, 0.85);
  transform: translateY(-2px);
}

/* secondary — hairline ghost on the bevel sandwich */
.btn--ghost {
  isolation: isolate;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(44, 233, 255, 0.35));
  color: var(--text);
}
.btn--ghost > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 25px;
  clip-path: var(--clip-bevel);
  background: rgba(9, 13, 21, 0.92);
  transition: background var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.btn--ghost:hover > span,
.btn--ghost:focus-visible > span {
  background: rgba(44, 233, 255, 0.14);
  color: #fff;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  filter: drop-shadow(0 0 16px rgba(44, 233, 255, 0.35));
  transform: translateY(-2px);
}

/* FOCUS ON A BEVELLED BUTTON.
   clip-path clips everything the element paints, and the global focus ring sits
   at outline-offset:3px — entirely outside the polygon, so it is 100% clipped
   and every CTA on the site had NO keyboard focus indicator. An *inset*
   box-shadow paints inside the border box, so it survives the clip. Declared
   after the variants so it wins on source order at equal specificity. */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink-950), inset 0 0 0 4px var(--cy);
}
/* the ghost button's inner <span> paints over the parent's inset ring */
.btn--ghost:focus-visible > span {
  box-shadow: inset 0 0 0 2px var(--cy);
}
/* Forced-colors mode ignores box-shadow and filter, but honours clip-path — so
   the bevel has to go before an outline can be seen at all. */
@media (forced-colors: active) {
  .btn {
    clip-path: none;
  }
  .btn:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

.btn--holo {
  background: var(--holo);
  background-size: 240% 100%;
  color: var(--ink-950);
  font-weight: 800;
  animation: holo-slide 8s linear infinite;
}
.btn--holo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 26px rgba(255, 61, 139, 0.4));
}

.btn--sm {
  padding: 10px 18px;
  font-size: var(--fs-xs);
}
.btn--block {
  width: 100%;
}
.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* chevrons — the "RACE" tell */
.chevs {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.chevs i {
  width: 7px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(0 0, 58% 50%, 0 100%, 44% 100%, 100% 50%, 44% 0);
  opacity: 0.28;
  animation: chev 1.35s var(--ease-out) infinite;
  animation-delay: calc(var(--k, 0) * 110ms);
  animation-play-state: paused;
}
.btn:hover .chevs i,
.btn:focus-visible .chevs i,
.chevs--auto i {
  animation-play-state: running;
}
@keyframes chev {
  0%,
  100% {
    opacity: 0.28;
    translate: 0 0;
  }
  40% {
    opacity: 1;
    translate: 3px 0;
  }
}

/* ------------------------------------------------------------------ chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast),
    box-shadow var(--t-fast);
  white-space: nowrap;
}
.chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
}
.chip.is-active,
.chip[aria-pressed="true"] {
  color: var(--ink-950);
  background: var(--cy);
  border-color: var(--cy);
  box-shadow: 0 0 18px -3px rgba(44, 233, 255, 0.7);
  font-weight: 700;
}

/* rarity tier — one hue per tier, and ONLY the chip carries it */
.tier {
  --t-col: var(--tier-c);
  --cut: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 5px 9px;
  clip-path: var(--clip-bevel);
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t-col);
  background: color-mix(in oklab, var(--t-col) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t-col) 45%, transparent),
    0 0 16px -6px var(--t-col);
}
.tier[data-tier="S"] {
  --t-col: var(--go);
}
.tier[data-tier="A"] {
  --t-col: var(--mg);
}
.tier[data-tier="B"] {
  --t-col: var(--cy);
}
.tier[data-tier="C"] {
  --t-col: var(--tier-c);
}

/* pill — the currency/stat readout from the top bar */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  white-space: nowrap;
}
.pill svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--cy);
}
.pill b {
  color: var(--text);
  font-weight: 700;
}
.pill span {
  color: var(--text-faint);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
}
.pill--gold svg {
  color: var(--go);
}
.pill--mg svg {
  color: var(--mg);
}

/* ------------------------------------------------------------------ stat bar */
.stat {
  display: grid;
  gap: 6px;
}
.stat__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.stat__label {
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
}
.stat__value {
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bar {
  --v: 0%;
  --bar-col: var(--cy);
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.075);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  overflow: hidden;
}
.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--bar-col) 45%, #000), var(--bar-col));
  box-shadow: 0 0 14px -2px var(--bar-col);
  /* notches are a MASK, not an overlay — so it works on top of photos too */
  mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 11px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 11px);
  transition: width var(--t-lazy) var(--ease-out);
}
.is-in .bar::before,
.bar.is-in::before {
  width: var(--v);
}
.bar--mg {
  --bar-col: var(--mg);
}
.bar--li {
  --bar-col: var(--li);
}
.bar--go {
  --bar-col: var(--go);
}
.bar--vi {
  --bar-col: var(--vi);
}

@media (prefers-reduced-motion: reduce) {
  .bar::before {
    width: var(--v);
  }
}

/* ------------------------------------------------------------------ stars
   CSS-mask stars: no SVG ids to collide, partial fill via one gradient stop. */
.stars {
  --pct: 100%;
  --star-col: var(--go);
  width: 90px;
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--star-col) 0 var(--pct),
    rgba(255, 255, 255, 0.16) var(--pct) 100%
  );
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.7l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 13.68l-4.7 2.47.9-5.23-3.8-3.71 5.25-.76z' fill='%23fff'/%3E%3C/svg%3E")
    0 0 / 20% 100% repeat-x;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.7l2.35 4.76 5.25.76-3.8 3.7.9 5.24L10 13.68l-4.7 2.47.9-5.23-3.8-3.71 5.25-.76z' fill='%23fff'/%3E%3C/svg%3E")
    0 0 / 20% 100% repeat-x;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--star-col) 55%, transparent));
  flex: none;
}
.stars--sm {
  width: 70px;
  height: 13px;
}

/* ------------------------------------------------------------------ orb
   Circular icon button with an orbiting ring — the "LEGENDS badge" energy.  */
.orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-soft);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t) var(--ease-out);
}
.orb::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 66%, var(--cy) 86%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: orbit 4.5s linear infinite;
  opacity: 0.75;
}
.orb:hover,
.orb:focus-visible {
  color: #fff;
  background: rgba(44, 233, 255, 0.12);
  transform: scale(1.06);
}
.orb svg {
  width: 22px;
  height: 22px;
}
.orb--gold::before {
  background: conic-gradient(from 0deg, transparent 0 66%, var(--go) 86%, transparent 100%);
}
@keyframes orbit {
  to {
    rotate: 360deg;
  }
}

/* ------------------------------------------------------------------ badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 10px;
  --cut: 8px;
  clip-path: var(--clip-bevel);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  color: var(--text-soft);
  white-space: nowrap;
}
.badge__dot {
  width: 8px;
  height: 8px;
  rotate: 45deg;
  flex: none;
  background: var(--text-dim);
}
.badge[data-tier="gold"] .badge__dot {
  background: var(--go);
  box-shadow: 0 0 10px var(--go);
}
.badge[data-tier="silver"] .badge__dot {
  background: #cfd8e6;
  box-shadow: 0 0 10px rgba(207, 216, 230, 0.7);
}
.badge[data-tier="bronze"] .badge__dot {
  background: #c98a4b;
  box-shadow: 0 0 10px rgba(201, 138, 75, 0.6);
}

/* ------------------------------------------------------------------ counter */
.counter {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.counter__suffix {
  color: var(--cy);
}

/* ------------------------------------------------------------------ ticker */
.ticker {
  overflow: hidden;
  mask: linear-gradient(90deg, transparent, #000 6% 94%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6% 94%, transparent);
}
.ticker__track {
  display: flex;
  gap: var(--sp-7);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.ticker__item::before {
  content: "";
  width: 5px;
  height: 5px;
  rotate: 45deg;
  background: var(--cy);
  box-shadow: 0 0 8px var(--cy);
  flex: none;
}
@keyframes marquee {
  to {
    translate: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* ------------------------------------------------------------------ radar */
.radar {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  overflow: visible;
}
.radar__web {
  stroke: rgba(150, 180, 225, 0.16);
  fill: none;
  stroke-width: 0.6;
}
.radar__spoke {
  stroke: rgba(150, 180, 225, 0.12);
  stroke-width: 0.5;
}
.radar__plot {
  fill: color-mix(in oklab, var(--cy) 18%, transparent);
  stroke: var(--cy);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 8px rgba(44, 233, 255, 0.55));
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  transition: scale 900ms var(--ease-snap);
}
.is-in .radar__plot {
  scale: 1;
}
.radar__dot {
  fill: var(--cy);
}
.radar__cap {
  font-family: var(--f-hud);
  font-size: 5.2px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: var(--text-dim);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .radar__plot {
    scale: 1;
  }
}

/* ------------------------------------------------------------------ media */
.media {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--t-slow) var(--ease-out);
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 14, 0) 30%, rgba(5, 8, 14, 0.88) 100%);
  pointer-events: none;
}
.media--zoom:hover img,
.media--zoom:focus-within img {
  transform: scale(1.06);
}
/* the "scanned" tint every photo gets so photography and HUD live together */
.media--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 70% 20%, rgba(44, 233, 255, 0.1), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(255, 61, 139, 0.09), transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ------------------------------------------------------------------ tooltip */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  translate: -50% 5px;
  z-index: 20;
  padding: 6px 10px;
  white-space: nowrap;
  background: rgba(4, 7, 12, 0.96);
  box-shadow: inset 0 0 0 1px var(--line-hot);
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), translate var(--t-fast) var(--ease-out);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}
[data-tip-side="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 14px);
  translate: -5px -50%;
}
[data-tip-side="right"]:hover::after,
[data-tip-side="right"]:focus-visible::after {
  translate: 0 -50%;
}

/* ------------------------------------------------------------------ forms */
.field {
  display: grid;
  gap: 8px;
}
.field__label {
  font-family: var(--f-hud);
  font-size: var(--fs-hud);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
}
.field__box {
  --cut: 8px;
  position: relative;
  isolation: isolate;
  padding: 1px;
  clip-path: var(--clip-bevel);
  background: var(--line);
  transition: background var(--t) var(--ease-out), filter var(--t) var(--ease-out);
}
.field__box::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--clip-bevel);
  background: rgba(9, 13, 21, 0.9);
  z-index: -1;
}
.field__box:focus-within {
  background: linear-gradient(120deg, var(--cy), var(--vi));
  filter: drop-shadow(0 0 14px rgba(44, 233, 255, 0.3));
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  color: var(--text);
  background: transparent;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-ghost);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232ce9ff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}
.field select option {
  background: var(--ink-800);
  color: var(--text);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
}
.field--error .field__box {
  background: var(--rd);
}
.field__error {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--rd);
  min-height: 1em;
}

/* ------------------------------------------------------------------ modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease-out);
}
/* .modal declares display:grid, which overrides the UA's [hidden]{display:none}.
   Re-assert it: a closed modal must be out of the layout, out of the a11y tree
   and out of the tab order — not merely transparent and click-swallowing.

   Note there is deliberately NO `visibility` transition here. Transitioning
   visibility means that, for one frame after .is-open is added, the panel still
   computes to hidden — and .focus() on a hidden element is a silent no-op, so
   the modal would open with focus stranded on <body> and nothing to trap. */
.modal[hidden] {
  display: none;
}
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.86);
  backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: 88svh;
  overflow: auto;
  transform: translateY(24px) scale(0.97);
  transition: transform var(--t-slow) var(--ease-snap);
  /* the scrim beneath is already blurred — blurring the panel too is a second
     full-screen backdrop snapshot that buys nothing */
  backdrop-filter: none;
}
.modal.is-open .modal__panel {
  transform: none;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(4, 7, 12, 0.8);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-soft);
  transition: color var(--t-fast), background var(--t-fast), rotate var(--t) var(--ease-out);
}
.modal__close:hover {
  color: #fff;
  background: var(--mg);
  rotate: 90deg;
}
.modal__close svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------------ misc */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  border: 0;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-hint__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--cy), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy);
  animation: scroll-dot 2.1s var(--ease-in-out) infinite;
}
@keyframes scroll-dot {
  0% {
    translate: 0 -100%;
  }
  100% {
    translate: 0 100%;
  }
}