/* ============================================================
   PWA opening animation — shown only when the site is launched
   from the home screen (standalone display mode).

   A baseball spins in from off-screen, lands centre, then the
   IT LEAGUE wordmark rises in; the whole overlay fades out to
   reveal the page. The overlay is injected by pwa-splash.js and
   removed once the animation finishes.
   ============================================================ */

.pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  /* navy radial field, matching the OS splash + manifest bg */
  background:
    radial-gradient(120% 90% at 50% 42%, #21357f 0%, #17256c 48%, #101746 100%);
  overflow: hidden;
  /* lock interaction while it plays */
  touch-action: none;
}

/* The whole overlay fades + lifts away at the end. */
.pwa-splash.is-leaving {
  animation: pwa-splash-out 0.55s cubic-bezier(0.6, 0, 0.75, 0) forwards;
}
@keyframes pwa-splash-out {
  to { opacity: 0; transform: scale(1.06); visibility: hidden; }
}

/* ---- Baseball ---- */
.pwa-splash-ball {
  width: 116px;
  height: 116px;
  position: relative;
  /* flies in from upper-left, spinning, then settles with a bounce */
  animation: pwa-ball-in 0.92s cubic-bezier(0.18, 0.7, 0.3, 1) both;
}
.pwa-splash-ball svg { display: block; width: 100%; height: 100%; }

@keyframes pwa-ball-in {
  0% {
    transform: translate(-78vw, -64vh) rotate(-720deg) scale(0.55);
    opacity: 0;
  }
  18% { opacity: 1; }
  68% {
    transform: translate(0, 0) rotate(8deg) scale(1.12);
  }
  82% {
    transform: translate(0, 0) rotate(-3deg) scale(0.96);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* Soft shadow that "appears" as the ball lands. */
.pwa-splash-ball::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 86px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(6px);
  transform: translateX(-50%) scale(0);
  animation: pwa-shadow 0.5s ease-out 0.62s both;
}
@keyframes pwa-shadow {
  to { transform: translateX(-50%) scale(1); }
}

/* Impact ring that pulses out when the ball lands. */
.pwa-splash-ring {
  position: absolute;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: pwa-ring 0.7s ease-out 0.62s both;
}
@keyframes pwa-ring {
  0%   { opacity: 0.75; transform: scale(0.7); }
  100% { opacity: 0;    transform: scale(2.5); }
}

/* ---- Wordmark ---- */
.pwa-splash-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* rises in just after the ball lands */
  animation: pwa-word-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.74s both;
}
@keyframes pwa-word-in {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
.pwa-splash-logo {
  font: italic 900 30px/1 "Arial Black", Arial, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  /* a moving sheen sweeps across the wordmark once */
  background: linear-gradient(
    100deg, #fff 38%, #ffd66b 50%, #fff 62%);
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pwa-sheen 0.9s ease-out 1.05s both;
}
@keyframes pwa-sheen {
  to { background-position: -60% 0; }
}
.pwa-splash-rule {
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: #db2830;
  transform: scaleX(0);
  transform-origin: center;
  animation: pwa-rule 0.45s ease-out 0.96s both;
}
@keyframes pwa-rule {
  to { transform: scaleX(1); }
}
.pwa-splash-since {
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.55);
  text-indent: 0.34em;
}

/* Respect reduced-motion: skip the choreography, just fade. */
@media (prefers-reduced-motion: reduce) {
  .pwa-splash-ball,
  .pwa-splash-word { animation: pwa-fade-simple 0.4s ease both; }
  .pwa-splash-ring,
  .pwa-splash-rule { display: none; }
  @keyframes pwa-fade-simple { from { opacity: 0; } to { opacity: 1; } }
}