/* Motion layer for every Padel X app: page transitions, entrances, loaders and
   small moments of delight. Loaded by site-auth.js (portal pages), the sign-in
   screens and the Marketing app. See README → Motion. */
:root {
  --pxm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pxm-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pxm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pxm-lime: #dfff4f;
  --pxm-ink: #1c1c1c;
}

/* ── Page transitions (View Transitions API: Chrome, Edge, Safari 18.2+) ── */
@view-transition { navigation: auto; }
.topbar { view-transition-name: pxm-topbar; }
::view-transition-old(root) { animation: 0.2s var(--pxm-ease-in) both pxm-page-out; }
::view-transition-new(root) { animation: 0.42s var(--pxm-ease-out) 0.05s both pxm-page-in; }
::view-transition-group(pxm-topbar) { animation-duration: 0.35s; animation-timing-function: var(--pxm-ease-out); }
@keyframes pxm-page-out { to { opacity: 0; transform: translateY(-6px) scale(0.995); } }
@keyframes pxm-page-in { from { opacity: 0; transform: translateY(10px); } }

/* Elements waiting to scroll into view before they animate in. */
.pxm-pending { opacity: 0; }

/* ── Navigation progress bar ── */
.pxm-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2147483000;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--pxm-lime), #b9e62c);
  box-shadow: 0 0 10px rgba(223, 255, 79, 0.7);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
  view-transition-name: pxm-progress;
}

/* ── Loader: a padel ball rallying over the net ── */
.pxm-loader {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 56px 20px;
  color: inherit;
  font-family: var(--display, "League Spartan", Arial, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: pxm-fade-in 0.4s var(--pxm-ease-out) 0.15s both;
}
.pxm-loader p { margin: 0; opacity: 0.6; }
.pxm-court {
  position: relative;
  width: 132px;
  height: 64px;
}
.pxm-court::before {
  content: "";
  position: absolute;
  inset: auto 0 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.18;
}
.pxm-net {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 2px;
  height: 22px;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}
.pxm-rally {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 16px;
  height: 58px;
  animation: pxm-rally 1.1s linear infinite alternate;
}
.pxm-ball {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pxm-lime);
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
  animation: pxm-bounce 1.1s infinite;
}
.pxm-ball::after {
  content: "";
  position: absolute;
  inset: 3px -4px 3px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
}
.pxm-shadow {
  position: absolute;
  left: 1px;
  bottom: -3px;
  width: 14px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: pxm-shadow 1.1s infinite;
}
@keyframes pxm-rally { to { transform: translateX(116px); } }
@keyframes pxm-bounce {
  0% { transform: translateY(0) rotate(0deg) scale(1.12, 0.86); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  50% { transform: translateY(-40px) rotate(180deg) scale(1, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  100% { transform: translateY(0) rotate(360deg) scale(1.12, 0.86); }
}
@keyframes pxm-shadow {
  0%, 100% { transform: scale(1); opacity: 0.22; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  50% { transform: scale(0.45); opacity: 0.08; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
}
@keyframes pxm-fade-in { from { opacity: 0; } }

/* ── Dialogs, popovers and toasts open with a little lift ── */
dialog[open] { animation: pxm-pop 0.32s var(--pxm-ease-out); }
dialog[open]::backdrop { animation: pxm-fade-in 0.25s ease-out; }
@keyframes pxm-pop { from { opacity: 0; translate: 0 12px; scale: 0.97; } }
.toast:not([hidden]) { animation: pxm-toast 0.4s var(--pxm-spring); }
@keyframes pxm-toast { from { opacity: 0; translate: 0 16px; scale: 0.96; } }

/* ── Buttons and cards respond to touch ── */
.btn, .bar-btn, .sbtn, .tab-btn, .tabbtn, .seg button, .board-tab, .add-card-btn, .side-link {
  transition-property: background, border-color, color, box-shadow, transform, scale, opacity;
  transition-duration: 0.15s;
}
.btn:active:not(:disabled), .bar-btn:active, .sbtn:active, .seg button:active, .board-tab:active, .tab-btn:active, .tabbtn:active {
  scale: 0.96;
}

/* Home: tiles catch a soft lime spotlight that follows the pointer. */
html[data-motion="home"] .page::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(223, 255, 79, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
html[data-motion="home"] .page.admin::before {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(223, 255, 79, 0.16), transparent 60%);
}
html[data-motion="home"] .page:hover::before { opacity: 1; }
html[data-motion="home"] .page > * { position: relative; }
html[data-motion="home"] .court .net { animation: pxm-net 3.2s ease-in-out infinite; }
@keyframes pxm-net { 50% { opacity: 0.95; } }

/* Marketing plans: cards lift as you hover them. */
.list .card:not(.ghost):not(.placeholder) { transition: translate 0.18s var(--pxm-ease-out), box-shadow 0.18s var(--pxm-ease-out); }
.list .card:not(.ghost):not(.placeholder):hover { translate: 0 -2px; }

/* ── Confetti for finishing things ── */
.pxm-confetti {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
}
.pxm-confetti i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
}

@media print {
  .pxm-pending { opacity: 1 !important; }
  .pxm-progress, .pxm-confetti { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  dialog[open], dialog[open]::backdrop, .toast:not([hidden]), .pxm-loader { animation: none; }
  .pxm-rally, .pxm-ball, .pxm-shadow, html[data-motion="home"] .court .net { animation: none; }
  .pxm-rally { transform: translateX(58px); }
  .pxm-ball { transform: translateY(-24px); }
  .btn:active:not(:disabled), .bar-btn:active, .sbtn:active, .seg button:active, .board-tab:active, .tab-btn:active, .tabbtn:active,
  .list .card:not(.ghost):not(.placeholder):hover { scale: none; translate: none; }
}