/* ============================================================
   REILLY TALENT — Lux layer (June 2026 refresh)
   Loaded after polish.css. Adds the state-of-the-art touches:
   scroll progress hairline, roster progress, Ken Burns hero,
   marquee blur, label ticks, a11y focus states, Lachy support,
   and the 11-card fan geometry.
   ============================================================ */

/* ─── Global scroll progress hairline (injected by lux.js) ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9996;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 60%, var(--color-accent-ultra) 100%);
  box-shadow: 0 0 12px rgba(155, 31, 168, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ─── Hero: slow Ken Burns drift on the background plate ─── */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero::after {
    animation: hero-drift 30s ease-in-out infinite alternate;
  }
}

@keyframes hero-drift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-0.8%); }
}

/* ─── Section labels: hairline tick before the eyebrow ─── */
.card-fan__label,
.roster__label,
.scatter__label,
.partners__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.card-fan__label::before,
.roster__label::before,
.scatter__label::before,
.partners__label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--color-accent-line, rgba(194, 69, 208, 0.35));
  flex-shrink: 0;
}

/* ─── Marquee: motion blur on fast scroll (class set by marquee.js) ─── */
.marquee__track {
  transition: filter 200ms ease;
}

.marquee--blur .marquee__track {
  filter: blur(2.5px);
}

/* ─── Roster: scroll progress rule under the counter ─── */
.roster__progress {
  width: 130px;
  height: 1px;
  background: rgba(240, 235, 232, 0.12);
  margin-top: 0.7rem;
  overflow: hidden;
}

.roster__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  transform: scaleX(var(--roster-progress, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
}

/* ─── Roster: Lachy McLean (card 11) face positioning ─── */
.roster__card:nth-child(11) .roster__card-image img { object-position: center 18%; }

@media (max-width: 767px) {
  .roster__card:nth-child(11) .roster__card-image img { object-position: center 14%; }
  .roster__progress { width: 90px; margin-top: 0.5rem; }
}

/* ─── Accessibility: visible focus + revealed skip link ─── */
:focus-visible {
  outline: 1px solid var(--color-accent-light);
  outline-offset: 3px;
}

.sr-only:focus {
  position: fixed;
  top: 14px;
  left: 14px;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: nowrap;
  z-index: 10002;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-accent);
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ─── Footer: quiet legal links ─── */
.footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 300ms;
}

.footer__legal a:hover {
  color: var(--color-text-secondary);
}

/* ─── Reduced motion: silence the lux layer ─── */
@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .marquee--blur .marquee__track {
    animation: none !important;
    filter: none !important;
  }

  .roster__progress-fill,
  .marquee__track {
    transition: none !important;
  }
}


/* ─── Contain the hero scroll-zoom (scale 1.03 widened the document
   by ~22px on desktop — sideways trackpad wiggle). clip keeps the
   zoom visual but stops it growing the scroll area. ─── */
main {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  main { overflow-x: hidden; }
}

/* ─── Touch devices: stop the grain repaint loop (battery + jank) ─── */
@media (pointer: coarse) {
  .grain {
    animation: none !important;
  }
}

/* ─── Phones: keep each hero heading line on one line ───
   split.js wraps every character in a span, so the browser was free
   to break "AUSTRALIA'S" mid-word. Lock each line + size to fit. */
@media (max-width: 767px) {
  .hero__heading {
    font-size: clamp(2.8rem, 15.5vw, 4.8rem) !important;
  }

  .hero__heading-line {
    white-space: nowrap;
  }
}