@layer components {
  .rotator {
    position: relative;
    display: grid;
    gap: var(--space-l);
    padding-top: var(--space-l);
    border-top: 1px solid var(--ink);
  }

  .rotator__controls {
    display: none;
    align-items: center;
    gap: var(--space-2xs);
  }

  .rotator__counter {
    margin-left: auto;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }

  .rotator__counter-total {
    margin-left: 0.375rem;
    color: var(--ink-soft);
  }

  .rotator__icon-play {
    display: none;
  }

  .rotator.is-paused .rotator__icon-play {
    display: block;
  }

  .rotator.is-paused .rotator__icon-pause {
    display: none;
  }

  .rotator__viewport {
    display: grid;
    gap: var(--space-xl);
  }

  .rotator__slide {
    display: grid;
    align-content: start;
    gap: var(--space-m);
  }

  .rotator__quote {
    position: relative;
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.15rem + 2.1vw, 3rem);
    font-weight: var(--weight-display);
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  .rotator__quote--long {
    max-width: 38ch;
    font-size: clamp(1.375rem, 1.05rem + 1.35vw, 2.125rem);
    line-height: 1.26;
  }

  .rotator__quote p::before {
    content: "\201C";
    position: absolute;
    left: -0.5em;
    color: var(--accent-soft);
  }

  .rotator__quote p::after {
    content: "\201D";
    color: var(--accent-soft);
  }

  .rotator__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .rotator__topic {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--line-rose);
    border-radius: var(--radius-pill);
    background: var(--surface-page);
    color: var(--ink-accent);
    letter-spacing: 0.08em;
  }

  .rotator__progress {
    display: none;
    position: relative;
    height: 1px;
    background: var(--line);
    overflow: hidden;
  }

  .rotator__progress-bar {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .rotator__progress-bar.is-running {
    animation: rotator-progress var(--rotator-duration, 7000ms) linear both;
  }

  .rotator.is-paused .rotator__progress-bar.is-running,
  .rotator.is-holding .rotator__progress-bar.is-running,
  .rotator.is-offscreen .rotator__progress-bar.is-running,
  .rotator.is-tab-hidden .rotator__progress-bar.is-running {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .rotator__progress-bar.is-running {
      animation-duration: var(--rotator-duration, 7000ms) !important;
    }
  }

  .rotator.is-enhanced .rotator__controls {
    display: flex;
  }

  .rotator.is-enhanced .rotator__progress {
    display: block;
  }

  .rotator.is-enhanced .rotator__viewport {
    gap: 0;
  }

  .rotator.is-enhanced .rotator__slide {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.9s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), visibility 0s linear 0.9s;
  }

  .rotator.is-enhanced .rotator__slide.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0.15s, 0.15s, 0s;
  }

  @keyframes rotator-progress {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }
}