/* ── Landing: slingshot arena (DESIGN.md §6.2) ──────────────────────────── */

.landing-arena {
  --ink: var(--color-ink);
  position: relative;
  max-width: none;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--ink);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 350ms ease;
}
.landing-arena.is-dragging { cursor: grabbing; }

/* First wall hit: the arena turns accent blue, letters turn white */
.landing-arena.is-hit { --ink: #FFFFFF; background: var(--color-accent); }

.sling-letters { position: absolute; inset: 0; pointer-events: none; }

.sling-letter,
.sling-static {
  font-family: var(--font-title);
  font-weight: var(--fw-regular);
  font-size: var(--t-slingshot-size);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: pre;
  transition: color 200ms ease;
}
.sling-letter { position: absolute; left: 0; top: 0; will-change: transform; }
.sling-static { position: absolute; inset: 0; display: grid; place-items: center; }

/* Pull lines: the dashed leader + a fainter projection the other way */
.sling-lines { position: absolute; inset: 0; pointer-events: none; }
.sling-lead,
.sling-proj {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  transform-origin: 0 50%;
  opacity: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
}
.sling-proj { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px); }
.sling-dot {
  position: absolute;
  left: 0; top: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
}
.sling-energy {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
}

.sling-hint {
  position: absolute;
  left: var(--content-pad);
  bottom: 32px;
  color: var(--color-muted);
  transition: opacity 400ms ease;
}
.landing-arena.is-launched .sling-hint { opacity: 0; }

.sling-controls {
  position: absolute;
  right: 28px;
  bottom: 20px;
  display: flex;
  gap: var(--space-4);
}
.sling-controls button {
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: var(--fw-ultralight);
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
}
.sling-controls button:hover,
.sling-controls button:focus-visible { font-weight: var(--fw-regular); }

@media (max-width: 760px) {
  .landing-arena { --t-slingshot-size: 40px; height: calc(100svh - 56px); }
  .sling-hint { bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-arena { cursor: default; }
  .sling-controls, .sling-hint { display: none; }
}