/* click feedback across the app: a ripple from the pointer, a press that gives, pages and panels that arrive.
   prefers-reduced-motion turns all of it off through the rule in base.css */

/* the ripple: its own layer over the page, clipped to the pressed element */
.ripple-layer { position: fixed; z-index: 90; overflow: hidden; pointer-events: none; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--text-1) 22%, transparent) 0, color-mix(in oklch, var(--text-1) 10%, transparent) 45%, transparent 70%);
  animation: ripple 520ms var(--ease-out) forwards;
}
.ripple-wave.warm { background: radial-gradient(circle, color-mix(in oklch, var(--amber) 34%, transparent) 0, color-mix(in oklch, var(--amber) 14%, transparent) 45%, transparent 70%); }
@keyframes ripple { from { scale: 0; opacity: 1; } 60% { opacity: .9; } to { scale: 1; opacity: 0; } }

/* the press: small controls give a little under the pointer and spring back */
.bar-button, .choice, .select, .pf-more, .tab, .live-pill, .hm-link, .cp-tab, .cp-style, .rune-import, .field-clear, .slot-x, .pl-remove,
.counter, .tl-changed, .pt-role, .sort, .icon, .menu-option, .cp-back, .toast-back, .riot, .pf-sheet-close, .pf-sheet-back {
  transition-property: border-color, background, background-color, color, box-shadow, scale;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.bar-button:active:not(:disabled), .choice:active:not(:disabled), .select:active, .pf-more:active, .tab:active, .live-pill:active, .hm-link:active,
.cp-tab:active, .cp-style:active, .rune-import:active, .field-clear:active, .slot-x:active, .pl-remove:active, .counter:active, .tl-changed:active,
.pt-role:active, .sort:active, .icon:active, .menu-option:active, .cp-back:active, .toast-back:active, .riot:active, .pf-sheet-close:active, .pf-sheet-back:active {
  scale: .95;
  transition-duration: 60ms;
}

/* champion tiles lift on hover and sink when pressed */
.tile .tile-icon, .pl-tile, .hm-pool-champ, .ch-tile { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-base), scale var(--dur-fast) var(--ease-out); }
.tile:not(.used):hover .tile-icon { transform: translateY(-3px); box-shadow: 0 6px 14px -6px rgb(0 0 0 / .7), 0 0 0 1px var(--line-hover); }
.tile:not(.used):active .tile-icon { scale: .92; transition-duration: 60ms; }
.pl-tile:active, .hm-pool-champ:active { scale: .94; transition-duration: 60ms; }

/* big rows don't shrink: they light up while held */
.data-table tr.clickable:active, .pf-match-line:active, .pf-champ:active, .pt-mover:active, .hm-patch-row:active, .hm-game:active, .im-game:active,
.im-next-row:active, .pf-sheet-game:active, .mu-link:active, .im-zone:active {
  background: var(--bg-chip);
  transition: background 40ms;
}
.pf-champ, .pt-mover, .hm-patch-row, .hm-game, .im-game, .im-next-row, .pf-sheet-game, .mu-link { transition: background var(--dur-fast); }

/* the picked filter lands with a small pop */
.choice.landed { animation: choice-land var(--dur-slow) var(--ease-out); }
@keyframes choice-land { 0% { scale: .9; } 60% { scale: 1.04; } 100% { scale: 1; } }

/* a new tab's page rises in */
.tab-page.page-enter > * { animation: page-enter var(--dur-slow) var(--ease-out) both; }
@keyframes page-enter { from { opacity: 0; translate: 0 10px; } }

/* the nav line slides with a little overshoot */
.tab-line.placed { transition: transform var(--dur-slow) cubic-bezier(.3, 1.4, .5, 1), width var(--dur-slow) cubic-bezier(.3, 1.4, .5, 1); }

/* a game's scoreboard unfolds under its line, and the arrow turns */
.pf-expand .ui-svg { transition: rotate var(--dur-base) var(--ease-out); }
.pf-match.open .pf-expand .ui-svg { rotate: 180deg; }
.pf-match.opening .pf-expand .ui-svg { animation: arrow-turn var(--dur-base) var(--ease-out); }
@keyframes arrow-turn { from { rotate: 0deg; } }
.pf-match.opening .pf-board { animation: board-open var(--dur-slow) var(--ease-out) both; transform-origin: top; }
.pf-match.opening .pf-board-row { animation: rise var(--dur-slow) var(--ease-out) both; }
.pf-match.opening .pf-board-row:nth-child(n+4) { animation-delay: 60ms; }
.pf-match.opening .pf-board-row:nth-child(n+6) { animation-delay: 110ms; }
@keyframes board-open { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* champions shown with Show all arrive one after another */
.pf-champ.revealed { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 20ms); }

/* details open and close with height instead of jumping */
:root { interpolate-size: allow-keywords; }
details.im-all::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
details.im-all[open]::details-content { block-size: auto; }

/* Update spins while the profile reloads */
.pf-update:disabled .ui-svg { animation: spin .9s linear infinite; }
.pf-update:not(:disabled):hover .ui-svg { rotate: 90deg; }
.pf-update .ui-svg { transition: rotate var(--dur-slow) var(--ease-out); }
@keyframes spin { to { rotate: 1turn; } }

/* stat numbers glow briefly when they arrive */
.pf-enter .stat-value, .page-enter .stat-value { animation: stat-in var(--dur-count) var(--ease-out) both; animation-delay: 80ms; }
@keyframes stat-in { from { opacity: 0; translate: 0 4px; filter: blur(3px); } }

/* links and names answer the hover with a short underline sweep */
.pf-link, .hm-link, .mu-link { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast); }
.pf-link:hover, .hm-link:hover { background-size: 100% 1px; }