/*
 * Screen transition styles for animated overlays.
 * Loaded after ui.css. Uses visibility+opacity instead of display:none
 * so CSS transitions can animate entry/exit.
 */

/* ================================================
   Base: full-screen overlay that fades in/out
   ================================================ */
/* Screen overlays: punch IN with an overshoot spring (cubic-bezier(0.34,
 * 1.56, 0.64, 1) — same curve used by titleDrop). Was Material-standard
 * (0.4, 0, 0.2, 1) which fades like Gmail; for a kids' game we want screens
 * to feel like they jump onto the stage. We also scale-in from 0.94 → 1.0
 * so the entry isn't pure opacity. */
.screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94);
  transition: opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 280ms;
  will-change: opacity, transform;
}

.screen-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 0s;
}

/* ================================================
   Start screen exit animation
   ================================================ */
.start-screen.screen-exiting {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.6, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.6, 1);
  pointer-events: none;
}

/* ================================================
   Camera/gate overlay: scale-up entry
   ================================================ */
.screen-overlay.gate-overlay {
  transition: opacity 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 250ms;
}

.screen-overlay.gate-overlay.active {
  transition: opacity 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 0s;
}

/* ================================================
   Recap overlay: fade + slide up
   ================================================ */
.screen-overlay.recap-transition {
  transition: opacity 350ms cubic-bezier(0.0, 0, 0.2, 1),
              visibility 0s linear 350ms;
}

.screen-overlay.recap-transition.active {
  transition: opacity 350ms cubic-bezier(0.0, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* Staggered section reveals inside recap */
.recap-overlay .recap-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.recap-overlay.active .recap-section {
  opacity: 1;
  transform: translateY(0);
}

.recap-overlay.active .recap-section:nth-child(1) { transition-delay: 100ms; }
.recap-overlay.active .recap-section:nth-child(2) { transition-delay: 250ms; }
.recap-overlay.active .recap-section:nth-child(3) { transition-delay: 400ms; }
.recap-overlay.active .recap-section:nth-child(4) { transition-delay: 550ms; }
.recap-overlay.active .recap-section:nth-child(5) { transition-delay: 700ms; }

/* ================================================
   Tracking lost hint (mid-game)
   ================================================ */
.tracking-lost-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 24px 36px;
  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 800;
}

.tracking-lost-hint.visible {
  opacity: 1;
}

/* ================================================
   Play Again pill on start screen
   ================================================ */
.play-again-pill {
  display: none;
  margin: 0 auto 16px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #fff;
  border: none;
  border-radius: 28px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.play-again-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
}

.play-again-pill:active {
  transform: scale(0.98);
}

.play-again-pill.visible {
  display: block;
}

/* ================================================
   Animated score counter pulse
   ================================================ */
.recap-score-animated {
  display: inline-block;
  transition: transform 0.1s ease;
}

.recap-score-animated.counting {
  animation: scoreCountPulse 0.15s ease infinite alternate;
}

@keyframes scoreCountPulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* High score glow */
.recap-stat-highlight {
  border: 2px solid #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
  animation: highScoreGlow 1.5s ease-in-out infinite alternate;
}

@keyframes highScoreGlow {
  from { box-shadow: 0 0 8px rgba(251, 191, 36, 0.3); }
  to { box-shadow: 0 0 24px rgba(251, 191, 36, 0.6); }
}

/* ================================================
   Reduced motion
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .screen-overlay,
  .screen-exiting,
  .start-screen.screen-exiting,
  .screen-overlay.gate-overlay,
  .screen-overlay.recap-transition,
  .recap-overlay .recap-section,
  .tracking-lost-hint,
  .play-again-pill,
  .recap-score-animated,
  .recap-stat-highlight {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}