/* ============================================================
   NotaSportsGuru — Refined Layer (preview overlay)
   ============================================================
   Loaded ONLY on /preview. Surgically overrides the base site
   with craft refinements from emil-design-eng + transitions-dev
   + impeccable, preserving the navy/gold/ivory identity.

   Scope discipline:
   - No visual world change (rejected 2026-07-26).
   - No copy edits, no layout restructuring.
   - Only transform/opacity/filter transitions.
   - Every animation honours prefers-reduced-motion.
   ============================================================ */

.nspg-root {
  /* Stronger custom curves. Existing --ease-apple stays for hero. */
  --ease-punch: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-motion: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-hover: 180ms;
  --dur-reveal: 900ms;
}

/* ─── 1. Universal focus-visible ring ───────────────────────
   The base site has no keyboard focus indicator. */
.nspg-root a:focus-visible,
.nspg-root button:focus-visible,
.nspg-root [role="button"]:focus-visible,
.nspg-root input:focus-visible,
.nspg-root select:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.nspg-root .nspg-btn:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

/* ─── 2. Primary CTA — snappier hover + real press feedback ─
   Was: 250ms lift + shadow on hover only.
   Now: 180ms hover, 140ms scale on press, hover behind media query. */
.nspg-root .nspg-btn {
  transition:
    transform var(--dur-press) var(--ease-punch),
    background var(--dur-hover) var(--ease-punch),
    border-color var(--dur-hover) var(--ease-punch),
    box-shadow var(--dur-hover) var(--ease-punch);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(14, 36, 56, 0.22);
  }
}
.nspg-root .nspg-btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

/* Arrow: icon-swap-style with subtle blur to bridge the shift. */
.nspg-root .nspg-btn__arrow {
  transition:
    transform var(--dur-hover) var(--ease-punch),
    filter var(--dur-hover) var(--ease-punch);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-btn:hover .nspg-btn__arrow {
    transform: translateX(3px);
  }
}
.nspg-root .nspg-btn:active .nspg-btn__arrow {
  transform: translateX(1px) scale(0.94);
}

/* ─── 3. Nav underline — from centre, punchier curve ────────
   Was: width 0 → 100% left-anchored. Now: scaleX from centre,
   which is smoother and doesn't touch layout. */
.nspg-root .nspg-nav a::after {
  width: 100%;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-punch);
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-nav a:hover::after,
  .nspg-root .nspg-nav a:focus-visible::after {
    transform: scaleX(1);
  }
}
.nspg-root .nspg-nav a {
  transition: color 180ms var(--ease-punch);
}

/* Nav CTA press feedback (was hover only) */
.nspg-root .nspg-nav__cta {
  transition:
    transform var(--dur-press) var(--ease-punch),
    background var(--dur-hover) var(--ease-punch);
}
.nspg-root .nspg-nav__cta:active {
  transform: scale(0.96);
}

/* ─── 4. Pillars — refined hover, press feedback ────────────
   Was: translateY(-4px) + shadow. Now: tighter lift, cleaner
   shadow, subtle inner highlight, press-in on click. */
.nspg-root .nspg-pillar {
  transition:
    border-color 220ms var(--ease-punch),
    transform 220ms var(--ease-punch),
    box-shadow 220ms var(--ease-punch);
  position: relative;
}
.nspg-root .nspg-pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 80% at 50% 0%,
    rgba(27, 58, 94, 0.06),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 220ms var(--ease-punch);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-pillar:hover {
    transform: translateY(-3px);
    border-color: var(--navy);
    box-shadow:
      0 1px 2px rgba(14, 36, 56, 0.04),
      0 12px 32px rgba(14, 36, 56, 0.10);
  }
  .nspg-root .nspg-pillar:hover::after {
    opacity: 1;
  }
}
.nspg-root .nspg-pillar:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--dur-press);
}

/* ─── 5. Live ticker card — same treatment ──────────────────*/
.nspg-root .nspg-tick {
  transition:
    transform 220ms var(--ease-punch),
    border-color 220ms var(--ease-punch),
    box-shadow 220ms var(--ease-punch);
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-tick:hover {
    transform: translateY(-2px);
  }
}

/* Ticker pager buttons — harmonised timing + focus */
.nspg-root .nspg-tick-pager__btn {
  transition:
    background var(--dur-hover) var(--ease-punch),
    border-color var(--dur-hover) var(--ease-punch),
    transform var(--dur-press) var(--ease-punch),
    color var(--dur-hover) var(--ease-punch);
}
.nspg-root .nspg-tick-pager__btn:active:not(:disabled) {
  transform: scale(0.92);
}

/* ─── 6. Sport tiles — subtle scale on hover ────────────────*/
.nspg-root .nspg-sport {
  transition:
    background var(--dur-hover) var(--ease-punch),
    transform 220ms var(--ease-punch);
}
@media (hover: hover) and (pointer: fine) {
  .nspg-root .nspg-sport:hover {
    background: var(--soft);
  }
}

/* ─── 7. Hero quickstats + resprev stats — number pop-in ────
   When the block scrolls into view, digits rise with subtle
   blur. Wired by nspg-refined.js. */
.nspg-root [data-pop] .nspg-hero__qs-num > *,
.nspg-root [data-pop] .nspg-rp-stat__num > *,
.nspg-root [data-pop] .nspg-case__stat-num > *,
.nspg-root [data-pop] .nspg-bench__row-val > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
  transition:
    opacity 500ms var(--ease-punch),
    transform 500ms var(--ease-punch),
    filter 500ms var(--ease-punch);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.nspg-root [data-pop].is-visible .nspg-hero__qs-num > *,
.nspg-root [data-pop].is-visible .nspg-rp-stat__num > *,
.nspg-root [data-pop].is-visible .nspg-case__stat-num > *,
.nspg-root [data-pop].is-visible .nspg-bench__row-val > * {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ─── 8. Section eyebrow pill — press-away distraction ──────
   Was: infinite pulse. Now: single soft breath on enter,
   then still. Less nag on scroll-back. */
.nspg-root .nspg-eyebrow::before {
  animation: nspg-eyebrow-breath 4.5s var(--ease-motion) infinite;
}
@keyframes nspg-eyebrow-breath {
  0%, 100% { box-shadow: 0 0 0 4px var(--navy-tint); }
  50%      { box-shadow: 0 0 0 7px rgba(27, 58, 94, 0.05); }
}

/* ─── 9. Split-words hero reveal — from 1.2s → 900ms ────────
   1200ms felt sluggish on second visit. 900ms with a stronger
   curve keeps drama without losing the reader. */
.nspg-root .split-words .word > span {
  transition: transform var(--dur-reveal) var(--ease-motion);
}
.nspg-root .reveal {
  transition:
    opacity var(--dur-reveal) var(--ease-motion),
    transform var(--dur-reveal) var(--ease-motion);
}
.nspg-root .reveal-fade {
  transition: opacity 1000ms var(--ease-motion);
}
.nspg-root .reveal-scale {
  transition:
    opacity var(--dur-reveal) var(--ease-motion),
    transform var(--dur-reveal) var(--ease-motion);
}

/* Tighten split-word delays too (base was 60/140/220/…) */
.nspg-root .split-words.is-visible .word:nth-child(1)  > span { transition-delay: 40ms; }
.nspg-root .split-words.is-visible .word:nth-child(2)  > span { transition-delay: 100ms; }
.nspg-root .split-words.is-visible .word:nth-child(3)  > span { transition-delay: 160ms; }
.nspg-root .split-words.is-visible .word:nth-child(4)  > span { transition-delay: 230ms; }
.nspg-root .split-words.is-visible .word:nth-child(5)  > span { transition-delay: 290ms; }
.nspg-root .split-words.is-visible .word:nth-child(6)  > span { transition-delay: 350ms; }
.nspg-root .split-words.is-visible .word:nth-child(7)  > span { transition-delay: 410ms; }
.nspg-root .split-words.is-visible .word:nth-child(8)  > span { transition-delay: 470ms; }

/* ─── 10. Benchmark bar fill — release timing tighter ───────*/
.nspg-root .nspg-bench__row-fill {
  transition: width 1s var(--ease-motion);
}

/* ─── 11. Header — hairline on scroll, not always ───────────
   Base has a permanent bottom border. Cleaner: opaque only
   when the page has scrolled. Uses a scroll-linked animation
   via CSS-only (Chromium 115+); falls back to the base border. */
@supports (animation-timeline: scroll()) {
  .nspg-root .nspg-header {
    border-bottom-color: transparent;
    animation: nspg-header-elevate linear both;
    animation-timeline: scroll();
    animation-range: 0 80px;
  }
  @keyframes nspg-header-elevate {
    to {
      border-bottom-color: rgba(229, 231, 235, 0.9);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 6px 20px -12px rgba(14, 36, 56, 0.20);
    }
  }
}

/* ─── 12. Muted text — subtle contrast bump ─────────────────
   #5F6B7A on white = ~4.6:1. Bumping to 4.9:1 without losing
   the editorial hush. */
.nspg-root {
  --muted: #556377;
}

/* ─── 13. Reduced motion — every added animation opt-out ────*/
@media (prefers-reduced-motion: reduce) {
  .nspg-root [data-pop] .nspg-hero__qs-num > *,
  .nspg-root [data-pop] .nspg-rp-stat__num > *,
  .nspg-root [data-pop] .nspg-case__stat-num > *,
  .nspg-root [data-pop] .nspg-bench__row-val > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .nspg-root .nspg-eyebrow::before { animation: none !important; }
  .nspg-root .nspg-btn,
  .nspg-root .nspg-btn:active,
  .nspg-root .nspg-btn:hover,
  .nspg-root .nspg-pillar,
  .nspg-root .nspg-pillar:hover,
  .nspg-root .nspg-tick,
  .nspg-root .nspg-tick:hover {
    transform: none !important;
  }
}