/* UI Skills, Coss, Colorion, React Bits and Transitions.dev adaptations.
   See docs/ui-resources.md and third-party notices. */

/* Coss segmented-control presentation with native toggle buttons. */
.criteria-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  margin: 28px auto 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b1626;
  box-shadow: 0 2px 4px #0002, 0 12px 32px #0002;
}
.criteria-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-2);
  background: transparent;
  font: 600 12px/1.4 'Manrope', sans-serif;
  transition: background-color 150ms, color 150ms, border-color 150ms, transform 120ms;
}
.criteria-filters button span { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.criteria-filters button:hover { color: var(--text); background: #ffffff08; }
.criteria-filters button[aria-pressed="true"] {
  color: var(--brand);
  background: var(--green-soft);
  border-color: var(--green-line);
  box-shadow: 0 1px 3px #0003;
}
.criteria-filters button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.criteria-filters button:active { transform: scale(.96); }
.criteria-count { margin: 14px auto 20px; color: var(--text-2); text-align: center; font-size: 12px; }
.variable[hidden] { display: none; }
.variable { transition: border-color 150ms, background-color 150ms; }

/* Colorion Shine Sweep / UI Skills press feedback on enabled calls to action. */
:is(.primary, .hero-search button, .au-submit) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 160ms, border-color 160ms, box-shadow 160ms, transform 120ms;
}
:is(.primary, .hero-search button, .au-submit)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #ffffff40 50%, transparent 75%);
  transform: translateX(-120%);
}
.primary:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.96); }
:is(.primary, .hero-search button, .au-submit):not(:disabled):not([aria-disabled="true"]):focus-visible::after { transform: translateX(120%); transition: transform 450ms ease-out; }
.text-link svg { transition: transform 160ms ease-out; }
.text-link:focus-visible svg { transform: translateX(3px); }

@media (hover: hover) and (pointer: fine) {
  :is(.primary, .hero-search button, .au-submit):not(:disabled):not([aria-disabled="true"]):hover::after { transform: translateX(120%); transition: transform 450ms ease-out; }
  .text-link:hover svg { transform: translateX(3px); }
}

/* Colorion Invert + Lift + Shine Sweep: immediate feedback across the actual
   navigation, CTAs and row actions. Explicit disabled states stay inactive. */
:is(.primary, .secondary, .hero-btn, .header-signin, .row-action, .hero-search button, .au-submit, .au-secondary, .criteria-filters button) {
  position: relative;
  overflow: hidden;
  transition: color 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, translate 180ms ease-out, scale 120ms ease-out;
}
:is(.primary, .secondary, .hero-btn, .header-signin, .row-action, .hero-search button, .au-submit, .au-secondary, .criteria-filters button):not(:disabled):not([aria-disabled="true"]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
:is(.primary, .secondary, .hero-btn, .header-signin, .row-action, .hero-search button, .au-submit, .au-secondary, .criteria-filters button):not(:disabled):not([aria-disabled="true"]):active {
  scale: .96;
  translate: 0 1px;
}
.row-action svg, .header-signin svg, .primary svg, .secondary svg { transition: translate 180ms ease-out; }
.row-action { min-height: 44px; padding: 10px; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; }
.row-action:hover svg { transform: none; }
.site-nav a { position: relative; transition: color 180ms, background-color 180ms; }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
  pointer-events: none;
}
.site-nav a:focus-visible::after { transform: scaleX(1); }
.stat-cell, .variable, .game-row, .ap-visual, .px-card {
  transition: background-color 200ms, border-color 200ms, box-shadow 200ms, translate 200ms ease-out;
}
.match-preview .section-heading h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: var(--text);
}
.match-preview .section-heading h2 span { font: inherit; color: inherit; margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  :is(.primary, .hero-search button, .au-submit):not(:disabled):not([aria-disabled="true"]):hover {
    background: #d4ffa9;
    color: #10220b;
    border-color: #e4ffc9;
    box-shadow: 0 0 0 4px #9fe87024, 0 10px 28px -8px #9fe87066;
    translate: 0 -3px;
  }
  :is(.secondary, .hero-btn:not(.primary), .header-signin, .row-action, .au-secondary):not(:disabled):not([aria-disabled="true"]):hover {
    background: #9fe870;
    color: #10220b;
    border-color: #b9f895;
    box-shadow: 0 8px 22px -10px #9fe87088;
    translate: 0 -3px;
  }
  :is(.primary, .secondary, .header-signin, .row-action):not(:disabled):not([aria-disabled="true"]):hover svg { translate: 4px 0; color: inherit; }
  .criteria-filters button:hover {
    background: #25442c;
    color: #d4ffa9;
    border-color: #9fe87099;
    translate: 0 -2px;
  }
  .site-nav a:hover { color: var(--brand); background-color: #9fe87012; }
  .site-nav a:hover::after { transform: scaleX(1); }
  :is(.ap-visual, .px-card, .variable):hover { translate: 0 -4px; border-color: #9fe87099; box-shadow: 0 12px 28px -12px #0008, 0 0 0 1px #9fe87030; }
  .stat-cell:hover { background: #172e28; box-shadow: inset 0 -3px var(--brand); }
  .game-row:hover { background: #152d25; box-shadow: inset 3px 0 var(--brand); margin: 0; padding: 20px 4px; }
}
.ui-click-wave {
  position: absolute;
  left: var(--wave-x);
  top: var(--wave-y);
  width: var(--wave-size);
  height: var(--wave-size);
  border-radius: 50%;
  background: currentColor;
  opacity: .18;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}
@keyframes ui-visible-entrance {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-revealed > span { animation: ui-visible-entrance 350ms ease-out; }
}

/* Brighter existing photographs, with a dark veil behind the typography. */
.hero-photo { opacity: .8; filter: saturate(.72) brightness(.95) contrast(1.04); }
.hero-veil { background: linear-gradient(180deg, #0a142633, #0a142666 60%, #0a1426e6), linear-gradient(90deg, #0a1426bb, #0a142633 70%); }
.hero h1, .hero-sub { text-shadow: 0 2px 16px #07101acc; }
.stats-banner::before { opacity: .32; filter: saturate(.65) brightness(.9); }
.matchup-feature-bg { opacity: .65; filter: saturate(.7) brightness(.95); }
.matchup-feature-bg::after { background: linear-gradient(180deg, #0a142644, #0a1426bb); }
.sources-bg { opacity: .65; filter: saturate(.75) brightness(.95); }
.sources-bg::after { background: linear-gradient(180deg, #0a142644, #0a1426bb); }
.px-public { position: relative; isolation: isolate; }
.px-public::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #0a1426aa, #0a1426cc 70%, var(--bg)), url('assets/court.jpg') center 45% / cover; }
.px-public .px-card { background-color: #101d2bf0; }

.section-analysis-cta { display: flex; justify-content: center; padding: 28px 20px; }
.hero-analysis-cta { position: relative; z-index: 3; padding-bottom: 0; }
.pricing-analysis-cta { padding: 0 20px 72px; }
.analysis-cta { min-height: 48px; max-width: 100%; white-space: normal; text-align: center; }
.matchup-feature-center .analysis-cta { font-size: 13px; }
.ap-visual.ap-capture { width: min(100%, 720px); padding: clamp(16px, 2.5vw, 28px); }
.ap-capture .ap-court { max-height: 440px; margin: 14px 0; }
.ap-player { transform-box: fill-box; transform-origin: center; }
.ap-sequence i { background: #283846; overflow: hidden; }
.ap-sequence b { display: block; height: 100%; width: 66.6667%; background: var(--brand); border-radius: inherit; transform-origin: left; }
.motion-word, .motion-letter { display: inline-block; }
[data-reveal].has-word-motion.is-revealed > span { animation: none; }
.stat-number, .matchup-feature-prob strong, .ap-result strong, .hwp-prob strong, .px-amount { transform-origin: center; }
.matchup-feature-prob strong, .ap-result strong, .hwp-prob strong, .px-amount { display: inline-block; }
@media (max-width: 560px) {
  .px-public::before { inset-inline: 0; }
  .section-analysis-cta { padding-inline: 0; }
  .hero-analysis-cta { padding-inline: 18px; }
  .analysis-cta { font-size: 12px; padding-inline: 12px; }
}

/* Transitions.dev modal scale + short directional exit. Existing native
   dialog focus trapping / Escape handling remains in redesign.js. */
:root { --modal-open-dur: 200ms; --modal-close-dur: 140ms; --modal-ease: cubic-bezier(.2,.8,.2,1); }
.t-modal { transform: translateY(8px) scale(.97); will-change: auto; }
.t-modal.is-open { transform: translateY(0) scale(1); }
.t-modal.is-closing { transform: translateY(6px) scale(.98); }

@media (max-width: 560px) {
  .criteria-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .criteria-filters button { padding: 9px 6px; gap: 5px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .primary, .primary::after, .criteria-filters button, .text-link svg, .t-modal { transition: none !important; }
  :is(.primary, .hero-search button, .au-submit)::after { display: none; }
  .primary:active, .criteria-filters button:active, .text-link svg, .t-modal, .t-modal.is-open, .t-modal.is-closing { transform: none !important; }
  :is(.primary, .secondary, .hero-btn, .header-signin, .row-action, .hero-search button, .au-submit, .au-secondary, .criteria-filters button, .site-nav a, .site-nav a::after, .ap-visual, .px-card, .stat-cell, .variable, .game-row, .row-action svg, .header-signin svg, .primary svg, .secondary svg) {
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
}

/* Quiet editorial motion; the portrait credits stay available on every device. */
.photo-credits { margin-top: 18px; font-size: 11px; line-height: 1.6; color: #b1bdcc; text-align: left; }
.photo-credits summary { cursor: pointer; padding: 6px 0; width: fit-content; }
.photo-credits summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.photo-credits ul { padding-left: 18px; margin: 8px 0 0; }
.photo-credits a { color: #d8e4ed; text-decoration: underline; text-underline-offset: 3px; }
.px-card .px-amount { font-variant-numeric: tabular-nums; }
.account-card { min-width: 0; }
.account-card .email { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .renewal-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .renewal-row strong { overflow-wrap: anywhere; max-width: 100%; }
}