/* Vendored from annnimate-starter-pack's "rotating-words" component.
   Two intentional deviations from the pristine source: (1) the original
   @font-face block for "Switzer" (not a font this project ships) was
   removed -- the project's own override stylesheet sets --rw-sans to an
   existing design-system font instead; (2) .rw_item's resting font-weight
   below is raised from 300 to 500, matching rotating-words.js's own
   WEIGHT_REST (see that file's comment for why -- the same reasoning
   applies to this CSS fallback, even though the JS inline style is what
   actually applies in practice). Everything else below is byte-identical
   to the source. */

.rw_cover {
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rw_hint {
  margin: 0;
  font-family: var(--rw-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(16, 16, 16, 0.45);
}

/* Scroll room for scrub mode: the stage sticks while the track scrolls past
   (data-anm-rw-track tells the wheel to read its progress from here). */
.rw_track {
  height: 320vh;
}

.rw_stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 var(--rw-margin);
}

.rw_wheel {
  position: relative;
  width: 100%;
  font-family: var(--rw-sans);
  font-size: clamp(36px, 5vw, 84px);
  line-height: 1.1;
  color: var(--rw-fg);
  -webkit-font-smoothing: antialiased;
}

.rw_list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.rw_item {
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Built: every word sits on the drum, centred on the list. The soft mask
   fades the top and bottom of the drum into the ground. */
.rw_is-built .rw_list {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.rw_is-built .rw_item {
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Navigation: a row of dots under the wheel, one per word, each a button
   to that word. The dot for the centre word stretches into a pill
   (--rw-dot, set by JS). */
.rw_nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
}

.rw_dot {
  position: relative;
  display: block;
  width: 14px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.3;
}

.rw_dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Width, not scaleX: a scaled circle turns into an ellipse, a wider box
     with a full radius stays a true pill. */
  width: calc(4px * var(--rw-dot, 1));
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: var(--rw-fg, #101010);
  transform: translateX(-50%);
}

.rw_dot:focus-visible {
  outline: 1px solid rgba(16, 16, 16, 0.3);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .rw_page {
    --rw-margin: 20px;
  }
}