/* Shared motion layer for deadlock.events and the draft tool.
   Warm fills that bloom from the cursor, springy lifts, a real press, things that arrive instead of appearing. */
:root {
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.3, 1.3, .5, 1);
  --warm: rgba(224, 179, 90, .24);
  --warm-strong: rgba(255, 236, 196, .38);
}

/* ---------- page to page ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.992); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(.992); } }
.brand { view-transition-name: brand; }
.page-bg { view-transition-name: backdrop; }
::view-transition-group(brand), ::view-transition-group(backdrop) { animation-duration: .5s; animation-timing-function: var(--ease-out); }

/* the city breathes and leans a little toward the cursor */
.page-bg { inset: -24px; transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) scale(1.03); transition: transform 1.4s var(--ease-out); animation: drift 38s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift { from { background-position: 48% 50%; } to { background-position: 54% 46%; } }

/* ---------- arriving ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes stamp { 0% { transform: scale(1.7) rotate(-8deg); opacity: 0; } 55% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes tick { 0% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

.rise, .kicker, .hero h1, .section, .footer,
.pagehead, .landing > .panel, .view-enter > * { animation: rise .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.kicker { --i: 0; } .hero h1 { --i: 1; } .section:nth-of-type(2) { --i: 3; } .section:nth-of-type(3) { --i: 5; } .footer { --i: 7; }
.landing > .panel:nth-child(1) { --i: 1; } .landing > .panel:nth-child(2) { --i: 2; }
.view-enter > *:nth-child(1) { --i: 0; } .view-enter > *:nth-child(2) { --i: 1; } .view-enter > *:nth-child(3) { --i: 2; } .view-enter > *:nth-child(4) { --i: 3; }
.events > * { animation: rise .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms + 220ms); }
.events > *:nth-child(2) { --i: 1; } .events > *:nth-child(3) { --i: 2; } .events > *:nth-child(4) { --i: 3; } .events > *:nth-child(5) { --i: 4; }
.events.settled > * { animation: none; }
.view-enter .htile { animation: pop .5s var(--spring-soft) backwards; animation-delay: calc(var(--n, 0) * 12ms + 150ms); }

/* ---------- buttons: bloom, lift, squish, ripple ---------- */
.btn, .slot, .cell, .kick, .shadow button { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--spring), background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .45s var(--ease-out), color .25s var(--ease-out); }
.btn::before, button.slot::before, .cell::before { content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 8px; height: 8px; border-radius: 50%; background: var(--warm); transform: translate(-50%, -50%) scale(0); transition: transform .65s var(--ease-out); z-index: -1; pointer-events: none; }
.btn:hover::before, button.slot:hover::before, .cell:hover::before { transform: translate(-50%, -50%) scale(var(--bloom, 60)); }
.btn-primary::before, .action .btn::before, .btn-discord::before, .btn-youtube::before { background: var(--warm-strong); }
.btn:hover { transform: translateY(-3px) scale(1.035); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7); }
.btn:active, button.slot:active, .cell:active, .kick:active, .shadow button:active { transform: translateY(0) scale(.94); transition-duration: .09s; box-shadow: none; }
.btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }
.btn:disabled::before { display: none; }
.btn svg { transition: transform .5s var(--spring); }
.btn:hover svg { transform: scale(1.18) rotate(-6deg); }
.btn-wide { --bloom: 120; } .action .btn { --bloom: 70; } button.slot { --bloom: 90; }
.ripple { position: absolute; left: var(--rx); top: var(--ry); width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 244, 220, .35); transform: translate(-50%, -50%) scale(0); animation: ripple .6s var(--ease-out) forwards; pointer-events: none; z-index: -1; }

/* inputs wake up */
input[type=text], input[type=number], input[type=password] { transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .4s var(--spring); }
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus { transform: scale(1.012); }

/* ---------- cards and rows ---------- */
.event-card, .panel, .team, .board, .grid { transition: transform .55s var(--spring-soft), border-color .4s var(--ease-out), background-color .4s var(--ease-out), box-shadow .5s var(--ease-out); }
.event-card:hover { transform: translateY(-4px) scale(1.008); border-color: rgba(224, 179, 90, .45); background-color: rgba(18, 23, 26, .82); box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .9); }
.event-card .event-name, .scrim-state { transition: transform .5s var(--spring-soft), color .3s var(--ease-out); }
.event-card:hover .event-name { transform: translateX(6px); }
.event-card:hover .scrim-state { transform: scale(1.06); }
.scrim-state.is-live::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: .55rem; vertical-align: middle; animation: breathe 1.6s ease-in-out infinite; }
.footer-links a, .footer a { display: inline-block; transition: transform .45s var(--spring), color .25s; }
.footer a:hover { transform: translateY(-3px); color: #e0b35a; }
.lobby-row { transition: transform .45s var(--spring-soft); }
.lobby-row:hover { transform: translateX(6px); }

/* lobby seats */
button.slot:hover { transform: translateY(-2px) scale(1.015); }
button.slot .avatar { transition: transform .5s var(--spring), background-color .3s; }
button.slot:hover .avatar { transform: rotate(90deg) scale(1.15); background-color: rgba(224, 179, 90, .35); }
.slot.pop { animation: pop .55s var(--spring-soft) backwards; }
.kick:hover { transform: rotate(90deg) scale(1.12); }
.tag { transition: transform .4s var(--spring); display: inline-block; }
.tag:hover { transform: scale(1.06); }

/* ---------- the draft ---------- */
.htile { transition: transform .45s var(--spring), border-color .25s var(--ease-out), box-shadow .4s var(--ease-out); }
.htile > img { transition: transform .7s var(--ease-out), filter .5s var(--ease-out); }
.htile > span { transition: transform .4s var(--spring-soft), background-color .3s; }
.htile:not(.gone):hover { transform: translateY(-4px) scale(1.07); z-index: 3; box-shadow: 0 14px 22px -12px rgba(0, 0, 0, .9); }
.htile:not(.gone):hover > img { transform: scale(1.12); }
.htile:not(.gone):hover > span { transform: translateY(-2px); background-color: rgba(0, 0, 0, .85); }
.htile:not(.gone):active { transform: scale(.93); transition-duration: .09s; }
.htile.sel { transform: translateY(-4px) scale(1.07); z-index: 2; }
.htile.sel > img { transform: scale(1.12); }
.htile.just-gone .badge { animation: pop .6s var(--spring) backwards; animation-delay: .15s; }
.htile.just-gone > img { animation: dim .9s var(--ease-out) backwards; }
.htile.just-gone { animation: settle .6s var(--spring-soft) backwards; }
@keyframes dim { from { filter: none; transform: scale(1.12); } }
@keyframes settle { from { transform: translateY(-4px) scale(1.07); } }
.pcard { transition: transform .5s var(--spring-soft), outline-color .3s; }
.pcard.pop img, .pcard.pop span { animation: pop .6s var(--spring) backwards; }
.pcard.pop span { animation-delay: .12s; }
.pcard.next { animation: breathe 1.8s ease-in-out infinite; }
.ban.pop { animation: stamp .55s var(--spring-soft) backwards; }
.chip { transition: transform .45s var(--spring), background-color .35s, border-color .35s, color .35s; }
.chip.now { transform: translateY(-2px) scale(1.12); }
.clock { transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out), transform .5s var(--spring-soft); }
.clock.on { transform: scale(1.04); }
.clock b.beat { animation: tick .35s var(--ease-out); }
.action .btn:not(:disabled) { animation: breathe 1.4s ease-in-out infinite; }
.action .btn:not(:disabled):hover { animation: none; }
.view-enter .rpicks .pcard { animation: pop .6s var(--spring-soft) backwards; animation-delay: calc(var(--n, 0) * 80ms + 250ms); }
.rpicks .pcard:hover { transform: translateY(-6px) scale(1.06); }
.view-enter .rbans .ban { animation: stamp .5s var(--spring-soft) backwards; animation-delay: calc(var(--n, 0) * 90ms + 800ms); }
.view-enter .fhead .fn { animation: rise .8s var(--ease-out) backwards; }
.view-enter .fhead img { animation: pop .7s var(--spring) backwards; animation-delay: .2s; }

/* overlays */
.scrim { animation: fade .25s var(--ease-out) backwards; }
.modal { animation: pop .45s var(--spring-soft) backwards; transform-origin: 50% 30%; }
.toast:not([hidden]) { animation: toast-in .5s var(--spring) backwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
.seg .btn.on { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .page-bg { animation: none; transform: none; }
}