/* Court diagram: the court never changes, only the players move.
   --e: 1 before the court enters view (players start at the net), 0 once drawn (walk back to the baselines).
   --p: scroll progress, 0 singles to 1 doubles (players shift, partners walk on from outside the sidelines). */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --e { syntax: '<number>'; inherits: true; initial-value: 0; }

:focus-visible { outline: 3px solid #B93C25; outline-offset: 3px; }

.court { --p: 0; --e: 0; transition: --p 1.1s cubic-bezier(.16, 1, .3, 1), --e 1.4s cubic-bezier(.16, 1, .3, 1) .15s; }
.js .court { --e: 1; }
.js .court.is-drawn { --e: 0; }

.court .pl { transform-box: fill-box; transform-origin: center; }
.court .pl-a { transform: translate(calc(var(--e) * 265px), calc(var(--p) * 62px)); }
.court .pl-b { transform: translate(calc(var(--e) * -265px), calc(var(--p) * -62px)); }
.court .partner { opacity: min(1, calc(var(--p) * 3)); }
.court .pt-a { transform: translateY(calc((1 - var(--p)) * -130px)); }
.court .pt-b { transform: translateY(calc((1 - var(--p)) * 130px)); }

.court-mode-s, .court-mode-d { transition: opacity .4s cubic-bezier(.16, 1, .3, 1); }
.court-mode-d, .court.is-doubles .court-mode-s { opacity: 0; }
.court.is-doubles .court-mode-d { opacity: 1; }

/* Hero order of play: rail segments draw in, rows settle in; hovering a row dims the hours it doesn't cover. */
@keyframes rail-in { from { transform: scaleX(0); } }
@keyframes row-in { from { opacity: 0; transform: translateY(14px); } }
.oop .rail { transform-origin: left center; animation: rail-in 1.1s cubic-bezier(.16, 1, .3, 1) .2s both; transition: opacity .35s cubic-bezier(.16, 1, .3, 1); }
.oop .seg-d { animation-delay: .55s; }
.oop-row { animation: row-in .8s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i, 0) * .1s) both; }
.oop:has(.row-s:hover, .row-s:focus-visible) .seg-d,
.oop:has(.row-d:hover, .row-d:focus-visible) .seg-s { opacity: .2; }

@media (prefers-reduced-motion: reduce) {
  .court, .court-mode-s, .court-mode-d, .oop .rail { transition: none; }
  .oop .rail, .oop-row { animation: none; }
}