/* Shared motion + native-feel layer, linked from the <head> of every page.
   Loaded as a stylesheet (not injected by script) so the page-transition
   opt-in below is present before the first paint of the incoming page. */

/* ---- native feel ---- */
html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, a, [role="button"] { -webkit-touch-callout: none; touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }

/* ---- page-to-page transitions (hub <-> games <-> account) ----
   Cross-document view transitions: supported in current iOS/Android
   webviews, simply ignored (instant navigation) where they aren't. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wl-vt-out .14s ease-in both; }
::view-transition-new(root) { animation: wl-vt-in .26s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wl-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes wl-vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- screen-to-screen inside a page ---- */
@keyframes wl-screen-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.screen.active, #screen-login, #screen-games { animation: wl-screen-in .26s cubic-bezier(.2, .7, .2, 1) both; }

/* ---- modals ---- */
@keyframes wl-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-modal-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
#rules-modal, #delete-modal.show, #welcome-modal.show, #reviewer-modal { animation: wl-modal-in .18s ease-out both; }
#rules-modal > div, #delete-modal.show .modal-card, #welcome-modal.show .welcome-card { animation: wl-modal-card-in .26s cubic-bezier(.2, .7, .2, 1) both; }

/* ---- press feedback ---- */
button, a[class*="btn"] { transition: transform .06s ease-out; }
button:not(:disabled):active, a[class*="btn"]:active { transform: translateY(2px); }

/* ---- reactions (used via WLMotion.shake / WLMotion.pop) ---- */
@keyframes wl-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 36% { transform: translateX(6px); } 54% { transform: translateX(-4px); } 72% { transform: translateX(3px); } }
@keyframes wl-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
.wl-shake { animation: wl-shake .45s ease-out; }
.wl-pop { animation: wl-pop .4s cubic-bezier(.2, .8, .3, 1.3); }

/* ---- result cards (Closest To): drop in one by one, winner's medal pops, bust card shakes ---- */
@keyframes wl-card-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wl-card-in-dim { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: .7; transform: none; } }
@keyframes wl-medal-pop { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.35) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.result-card { animation: wl-card-in .38s cubic-bezier(.2, .8, .3, 1) both; }
.result-card:nth-child(2) { animation-delay: .12s; }
.result-card:nth-child(3) { animation-delay: .24s; }
.result-card:nth-child(4) { animation-delay: .36s; }
.result-card.winner .result-pos { display: inline-block; animation: wl-medal-pop .6s cubic-bezier(.2, .8, .3, 1.2) .35s both; }
.result-card.busted-card { animation: wl-card-in-dim .38s cubic-bezier(.2, .8, .3, 1) both, wl-shake .45s ease-out .45s; }

/* ---- loading skeletons ---- */
@keyframes wl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.wl-skel { height: 46px; margin-bottom: 8px; border: var(--bw-sm, 2px) solid var(--border); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-muted, rgba(128,128,128,.12)) 50%, var(--surface) 75%); background-size: 200% 100%; animation: wl-shimmer 1.4s linear infinite; }

/* ---- confetti canvas ---- */
.wl-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99999; }

/* ---- respect the system "reduce motion" setting ---- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .screen.active, #screen-login, #screen-games, #rules-modal, #rules-modal > div,
  #delete-modal.show, #delete-modal.show .modal-card, #welcome-modal.show, #welcome-modal.show .welcome-card,
  #reviewer-modal, .wl-shake, .wl-pop, .result-card, .result-card.winner .result-pos, .result-card.busted-card { animation: none; }
  button:not(:disabled):active, a[class*="btn"]:active { transform: none; }
}