/* Courtsmith interaction system — Emil Kowalski's design engineering principles. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --press-time: 140ms;
  --ui-time: 220ms;
  --header-height: 78px;
}
html { scrollbar-gutter: stable; }
body { -webkit-font-smoothing: antialiased; }
button, a { touch-action: manipulation; }
button:disabled { cursor: default; }
button, input { -webkit-tap-highlight-color: transparent; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 18px; }
.shop, .player-products, .work-section, .team { --focus-color: #1738b9; }
:is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-color, #b5cbff);
  outline-offset: 5px;
}
.skip-link {
  position: fixed; top: 12px; left: 4%; z-index: 100;
  padding: 14px 20px; background: #f4f2eb; color: #080d16;
  font-size: 13px; font-weight: 600; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.button, .jungle-play, .collab-rail-controls button, .runway-controls button,
#menu, .close, .film-close {
  transition: transform var(--press-time) var(--ease-out),
    background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
:is(.button, .jungle-play, .collab-rail-controls button, .runway-controls button,
#menu, .close, .film-close):not(:disabled):active { transform: scale(.97); }
.button > span, .intro-link > span, .roster-link > b, .brand .circle {
  transition: transform var(--ui-time) var(--ease-out), background-color 180ms ease;
}
.product-image img, .runway-product-image img {
  transition: transform 360ms var(--ease-out);
}
.fundamentals img.fundamentals-campaign-photo {
  transition: transform 500ms var(--ease-out);
}
.roster-link { transition: background-color 180ms ease; }
.text-link, .intro-link, .player-back {
  transition: color 180ms ease, border-color 180ms ease;
}
.product .price { min-height: 2.8em; line-height: 1.5; }
.product h3 { text-wrap: pretty; }
.brand .circle { background: #080d1620; }
.footwear { transition: border-color 180ms ease, background-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover > span, .intro-link:hover > span { transform: translateX(3px); }
  .roster-link:hover > b { transform: translate(3px, -3px); }
  .brand:hover .circle { transform: translate(2px, -2px); background: #ffffff16; }
  .product:hover .product-image img { transform: scale(1.035); }
  .text-link:hover, .intro-link:hover, .player-back:hover { border-color: currentColor; }
  .footwear:hover { border-color: #7185a5; background: #111825; }
}
@media (hover: none), (pointer: coarse) {
  .product:hover img, .fundamentals:hover img.fundamentals-campaign-photo,
  .runway-product-image:hover img { transform: none; }
  .roster-link:hover { background: transparent; }
  .button.white:hover { background: var(--ink); color: #111; }
  .button.black:hover { background: #111; color: #fff; }
}
/* A consistent header on the home page and every athlete page. */
header { z-index: 60; transition: background-color 180ms ease, border-color 180ms ease; }
header nav > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
header nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: #b5cbff; transform: scaleX(0); transform-origin: left;
  transition: transform var(--ui-time) var(--ease-out);
}
header nav > a[aria-current]::after { transform: scaleX(1); }
header nav > .nav-team { display: none; }
@media (hover: hover) and (pointer: fine) {
  header nav > a:hover::after { transform: scaleX(1); }
}
#menu { min-width: 82px; min-height: 44px; padding: 10px 0 10px 12px; }
.menu-word { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; }
.menu-icon { width: 20px; height: 14px; display: inline-block; position: relative; }
.menu-icon::before, .menu-icon::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
  transform-origin: center; transition: transform var(--ui-time) var(--ease-out);
}
.menu-icon::before { top: 3px; }
.menu-icon::after { bottom: 3px; }
[aria-expanded="true"] .menu-icon::before { transform: translateY(3.5px) rotate(45deg); }
[aria-expanded="true"] .menu-icon::after { transform: translateY(-3.5px) rotate(-45deg); }
.nav-shade { display: none; }
@media (max-width: 1000px) {
  header .uniform-nav { display: none; }
  header #menu { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
  header nav {
    position: absolute; top: var(--header-height); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 18px 5% 26px;
    background: #0e1623; border-bottom: 1px solid #ffffff24;
    max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain;
  }
  .ui-ready header nav {
    display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity 140ms ease, transform 140ms var(--ease-out), visibility 0s 140ms;
  }
  .ui-ready header nav.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s;
  }
  header nav > a { font-size: 15px; letter-spacing: .05em; min-height: 52px; border-bottom: 1px solid #ffffff12; }
  header nav > a::after { display: none; }
  header nav > a[aria-current] { color: #b5cbff; }
  header nav > a[aria-current]::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 12px; }
  header nav > .nav-team { display: flex; font-size: 11px; color: #aebed8; border: 0; margin-top: 10px; }
  .nav-shade {
    display: block; position: fixed; inset: var(--header-height) 0 0; z-index: 55;
    background: #02050ca6; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 140ms ease, visibility 0s 140ms;
  }
  .nav-expanded .nav-shade { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-expanded header { background: #0e1623; border-color: #ffffff24; }
}
/* Filters stay usable while the new result set fades in. */
.shop-toolbar { display: flex; gap: 24px; align-items: end; justify-content: space-between; border-bottom: 1px solid #c7c8c3; margin: 35px 0 28px; }
.shop-toolbar .filters { position: relative; border: 0; margin: 0; gap: 24px; }
.shop-toolbar .filters button { min-height: 48px; position: relative; white-space: nowrap; font-weight: 600; border: 0; }
.filters button.active { color: #111; }
.filters button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #111; }
.filters.indicator-ready button::after { display: none; }
.filter-indicator { position: absolute; pointer-events: none; height: 2px; width: 1px; left: 0; bottom: -1px; background: #111; transform-origin: left; transition: transform var(--ui-time) var(--ease-out); }
.product-results { color: #626660; font-size: 10px; letter-spacing: .08em; padding-bottom: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.product-empty { grid-column: 1 / -1; padding: 45px 0; line-height: 1.6; }
.product-empty a { text-decoration: underline; text-underline-offset: 4px; }
/* Film pacing remains driven by the original full-length image sequence. */
.cinema-chapter { transition: opacity 180ms ease, transform 240ms var(--ease-out); }
.cinema-chapter[data-active="false"] { transform: translateY(-8px); transition-duration: 130ms, 180ms; }
.scroll-arrow { animation-iteration-count: 3; }
.cinema-bottom #watch-film { min-height: 44px; }
.cinema-bottom .skip-intro { min-height: 44px; display: inline-flex; align-items: center; }
.cinema-meta, .cinema-bottom, .scoreboard { font-variant-numeric: tabular-nums; }
dialog { border-color: #ffffff2b; box-shadow: 0 24px 90px #0009; max-height: calc(100dvh - 40px); overflow-y: auto; }
dialog::backdrop { background: #02050ccc; backdrop-filter: blur(4px); }
dialog .close, #film-dialog .film-close { display: grid; place-items: center; width: 44px; height: 44px; top: 4px; right: 6px; padding: 0; }
.next-move input { font-size: 16px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.next-move input:focus-visible { outline: none; border-color: #b5cbff; box-shadow: 0 1px 0 #b5cbff; }
.next-move input::placeholder { font-size: 13px; }
#clear-move { min-height: 44px; }
#needle { left: 0; will-change: transform; }
.collab-product-rail { scroll-padding-inline: 7px; padding: 7px 7px 24px; }
@media (max-width: 600px) {
  :root { --header-height: 72px; }
  .shop-toolbar { display: block; margin-top: 26px; }
  .shop-toolbar .filters { gap: clamp(12px, 4vw, 24px); width: max-content; max-width: 100%; }
  .shop-toolbar .filters button { font-size: 10px; }
  .product-results { padding: 11px 0 12px; font-size: 9px; }
  .cinema-bottom #watch-film { width: auto; flex: 1 0 45%; margin: 0; }
  .cinema-bottom .skip-intro { margin: 0; font-size: 8px; justify-content: flex-end; flex: 1 0 30%; }
  .cinema-bottom { bottom: max(20px, env(safe-area-inset-bottom)); }
  .next-move { padding-inline: 24px; }
  .product h3 { margin-top: 14px; }
}
html[data-input="keyboard"] :is(header nav, .nav-shade, .filter-indicator, .button),
html[data-input="keyboard"] .menu-icon::before, html[data-input="keyboard"] .menu-icon::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .button:active, .jungle-play:active, .collab-rail-controls button:active, #menu:active,
  .product:hover img, .brand:hover .circle, .fundamentals:hover img.fundamentals-campaign-photo,
  .runway-product-image:hover img, .button:hover > span, .intro-link:hover > span, .roster-link:hover > b { transform: none; }
}