/* Animated Pokémon-style opening screen. Reuses existing, approved PokéRally assets. */
body.intro-active { overflow: hidden; }
body.intro-active .app { visibility: hidden; }
.title-intro[hidden] { display: none !important; }
.title-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; justify-content: center;
  background: #091b38; overflow: hidden; isolation: isolate;
  font-family: Pixel, 'Courier New', monospace;
}
.title-intro-frame {
  width: min(540px, 100%); height: 100%; min-height: 100svh;
  position: relative; overflow: hidden; isolation: isolate;
  background: #77b9e9 url('../assets/backgrounds/home-garden.webp') center / 100% 100% no-repeat;
  box-shadow: 0 0 0 3px #183456, 0 0 65px #0009;
}
.title-intro-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #04327350 0%, #0b519221 28%, transparent 55%, #091e43aa 85%, #06132cdd 100%);
  pointer-events: none;
}
.title-intro-logo-wrap {
  position: absolute; top: clamp(48px, 12%, 136px); left: 5%; width: 90%;
  display: grid; justify-items: center; z-index: 2;
  animation: intro-arrive 1100ms cubic-bezier(.18,.8,.25,1.15) both;
}
.title-intro-logo-wrap::before {
  content: ''; position: absolute; width: 85%; aspect-ratio: 1; top: -84%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, #fff5a552 0%, #75daff35 28%, #267bde25 55%, transparent 72%);
  animation: intro-glow 4s ease-in-out infinite alternate; pointer-events: none;
}
.title-intro-logo {
  width: 100%; max-width: 500px; height: auto; object-fit: contain;
  filter: drop-shadow(0 5px 0 #04204c) drop-shadow(0 10px 18px #04152a9b);
  animation: intro-float 4.2s ease-in-out 1.1s infinite;
}
.title-intro-start {
  position: absolute; bottom: clamp(72px, 12%, 128px); left: 50%; z-index: 3;
  width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%);
  background: transparent; border: 0; box-shadow: none;
  color: #fffdfa; padding: 6px 0; cursor: pointer; white-space: nowrap;
  font: 700 clamp(15px, 4.2vw, 21px) / 1.4 Pixel, 'Courier New', monospace !important;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-shadow: 2px 3px #08234b; letter-spacing: 1px;
  animation: intro-button-in 850ms 700ms backwards;
}
.title-intro-start:hover { background: transparent; border: 0; box-shadow: none; color: #ffefb0; }
.title-intro-start:focus-visible { outline: 3px solid #ffcc46; outline-offset: 4px; background: transparent; }
.title-intro-start .intro-arrow { color: #ffe364; font-size: .9em; animation: intro-arrow-pulse 850ms infinite steps(2, end); }
.title-intro-bottom {
  position: absolute; z-index: 2; bottom: 20px; width: 100%; padding: 0 12px;
  text-align: center; color: #e0f2ff; font: 700 10px / 1.4 Pixel, 'Courier New', monospace !important;
  letter-spacing: .4px; text-shadow: 2px 2px #061c40;
}
.title-intro-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.title-intro-sparkles span { position: absolute; width: 6px; height: 6px; background: #fff7ba; box-shadow: 0 0 0 2px #fff4, 0 0 20px 6px #f7e485ba; animation: intro-twinkle 2.6s ease-in-out infinite; }
.title-intro-sparkles span:nth-child(1) { top: 10%; left: 14%; animation-delay: .2s; }
.title-intro-sparkles span:nth-child(2) { top: 28%; right: 11%; animation-delay: 1.1s; }
.title-intro-sparkles span:nth-child(3) { top: 42%; left: 8%; animation-delay: 1.9s; }
.title-intro-sparkles span:nth-child(4) { top: 64%; right: 8%; animation-delay: .6s; }
.title-intro-sparkles span:nth-child(5) { top: 77%; left: 16%; animation-delay: 2s; }
.title-intro.is-exiting { animation: intro-exit 390ms ease-in forwards; pointer-events: none; }
@keyframes intro-arrive { from { opacity: 0; transform: translateY(-50px) scale(.86); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes intro-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes intro-glow { from { opacity: .45; transform: scale(.9); } to { opacity: .9; transform: scale(1.1); } }
@keyframes intro-button-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes intro-arrow-pulse { 50% { opacity: .2; } }
@keyframes intro-twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }
@keyframes intro-exit { to { opacity: 0; transform: scale(1.025); } }
@media (max-width: 420px) {
  .title-intro-logo-wrap { top: 13%; }
    .title-intro-start { bottom: 13%; padding: 6px 0; gap: 5px; }
  .title-intro-bottom { bottom: 14px; font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .title-intro *, .title-intro *::before { animation: none !important; transition: none !important; }
  .title-intro.is-exiting { animation: none !important; }
}