/* The ticker: a yellow band of the latest titles laid slightly crooked
   across the seam between the hero and the newest video.

   .ticker          the mount. Full bleed, zero net height (it straddles the
                    seam), clips sideways only so the page never scrolls
                    horizontally while the tilted band may poke up and down.
   .ticker__band    the yellow strip, wider than the viewport, tilted -2deg.
   .ticker__track   the moving row. ticker.js sets its translate from the
                    scroll position (never on its own); reduced motion = still.
                    Each title is a link (the first set only is focusable).

   Markup is built by ticker.js; the page only needs
   <div class="ticker" data-ticker></div>. */

.ticker {
  /* Akira ~20px in a ~56px band on desktop, ~15px in ~44px on phones */
  --ticker-fs: clamp(0.9375rem, 0.8288rem + 0.446vw, 1.25rem);
  --ticker-h: clamp(2.75rem, 2.489rem + 1.07vw, 3.5rem);
  --ticker-gap: 1.5rem;
  --ticker-tilt: -2deg;
  /* how far the band runs past each side, so the tilt never shows an end */
  --ticker-bleed: 4vw;
  /* the site's content edge, so the first word lines up with the page */
  --ticker-edge: max(var(--dd-gutter), (100vw - var(--dd-max)) / 2);

  position: relative;
  z-index: 3;
  width: 100%;
  height: var(--ticker-h);
  margin-block: calc(var(--ticker-h) / -2);
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

.ticker[hidden] {
  display: none;
}

.ticker__band {
  position: absolute;
  inset: 0 auto 0 calc(-1 * var(--ticker-bleed));
  width: calc(100% + 2 * var(--ticker-bleed));
  display: flex;
  align-items: center;
  background: var(--dd-doodle);
  color: var(--dd-navy);
  rotate: var(--ticker-tilt);
  backface-visibility: hidden;
  pointer-events: auto;
}

.ticker__track {
  display: flex;
  align-items: center;
  flex: none;
  padding-left: calc(var(--ticker-bleed) + var(--ticker-edge));
  white-space: nowrap;
  font-family: var(--dd-font-display);
  font-size: var(--ticker-fs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  word-spacing: -0.15em;
  color: var(--dd-navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  transition: opacity var(--dd-dur-slow) var(--dd-ease-out);
}

.ticker.is-ready .ticker__track {
  opacity: 1;
}

.ticker.is-moving .ticker__track {
  will-change: transform;
}

.ticker__set {
  display: flex;
  align-items: center;
  flex: none;
}

/* Trim the line box to cap height and baseline, so the same yellow shows
   above the capitals as below them (Akira otherwise sits high). */
.ticker__title {
  display: block;
  text-box: trim-both cap alphabetic;
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  border-radius: var(--dd-radius-md);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .ticker__title:hover {
    text-decoration-line: underline;
  }
}

.ticker__title:focus-visible {
  text-decoration-line: underline;
  outline: var(--dd-stroke-ink) solid var(--dd-navy);
  outline-offset: 0.5rem;
}

/* The separator: Dave's fedora, in navy, one per gap, same space each side. */
.ticker__sep {
  display: block;
  flex: none;
  width: 0.9em;
  height: auto;
  aspect-ratio: 247 / 143;
  margin-inline: var(--ticker-gap);
  fill: currentColor;
}

@media (max-width: 40rem) {
  .ticker {
    --ticker-bleed: 6vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    transform: none !important;
    transition: none;
  }
}