/* Splash screen: a floodlit court draws itself, a ball drops and bounces, the wordmark appears. 5 seconds. */
#splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: #080808; color: #f5f1e8; transition: opacity 0.5s ease, visibility 0.5s; }
#splash.out { opacity: 0; visibility: hidden; }
#splash .flood { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% -8%, rgba(212, 175, 55, 0.45), rgba(120, 90, 15, 0.16) 48%, transparent 76%), radial-gradient(ellipse 90% 40% at 50% 112%, rgba(212, 175, 55, 0.12), transparent 70%); animation: flood-on 1.4s ease-out both; }
#splash .stage { position: relative; width: min(560px, 92vw); text-align: center; display: grid; justify-items: center; gap: 22px; padding: 0 16px; }
#splash svg.court { width: 100%; height: auto; overflow: visible; }
#splash .ln { fill: none; stroke: #d4af37; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.6, 0, .2, 1) forwards; }
#splash .ln.l1 { animation-delay: 0.25s; } #splash .ln.l2 { animation-delay: 0.6s; } #splash .ln.l3 { animation-delay: 0.9s; } #splash .ln.l4 { animation-delay: 1.1s; }
#splash .net { stroke: #f5f1e8; stroke-width: 3.2; stroke-opacity: 0.9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s ease-out 1.3s forwards; }
#splash .glass { fill: none; stroke: #d4af37; stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s ease-out 0.4s forwards; }
#splash .shadow { fill: #000; opacity: 0; transform-box: fill-box; transform-origin: center; animation: shadow 1.9s ease-in 1.7s forwards; }
#splash .ball-wrap { transform-box: fill-box; animation: drop 1.9s cubic-bezier(.3, 0, .7, 1) 1.7s both; }
#splash .ball { fill: #d4af37; filter: drop-shadow(0 0 8px rgba(232, 198, 90, 0.7)); }
#splash .seam { fill: none; stroke: #080808; stroke-width: 1.6; stroke-opacity: 0.55; }
#splash .ring { fill: none; stroke: #e8c65a; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring 1.2s ease-out 2.6s both; }
#splash .mark { display: grid; gap: 6px; opacity: 0; transform: translateY(14px); animation: rise 0.9s ease-out 3s forwards; }
#splash .mark b { font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 800; font-size: clamp(2.6rem, 11vw, 4rem); letter-spacing: 0.12em; color: #d4af37; line-height: 1; padding-left: 0.12em; }
#splash .mark span { letter-spacing: 0.42em; font-size: clamp(0.72rem, 2.8vw, 0.9rem); color: #f5f1e8; padding-left: 0.42em; font-weight: 600; }
#splash .mark em { font-style: normal; color: #9c968a; font-size: 0.9rem; margin-top: 8px; letter-spacing: 0.06em; }
#splash .bar { position: absolute; left: 50%; bottom: 36px; width: min(260px, 60vw); height: 3px; border-radius: 3px; background: rgba(212, 175, 55, 0.16); transform: translateX(-50%); overflow: hidden; }
#splash .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8c7326, #e8c65a); transform-origin: left; transform: scaleX(0); animation: fill 5s linear forwards; }
#splash .skip { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid rgba(212, 175, 55, 0.3); color: #9c968a; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 0.85rem; cursor: pointer; opacity: 0; animation: rise 0.5s ease-out 1s forwards; }
#splash .skip:hover, #splash .skip:focus-visible { color: #d4af37; border-color: #d4af37; outline: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes flood-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(2.4); } }
/* the ball falls from above the court, bounces three times, settles on the centre service line */
@keyframes drop {
  0% { opacity: 0; transform: translateY(-190px) scale(1.25); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  3% { opacity: 1; transform: translateY(-185px) scale(1.25); }
  34% { transform: translateY(0) scale(1, 1); }
  38% { transform: translateY(0) scale(1.25, 0.72); }
  42% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0, .4, .5, 1); }
  58% { transform: translateY(-62px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  72% { transform: translateY(0) scale(1.15, 0.85); }
  80% { transform: translateY(-20px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  90% { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes shadow { 0% { opacity: 0; transform: scale(0.3); } 34% { opacity: 0.55; transform: scale(1); } 58% { opacity: 0.25; transform: scale(0.6); } 72% { opacity: 0.5; transform: scale(0.95); } 100% { opacity: 0.5; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #splash *, #splash .flood { animation: none !important; }
  #splash .ln, #splash .net, #splash .glass { stroke-dashoffset: 0; }
  #splash .mark, #splash .skip { opacity: 1; transform: none; }
  #splash .bar i { transform: scaleX(1); }
  #splash .ring, #splash .shadow { display: none; }
}
body.splashing { overflow: hidden; }