/* Rably reel + launch page. One world: Rably purple, black ink, a wide
   variable grotesk for the mark and a mono for the instrument labels. */
:root {
  --bg: #0f0f0f;
  --fg: #c084fc;
  --fg-soft: rgba(192, 132, 252, 0.62);
  --wide: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--wide); -webkit-font-smoothing: antialiased; }

/* ---------- reel ---------- */
.reel {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  isolation: isolate;
}
.reel-defs { position: absolute; }
.reel-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.06; mix-blend-mode: screen; pointer-events: none; z-index: 3;
  image-rendering: pixelated;
}
.reel-corner { position: absolute; width: 22px; height: 22px; border: 0 solid var(--fg); z-index: 2; }
.reel-corner.tl { top: 22px; left: 22px; border-top-width: 2px; border-left-width: 2px; }
.reel-corner.tr { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; }
.reel-top {
  position: absolute; top: 40px; left: 58px; right: 58px; z-index: 2;
  display: flex; justify-content: space-between; gap: 1rem;
  font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.reel-top span { display: flex; gap: 2.4em; }
.reel-top i, .reel-meta i { font-style: normal; color: var(--fg-soft); }
.reel-stage {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(20px, 7vw, 110px);
}
.reel-meta {
  display: flex; justify-content: space-between;
  font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.reel-rule { height: 2px; background: var(--fg); margin-top: 12px; transform-origin: left; }
.reel-rule-b { margin-top: 0; transform-origin: right; }
.reel-word {
  position: relative; margin: 0;
  font-family: "Archivo", var(--wide);
  font-weight: 900;
  font-size: clamp(64px, 17.5vw, 330px);
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0.38em 0 0.3em;
  will-change: transform;
}
.reel-band { display: flex; justify-content: center; white-space: nowrap; }
.reel-band + .reel-band { position: absolute; inset: 0.38em 0 0.3em; }
/* Origin near the baseline, so bars grow up from it and lifts read as lifts. */
.reel-l { display: inline-block; font-variation-settings: "wdth" 125, "wght" 900; will-change: transform; transform-origin: 50% 86%; }

/* controls — the instrument panel */
.reel-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: grid; grid-template-columns: auto auto auto 1fr auto auto auto;
  grid-template-areas: "play tc fps . bpm beats bar" "scrub scrub scrub scrub scrub scrub scrub";
  align-items: center; column-gap: 28px; row-gap: 12px;
  padding: 26px 28px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.reel-play { grid-area: play; width: 28px; height: 28px; border: 0; padding: 0; cursor: pointer; background: transparent; position: relative; }
.reel-play::before { content: ""; position: absolute; inset: 6px 7px; border-left: 4px solid var(--fg); border-right: 4px solid var(--fg); }
.reel-play.paused::before { inset: 4px 4px 4px 8px; border: 0; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid var(--fg); }
.reel-tc { grid-area: tc; font-variant-numeric: tabular-nums; }
.reel-dim { color: var(--fg-soft); }
.reel-bar .reel-dim:nth-of-type(1) { grid-area: fps; }
.reel-spacer { display: none; }
.reel-beats { grid-area: beats; display: flex; gap: 5px; }
.reel-beats i { width: 10px; height: 10px; border: 1.5px solid var(--fg); }
.reel-beats i.on { background: var(--fg); }
.reel-barno { grid-area: bar; font-variant-numeric: tabular-nums; }
.reel-scrub { grid-area: scrub; width: 100%; accent-color: var(--fg); height: 18px; cursor: pointer; background: transparent; }
.reel-replay {
  position: absolute; right: 22px; bottom: 18px; z-index: 4;
  font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg); background: transparent; border: 1.5px solid var(--fg); padding: 9px 14px; cursor: pointer;
}
.reel-replay:hover, .reel-play:hover { filter: brightness(0.8); }
.reel :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (max-width: 640px) {
  .reel-top { left: 30px; right: 30px; top: 26px; font-size: 10px; }
  .reel-top span i { display: none; }
  .reel-corner.tl { top: 14px; left: 14px; } .reel-corner.tr { top: 14px; right: 14px; }
  .reel-meta { font-size: 10px; }
  .reel-bar { grid-template-columns: auto auto 1fr auto; grid-template-areas: "play tc . bar" "scrub scrub scrub scrub"; column-gap: 14px; font-size: 10px; }
  .reel-bar .reel-dim, .reel-beats { display: none; }
}

/* Bare: the mark and its rule only, for the launch page. */
.reel--bare .reel-top, .reel--bare .reel-corner, .reel--bare .reel-meta { display: none; }

/* The job, between the rules: one action word per beat, centred over RABLY. */
.reel-frame { position: relative; }
.reel-actions { position: absolute; inset: 0; pointer-events: none; }
.reel-act {
  position: absolute; left: 50%; top: 50%;
  white-space: nowrap; opacity: 0;
  font-family: "Archivo", var(--wide); font-weight: 900; line-height: 1;
  font-size: calc(clamp(64px, 17.5vw, 330px) * 0.4);
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 125, "wght" 900;
  will-change: transform, opacity;
}
.reel-count {
  margin-top: 10px; min-height: 1em; text-align: right;
  font: 600 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--fg);
}