/* ── The front-page carousel, and the nav link that points at it ─────
 *
 * Operator, 2026-09-17: *"Make 'the rally' in the menu blink orange or
 * something to make people click it. Make the current rally more
 * intrusive."* and *"the current rally take the front page"*.
 *
 * ── Cascade rules obeyed here, each with the defect it prevents ─────
 *
 *   · every selector names the block root. `.peprally p` is (0,1,1) and
 *     a lone class is (0,1,0), so a bare class loses the TYPOGRAPHY as
 *     well as the colour — that is how a 1.9rem headline rendered at
 *     16px on the auth page.
 *   · anchors carry `a.`. `.peprally a { color: var(--color-accent) }`
 *     on an accent fill is 1:1 invisible text, shipped on four brands.
 *   · no `opacity` on text. A colour painted with alpha takes its value
 *     from whatever is behind it, so every measured ratio becomes a
 *     guess.
 *   · no bare `var()` without a definition.
 *
 * ── The pulse is deliberately gentle ────────────────────────────────
 *
 * WCAG 2.3.1 forbids more than three flashes a second; this is a 2.2s
 * cycle, nowhere near it, and it never touches the LINK TEXT — only a
 * dot beside it. Animating the text's own colour or opacity would make
 * its contrast a property of the clock rather than of the rule.
 * `prefers-reduced-motion` stops the motion and keeps the dot, so the
 * link is still marked out for a reader who cannot take animation.
 */

/* ── The nav link ──────────────────────────────────────────────── */

.site-nav__link--rally-live {
  position: relative;
  color: var(--cta-accent, #E8550F);
  font-weight: 700;
}

/* The dot, never the word. `currentColor` would inherit whatever the
 * cascade handed the link; the token is the brand's own CTA colour,
 * chosen for contrast. */
.site-nav__link--rally-live::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cta-accent, #E8550F);
  animation: sr-rally-pulse 2.2s ease-in-out infinite;
}

@keyframes sr-rally-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(232, 85, 15, 0.55); }
  50%      { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(232, 85, 15, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__link--rally-live::after { animation: none; }
}

/* ── The carousel ──────────────────────────────────────────────── */

.sr-front-carousel {
  position: relative;
  overflow: hidden;
  background: #111116;
}

.sr-front-carousel .sr-front-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sr-front-carousel .sr-front-carousel__track { transition: none; }
}

/* `min-width: 100%` and NOT `width` — a flex child with `width: 100%`
 * is still allowed to shrink, which lays both slides side by side in
 * one viewport and shows half of each. */
.sr-front-carousel .sr-front-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* The Rally slide carries the hero's own height so the two do not jump
 * when the track moves. `min-height` rather than `height`: the card
 * grows on a narrow phone and a fixed height would clip the CTA. */
/* ── Slide 1 keeps the brand's background ────────────────────────
 *
 * The first cut painted a flat `#111116` panel here and left the
 * photograph on slide 2 only, so the page a visitor landed on had lost
 * the one thing that made it look like a brand. The instruction was
 * *keep the background* — the Rally takes the front page's PLACE, not
 * its scenery.
 *
 * `#111116` survives as the base colour underneath: it is what the hero
 * section itself sits on, so a slow or failed image decode degrades to
 * the same dark the rest of the page uses rather than to white.
 */
.sr-front-carousel .sr-front-slide--rally {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ── It has to FIT, or its own controls are below the fold ─────
   * The first cut was `min(56.25vw, 620px)` — the hero's aspect ratio.
   * On a laptop that is taller than the space left under the
   * announcement bar and the header, so the dots (and therefore the
   * only signal that this IS a carousel) rendered off-screen, and the
   * Rally itself sat "so far down" inside a slide taller than the
   * window. Sized against the VIEWPORT with the chrome subtracted. */
  min-height: min(62vh, 560px);
  padding: 24px 16px 64px;
  overflow: hidden;
  background: #111116;
}

.sr-front-carousel .sr-front-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The same framing the hero uses, so the two slides are one scene and
   * the transition reads as the copy changing, not the site changing. */
  object-position: center bottom;
  z-index: 0;
}

/* The hero's own two gradients, together. Without them the card sits on
 * a photograph and the copy's contrast becomes a property of whatever
 * pixels happen to be behind it — which is a measurement nobody can
 * make. This is a scrim on an IMAGE, never alpha on text. */
.sr-front-carousel .sr-front-slide__scrim {
  /* ── `display` is LOAD-BEARING here ───────────────────────────
   * This is an empty <div>, and PepRally's Nutreko theme ships
   * `div:empty { display: none }` in base.css — so without an explicit
   * display it paints NOTHING and the copy sits directly on the
   * photograph, where its contrast stops being a property of the rule.
   * Caught by `empty_div_display_guard_test`, which exists because this
   * has already taken the age-gate scrim, the hero overlay and the
   * rally progress fill. Specificity cannot save a property the rule
   * never declares. */
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(17, 17, 22, 0.88) 0%, rgba(17, 17, 22, 0.72) 32%, rgba(17, 17, 22, 0.44) 62%, rgba(17, 17, 22, 0.28) 100%),
    radial-gradient(ellipse 900px 620px at 50% 0%, rgba(232, 85, 15, 0.16), transparent 70%);
}

.sr-front-carousel .sr-front-slide__body {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .sr-front-carousel .sr-front-slide--rally {
    min-height: 0;
    padding: 28px 14px 34px;
  }
}

/* ── The dots ──────────────────────────────────────────────────── */

.sr-front-carousel .sr-front-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  z-index: 3;
}

.sr-front-carousel button.sr-front-carousel__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #6B7280;
  cursor: pointer;
}

.sr-front-carousel button.sr-front-carousel__dot.is-current {
  background: var(--cta-accent, #E8550F);
}

/* A focus ring that is visible on a dark slide. Removing the outline
 * without replacing it makes the only keyboard control invisible. */
.sr-front-carousel button.sr-front-carousel__dot:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}


/* ── Arrows, because dots alone do not say "there is more" ────────
 *
 * Operator: *"the carousel doesn't move and ... you don't know that it
 * is a fucking carousel."* Two separate failures — it did not advance,
 * and nothing on it looked like a control. Dots are a state READOUT;
 * an arrow is an affordance. A visitor who never waits nine seconds
 * needs something that says the page has a second face.
 */
.sr-front-carousel button.sr-front-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(17, 17, 22, 0.62);
  color: #FFFFFF;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.sr-front-carousel button.sr-front-carousel__arrow:hover {
  background: rgba(17, 17, 22, 0.86);
  border-color: #FFFFFF;
}

.sr-front-carousel button.sr-front-carousel__arrow:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.sr-front-carousel button.sr-front-carousel__arrow--prev { left: 14px; }
.sr-front-carousel button.sr-front-carousel__arrow--next { right: 14px; }

/* 44px is the tap target; below that the arrows crowd the card, and the
 * dots plus the swipe are the controls a phone actually uses. */
@media (max-width: 720px) {
  .sr-front-carousel button.sr-front-carousel__arrow { display: none; }
}

/* A label that says what the dots are for. On its own a pair of dashes
 * is decoration; two words make it a control. */
.sr-front-carousel .sr-front-carousel__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 3;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D4D4D8;
}