/* Falling Words
   Every selector MUST start with .byq-gem--falling-words-01 so this gem can sit
   on a page next to other gems (and inside a user's site) with zero collisions.
   Use brand tokens (var(--byq-*)) instead of raw hex for any core UI. */

.byq-gem--falling-words-01 {
  font-family: var(--byq-font-sans);
  color: var(--byq-fg);
}

/* The stage is the physics world: fixed height, hairline floor. */
.byq-gem--falling-words-01__stage {
  position: relative;
  width: min(58rem, 92vw);
  height: min(26rem, 70dvh);
  overflow: hidden;
  border-bottom: 1px solid var(--byq-depth);
  -webkit-tap-highlight-color: transparent;
}

/* JS adds .is-ready — without it the headline is just static text. */
.byq-gem--falling-words-01__stage.is-ready {
  cursor: pointer;
}

.byq-gem--falling-words-01__stage:focus-visible {
  outline: 1px solid var(--byq-accent-solar);
  outline-offset: 8px;
  border-radius: var(--byq-radius);
}

/* While the physics runs, touch gestures belong to the words, not the page. */
.byq-gem--falling-words-01__stage.is-live {
  touch-action: none;
}

.byq-gem--falling-words-01__headline {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 30ch;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--byq-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.byq-gem--falling-words-01__hl {
  font-style: normal;
  color: var(--byq-accent-solar);
}

.byq-gem--falling-words-01__hl--lime {
  color: var(--byq-accent-lime);
}

.byq-gem--falling-words-01 .word {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* Once dropped, every word is positioned purely by transform from the
   stage's (0,0) — so the headline must stop being an offset parent. */
.byq-gem--falling-words-01__stage.is-live .byq-gem--falling-words-01__headline {
  position: static;
}

.byq-gem--falling-words-01__stage.is-live .word {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
}

.byq-gem--falling-words-01__stage.is-live.is-dragging,
.byq-gem--falling-words-01__stage.is-live.is-dragging .word {
  cursor: grabbing;
}

/* Restack: the engine is gone, CSS tweens each word home. */
.byq-gem--falling-words-01__stage.is-restacking .word {
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .byq-gem--falling-words-01__stage.is-restacking .word {
    transition-duration: 0.001ms;
  }
}