/* ============================================================================
   AirBridge — dark liquid-glass theme.

   Departs deliberately from the light, tile-based DESIGN_SYSTEM.md: dark canvas,
   translucent glass surfaces, gradient light sources. What carries over is the
   typographic system (tight display tracking, 17px body, no weight 500), the
   pill CTA grammar, and scale(0.95) as the universal press state.
   ========================================================================= */

:root {
  /* Canvas */
  --void: #08080a;
  --void-2: #0d0d10;
  --ink-on-dark: #f5f5f7;
  --muted: rgba(245, 245, 247, 0.62);
  --muted-2: rgba(245, 245, 247, 0.42);

  /* Accent — one blue, brightened for dark surfaces */
  --accent: #2997ff;
  --accent-deep: #0066cc;
  --accent-glow: rgba(41, 151, 255, 0.45);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-border-bright: rgba(255, 255, 255, 0.2);
  --glass-blur: saturate(180%) blur(28px);
  /* Top-edge highlight is what sells "glass" rather than "grey box". */
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --pill: 9999px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 96px;

  --font: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink-on-dark);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100%;
}

h1, h2, h3, p { margin: 0; }
button { font-family: var(--font); cursor: pointer; }
button:disabled { cursor: default; }

/* Ambient light sources. Fixed so they don't scroll away, and behind everything. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 20% -10%, rgba(41, 151, 255, 0.18), transparent 60%),
    radial-gradient(50rem 34rem at 85% 8%, rgba(140, 82, 255, 0.14), transparent 62%),
    radial-gradient(60rem 44rem at 50% 110%, rgba(41, 151, 255, 0.1), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
}

/* Dot matrix over the whole canvas. Fixed and pointer-transparent, masked so it
   reads as texture at the edges rather than a grid pattern fighting the text. */
.matrix {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Alpha lives in the dot colour, not in `opacity`, so the ::before sweep can
     carry its own brightness independently of the base grid. */
  background-image: radial-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1.3px);
  background-size: 22px 22px;
  animation: matrix-drift 26s linear infinite;
}

/* Same grid, brighter and tinted, revealed only through a moving mask — so a
   patch of dots lights up and travels, like a process running behind the page. */
.matrix::before,
.matrix::after {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(rgba(41, 151, 255, 0.85) 1.3px, transparent 1.8px);
  background-size: 22px 22px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.35) 40%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.35) 40%, transparent 68%);
  mask-size: 46% 46%;
  -webkit-mask-size: 46% 46%;
}

.matrix::before { animation: matrix-sweep-a 19s ease-in-out infinite alternate; }
.matrix::after {
  background-image: radial-gradient(rgba(140, 82, 255, 0.7) 1.3px, transparent 1.8px);
  mask-size: 34% 34%;
  -webkit-mask-size: 34% 34%;
  animation: matrix-sweep-b 27s ease-in-out infinite alternate;
}

@keyframes matrix-drift {
  to { background-position: 22px 22px; }
}
@keyframes matrix-sweep-a {
  0% { mask-position: -8% 8%; -webkit-mask-position: -8% 8%; }
  50% { mask-position: 62% 78%; -webkit-mask-position: 62% 78%; }
  100% { mask-position: 108% 22%; -webkit-mask-position: 108% 22%; }
}
@keyframes matrix-sweep-b {
  0% { mask-position: 104% 92%; -webkit-mask-position: 104% 92%; }
  50% { mask-position: 30% 12%; -webkit-mask-position: 30% 12%; }
  100% { mask-position: -6% 70%; -webkit-mask-position: -6% 70%; }
}

/* ── Dot-matrix glyphs ───────────────────────────────────────────────────── */

.glyph { width: 84px; height: 84px; color: var(--accent); }
.glyph--lg { width: 120px; height: 120px; }
.glyph__svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* transform-box: fill-box makes transform-origin: center resolve per circle
   rather than against the whole SVG viewport. */
.glyph__off,
.glyph__on {
  transform-box: fill-box;
  transform-origin: center;
}

.glyph__off {
  fill: rgba(255, 255, 255, 0.16);
  animation: glyph-idle 3.2s ease-in-out infinite;
}

.glyph__on {
  fill: currentColor;
  filter: drop-shadow(0 0 6px var(--accent-glow));
  animation: glyph-wave 2.6s ease-in-out infinite;
}

.glyph__svg--static .glyph__on,
.glyph__svg--static .glyph__off { animation: none; }

@keyframes glyph-wave {
  0%, 100% { opacity: 0.32; transform: scale(0.68); }
  45% { opacity: 1; transform: scale(1.14); }
}

@keyframes glyph-idle {
  0%, 100% { opacity: 0.5; }
  45% { opacity: 1; }
}

.glyph-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.t-hero { font-size: clamp(34px, 6.2vw, 68px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.t-display { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.t-lead { font-size: clamp(17px, 1.6vw, 24px); font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; }
.t-tagline { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: -0.01em; }
.t-body { font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; }
.t-caption { font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; }
.t-caption-strong { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }

.muted { color: var(--muted); }

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: var(--space-lg);
  border-radius: var(--pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Glass primitive ─────────────────────────────────────────────────────── */

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen), 0 24px 60px rgba(0, 0, 0, 0.42);
}

.shell { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-lg); }
.shell--narrow { max-width: 780px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

/* Floating capsule rather than a full-width bar — lighter glass, so the page
   reads through it. */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(1080px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 58px;
  padding: 0 10px 0 var(--space-lg);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: saturate(200%) blur(34px);
  -webkit-backdrop-filter: saturate(200%) blur(34px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 14px 40px rgba(0, 0, 0, 0.45);
}

.nav__brand { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.nav__spacer { flex: 1; }
.nav__meta { display: flex; align-items: center; gap: var(--space-sm); font-size: 14px; color: var(--muted); }

.status-dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--muted-2); flex: none; }
.status-dot[data-state='online'] { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.status-dot[data-state='error'] { background: #ff6b6b; }

.room-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-on-dark);
}

/* The nav shows who *this* device is, not an opaque code. */
.nav__device { display: inline-flex; align-items: center; gap: 8px; }
.nav__device-mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--ink-on-dark);
  opacity: 0.85;
}
.nav__device-mark svg { width: 100%; height: 100%; display: block; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  border-radius: var(--pill);
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--sm { padding: 8px 16px; font-size: 14px; }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 26px rgba(41, 151, 255, 0.35);
}
.btn--primary:disabled {
  background: var(--glass-bg);
  color: var(--muted-2);
  box-shadow: none;
  border-color: var(--glass-border);
}

.btn--ghost {
  color: var(--ink-on-dark);
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
}

.select {
  max-width: 100%;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: var(--glass-bg);
  color: var(--ink-on-dark);
  border: 1px solid var(--glass-border);
  font-family: var(--font);
  font-size: 14px;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.section { padding: var(--space-3xl) 0; }
/* Clears the floating nav capsule. */
.section--hero { position: relative; padding-top: 132px; overflow: hidden; }

.hero__copy { position: relative; z-index: 2; text-align: center; }
.hero__copy .t-lead { margin-top: var(--space-md); color: var(--muted); }

.section__head { text-align: center; margin-bottom: var(--space-2xl); }
.section__head .t-lead { margin-top: var(--space-sm); }

/* ── Orbit ───────────────────────────────────────────────────────────────── */

/* Rings are anchored to the bottom edge and pushed half-way down, so only their
   upper arcs rise into the footer. */
.orbit {
  position: relative;
  height: clamp(220px, 34vw, 380px);
  margin-top: var(--space-2xl);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
}

.orbit__globe,
.orbit__ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}

/* Sits above the rings, like the reference's centre globe. */
/* Kept clear of the innermost ring below, so no ring line crosses the globe. */
.orbit__globe {
  width: clamp(190px, 30vw, 330px);
  aspect-ratio: 1;
  z-index: 2;
}
.globe__canvas { display: block; width: 100%; height: 100%; }

.orbit__ring {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  aspect-ratio: 1;
}
/* Each ring clears the globe's outer edge; the smallest starts well beyond it. */
.orbit__ring[data-ring='0'] { width: clamp(300px, 48vw, 470px); }
.orbit__ring[data-ring='1'] { width: clamp(400px, 62vw, 640px); }
.orbit__ring[data-ring='2'] { width: clamp(500px, 76vw, 800px); }

/* The arm fills its ring, so rotating it needs no centring translate — which
   keeps the keyframes to a single pure rotation. */
.orbit__arm {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: rotate(var(--angle, 0deg));
}

.orbit__chip {
  position: absolute;
  top: -21px;
  left: 50%;
  margin-left: -21px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-on-dark);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-bright);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.orbit__chip svg { width: 20px; height: 20px; display: block; }

@keyframes orbit-spin {
  from { transform: rotate(var(--angle, 0deg)); }
  to { transform: rotate(calc(var(--angle, 0deg) + 360deg)); }
}

/* Counter-rotation uses the `rotate` property so it composes with the chip's
   own translate-based centring instead of overwriting it. */
@keyframes chip-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

.panel { border-radius: var(--radius-xl); padding: var(--space-xl); }

.hero__grid {
  position: relative;
  z-index: 2;
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  min-height: 300px;
  transition: transform 0.16s ease, border-color 0.2s ease, background 0.2s ease;
}
.dropzone[data-dragging='true'] {
  border-color: var(--accent);
  background: var(--glass-bg-strong);
  transform: scale(0.995);
}
.dropzone .btn { margin-top: var(--space-xs); }

/* Whole-window drop affordance — the panel is a hint, not the only target. */
body[data-dragging='true']::after {
  content: 'Drop anywhere to add files';
  position: fixed;
  inset: 12px;
  z-index: 120;
  display: grid;
  place-items: center;
  pointer-events: none;
  border-radius: var(--radius-xl);
  border: 2px dashed rgba(41, 151, 255, 0.65);
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-on-dark);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dropzone__ring {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: var(--space-xs);
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%, rgba(41, 151, 255, 0.28), rgba(41, 151, 255, 0.04));
  border: 1px solid var(--glass-border-bright);
}
.dropzone__ring svg { width: 30px; height: 30px; }

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-xs);
}
.qr__code {
  width: 190px;
  height: 190px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.qr__code img, .qr__code svg { width: 100%; height: 100%; display: block; }
.qr__url { color: var(--muted); word-break: break-all; }
.qr .btn { margin-top: var(--space-xs); }

/* ── Queue ───────────────────────────────────────────────────────────────── */

.queue {
  position: relative;
  z-index: 2;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.queue__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.queue__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__size { flex: none; font-size: 14px; color: var(--muted); }
.queue__remove {
  flex: none;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: var(--pill);
  transition: transform 0.14s ease;
}
.queue__remove:active { transform: scale(0.95); }

/* ── Devices ─────────────────────────────────────────────────────────────── */

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.device-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-lg);
  text-align: center;
  border-radius: var(--radius-lg);
  color: var(--ink-on-dark);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
  transition: transform 0.14s ease, border-color 0.2s ease, background 0.2s ease;
}
.device-card:active { transform: scale(0.95); }
.device-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.device-card__glyph {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 4px;
  color: var(--ink-on-dark);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-bright);
}
.device-card__glyph > svg { width: 26px; height: 26px; display: block; }

/* Platform badge tucked into the corner of the device silhouette. */
.device-card__badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--void-2);
  border: 1px solid var(--glass-border-bright);
  color: var(--ink-on-dark);
}
.device-card__badge svg { width: 11px; height: 11px; display: block; }

.device-card__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.device-card__meta { font-size: 13px; color: var(--muted); }
.device-card__action { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }

.device-card { position: relative; }
.device-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.device-card__remove:active { transform: scale(0.9); }
.device-card__remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hidden-notice {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.hidden-notice .text-link { font-size: 14px; margin-left: 8px; }

.empty {
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.empty .t-caption { margin-top: 6px; }
.empty__offline {
  max-width: 460px;
  margin: var(--space-md) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
  line-height: 1.5;
}
.empty__offline strong { color: var(--ink-on-dark); }

/* ── Transfers ───────────────────────────────────────────────────────────── */

.transfer-list { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Apple-ish motion curves: a soft decelerate for arrivals, a gentle spring for
   moments that deserve emphasis. */
:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.transfer {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
  transition: border-color 0.4s var(--ease-out-soft), box-shadow 0.4s var(--ease-out-soft);
  animation: transfer-in 0.5s var(--ease-out-soft) both;
}

@keyframes transfer-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Waiting for the other side: a slow breath, so it reads as pending not stuck. */
.transfer[data-state='requested'],
.transfer[data-state='awaiting-consent'],
.transfer[data-state='connecting'] {
  animation: transfer-in 0.5s var(--ease-out-soft) both, pending-breathe 2.6s ease-in-out 0.5s infinite;
}
@keyframes pending-breathe {
  0%, 100% { border-color: var(--glass-border); }
  50% { border-color: rgba(41, 151, 255, 0.4); }
}

.transfer[data-state='transferring'] {
  border-color: rgba(41, 151, 255, 0.28);
  box-shadow: var(--glass-sheen), 0 0 0 1px rgba(41, 151, 255, 0.1), 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* One-shot flourish on completion. */
.transfer.is-complete { animation: complete-pop 0.72s var(--ease-spring) both; }
@keyframes complete-pop {
  0% { transform: scale(1); border-color: rgba(41, 151, 255, 0.28); }
  35% { transform: scale(1.014); border-color: rgba(41, 151, 255, 0.85); box-shadow: 0 0 0 6px rgba(41, 151, 255, 0.12), 0 18px 44px rgba(0, 0, 0, 0.45); }
  100% { transform: scale(1); border-color: var(--glass-border); }
}

.transfer[data-state='failed'],
.transfer[data-state='cancelled'],
.transfer[data-state='declined'],
.transfer[data-state='expired'] {
  animation: transfer-in 0.5s var(--ease-out-soft) both, fail-nudge 0.42s var(--ease-out-soft) 0.05s 1;
  opacity: 0.78;
}
@keyframes fail-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(3px); }
}
.transfer__top { display: flex; align-items: baseline; gap: var(--space-sm); }
.transfer__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Outcome stays on the card after the toast fades — the toast is a nudge, the
   card is the record. */
.transfer__state {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--pill);
  border: 1px solid transparent;
}
.transfer[data-state='done'] .transfer__state {
  color: #5ac8fa;
  background: rgba(90, 200, 250, 0.14);
  border-color: rgba(90, 200, 250, 0.4);
}
.transfer[data-state='failed'] .transfer__state,
.transfer[data-state='declined'] .transfer__state,
.transfer[data-state='expired'] .transfer__state,
.transfer[data-state='cancelled'] .transfer__state {
  color: #ff9f7a;
  background: rgba(255, 122, 92, 0.14);
  border-color: rgba(255, 122, 92, 0.4);
}
.transfer[data-state='transferring'] .transfer__state {
  color: var(--accent);
  background: rgba(41, 151, 255, 0.12);
  border-color: rgba(41, 151, 255, 0.35);
}
.transfer__pct {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Dot-matrix byte readout, in the same language as the hero glyphs. */
.dotbar {
  margin-top: var(--space-sm);
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.dotbar span {
  flex: 1 1 0;
  min-width: 3px;
  max-width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s var(--ease-out-soft), box-shadow 0.2s var(--ease-out-soft);
}
.dotbar span[data-on='true'] {
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent-glow);
}
/* The dot at the write head keeps moving even when a percentage looks static. */
.dotbar span[data-lead='true'] {
  background: #fff;
  box-shadow: 0 0 10px #fff;
  animation: dot-lead 0.75s ease-in-out infinite;
}
@keyframes dot-lead {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.35); }
}

.transfer__stats {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--muted);
}
/* Deliberately quiet and monospaced — it is a report to copy, not a message. */
.transfer__diag {
  width: 100%;
  margin-top: 6px;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--muted-2);
  user-select: all;
}

.transfer__relay {
  padding: 1px 8px;
  border-radius: var(--pill);
  border: 1px solid var(--glass-border-bright);
  background: var(--glass-bg);
  font-size: 12px;
  color: var(--ink-on-dark);
}

.transfer__actions { margin-top: var(--space-sm); display: flex; gap: var(--space-xs); }

/* ── Consent ─────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.overlay[data-open='true'] { display: flex; }

.modal {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
}
.modal__who { display: flex; align-items: center; gap: var(--space-sm); text-align: left; }
.modal__mark {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-bright);
}
.modal__mark > svg { width: 22px; height: 22px; }
.modal__mark .device-card__badge { width: 18px; height: 18px; }
.modal__mark .device-card__badge svg { width: 10px; height: 10px; }
.modal__name { font-size: 17px; font-weight: 600; }
.modal__meta { font-size: 13px; color: var(--muted); }

.modal__title { margin-top: var(--space-lg); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

.modal__files {
  margin: var(--space-md) 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 170px;
  overflow-y: auto;
}
.modal__file {
  display: flex;
  gap: var(--space-xs);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: var(--muted);
}
.modal__file span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-on-dark); }

.modal__timer { font-size: 13px; color: var(--muted-2); margin-bottom: var(--space-md); }
.modal__actions { display: flex; gap: var(--space-sm); justify-content: center; }
.modal__actions .btn { flex: 1; }
.modal__note { margin-top: var(--space-md); font-size: 12px; line-height: 1.5; color: var(--muted-2); }

/* ── Sticky bar ──────────────────────────────────────────────────────────── */

.sticky {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
}
.sticky[data-open='true'] { display: flex; }
.sticky__text { flex: 1; min-width: 0; }
.sticky__title { font-size: 15px; font-weight: 600; }
.sticky__sub { font-size: 13px; color: var(--muted); }

/* ── Banner ──────────────────────────────────────────────────────────────── */

.banner {
  display: none;
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  font-size: 14px;
  color: var(--ink-on-dark);
  background: rgba(41, 151, 255, 0.14);
  border-bottom: 1px solid var(--glass-border);
}
.banner[data-open='true'] { display: block; }

/* ── Reaction ────────────────────────────────────────────────────────────── */

.reaction {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen), 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.reaction[data-open='true'] { opacity: 1; transform: translateY(0); }
.reaction__art { width: 56px; height: 56px; flex: none; }
.reaction__art svg, .reaction__art img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: var(--radius-sm); }
.reaction__caption { font-size: 16px; font-weight: 600; max-width: 250px; letter-spacing: -0.01em; }
.reaction[data-kind='trouble'] { border-color: rgba(255, 122, 92, 0.45); }
.reaction[data-kind='connected'] { border-color: rgba(41, 151, 255, 0.45); }

.sticky[data-open='true'] ~ .reaction { bottom: 96px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer { padding: var(--space-2xl) 0 0; }

.footer__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  max-width: 720px;
}

.fact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
}
.fact__mark {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(41, 151, 255, 0.12);
  border: 1px solid var(--glass-border-bright);
}
.fact__mark svg { width: 20px; height: 20px; }
.fact__value { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fact__label { font-size: 13px; color: var(--muted); }

.footer__legal {
  max-width: 1080px;
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-lg);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-2);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .footer__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: var(--space-2xl) 0; }
  .section--hero { padding-top: var(--space-2xl); }
  .panel { padding: var(--space-lg); }
  .orbit__chip { width: 34px; height: 34px; top: -17px; margin-left: -17px; }
  .orbit__chip svg { width: 16px; height: 16px; }
  .nav { height: 52px; padding: 0 8px 0 var(--space-md); top: 10px; }
  .nav .conn-label { display: none; }
  .nav__brand { font-size: 17px; }
  .section--hero { padding-top: 104px; }
  .reaction { left: var(--space-md); right: var(--space-md); }
  .reaction__caption { max-width: none; }
  .modal__actions { flex-direction: column-reverse; }
}

/* Follows the OS by default. `data-motion="full"` is an explicit in-app opt-in
   (see js/motion.js) for users whose system animation setting is off but who
   still want the page to move. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) .reaction,
  :root:not([data-motion='full']) .btn,
  :root:not([data-motion='full']) .device-card,
  :root:not([data-motion='full']) .dropzone { transition: none; }

  :root:not([data-motion='full']) .matrix,
  :root:not([data-motion='full']) .matrix::before,
  :root:not([data-motion='full']) .matrix::after { animation: none; }

  :root:not([data-motion='full']) .orbit__arm,
  :root:not([data-motion='full']) .orbit__chip { animation: none !important; }

  :root:not([data-motion='full']) .glyph__on,
  :root:not([data-motion='full']) .glyph__off { animation: none; }

  /* Keep the progress bar honest; drop everything decorative. */
  :root:not([data-motion='full']) .transfer,
  :root:not([data-motion='full']) .transfer[data-state='requested'],
  :root:not([data-motion='full']) .transfer[data-state='awaiting-consent'],
  :root:not([data-motion='full']) .transfer[data-state='connecting'],
  :root:not([data-motion='full']) .transfer[data-state='failed'],
  :root:not([data-motion='full']) .transfer[data-state='cancelled'],
  :root:not([data-motion='full']) .transfer[data-state='declined'],
  :root:not([data-motion='full']) .transfer[data-state='expired'],
  :root:not([data-motion='full']) .transfer.is-complete { animation: none; }

  :root:not([data-motion='full']) .dotbar span[data-lead='true'] { animation: none; }
}