:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
#tabs { position: fixed; z-index: 10; }
button, a { touch-action: manipulation; }
button { transition: transform 160ms var(--motion-ease); }
button:active { transform: scale(.96); }
.profile-card { touch-action: pan-y; user-select: none; transition: transform 300ms cubic-bezier(.22, 1.2, .36, 1); }
.profile-card img { pointer-events: none; }
.profile-card.dragging { will-change: transform; }
.card-stage, .profile-card { height: clamp(260px, calc(100svh - 360px), 560px); min-height: 0; }
.next-card { height: 100%; }
.swipe-stamp.like { color: var(--pink); }
.swipe-stamp.pass { color: #c797ff; }
.next-card { position: absolute; inset: 0; transform: scale(.96) translateY(12px); z-index: 1; pointer-events: none; }
.next-card .card-copy { visibility: hidden; }
.card-stage.has-next:before, .card-stage.has-next:after { display: none; }
.card-stage.advancing .next-card { transform: scale(1); }
.actions .round.like { box-shadow: 0 0 18px #ff0ca860; }
.action-heart { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; pointer-events: none; color: #ff2daa; }
.action-heart svg { width: 90px; height: 90px; fill: currentColor; }
.match-row { animation: row-in 280ms var(--motion-ease) both; }
.match-row:nth-child(2) { animation-delay: 40ms; }
.match-row:nth-child(3) { animation-delay: 80ms; }
.match-row:nth-child(n+4) { animation-delay: 120ms; }
.profile-photo { animation: photo-in 350ms var(--motion-ease) both; }
.settings-group { animation: row-in 300ms var(--motion-ease) both; }
.settings-group:nth-of-type(2) { animation-delay: 50ms; }
.settings-group:nth-of-type(3) { animation-delay: 100ms; }
.switch span:after { transition: transform 180ms var(--motion-ease); }
.switch:focus-within { outline: 2px solid #ff7bc9; outline-offset: 3px; border-radius: 20px; }
.match-overlay { background: #050307fa; overflow-y: auto; }
.match-overlay.show { animation: row-in 200ms var(--motion-ease); }
.match-overlay.show .match-box { animation: none; }
.match-overlay.show .match-faces .avatar:first-child { animation: face-left 400ms var(--motion-ease) both; }
.match-overlay.show .match-faces .avatar:last-child { animation: face-right 400ms var(--motion-ease) both; }
.match-overlay.show .match-heart { animation: heart-in 400ms 350ms var(--motion-ease) both; }
.match-overlay.show h1, .match-overlay.show .match-title { animation: row-in 280ms 550ms var(--motion-ease) both; }
.match-overlay.show p { animation: row-in 280ms 650ms var(--motion-ease) both; }
.match-overlay.show .primary { animation: row-in 280ms 750ms var(--motion-ease) both; }
@media (min-width: 720px) {
  .card-stage, .profile-card { height: min(600px, calc(100svh - 360px)); }
  .next-card { left: 50%; right: auto; width: min(100%, 460px); margin-left: calc(min(100%, 460px) / -2); }
}
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes face-left { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: none; } }
@keyframes face-right { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: none; } }
@keyframes heart-in { 0% { opacity: 0; transform: scale(0); } 65% { opacity: 1; transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}