/* paper-identity · motion utilities. Requires tokens.css */

@keyframes rise { from { opacity: 0; filter: blur(3px); transform: translateY(-6px); } }
@keyframes card-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes enter { from { opacity: 0; filter: blur(4px); transform: translateY(-12px); } }
@keyframes tr-swap { from { opacity: 0; filter: blur(3px); transform: translateY(4px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slip { from { opacity: 0; transform: translateY(48px) rotate(-3.5deg); } }
@keyframes pop { from { opacity: 0; scale: .97; } }
@keyframes levitate {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(.6deg); }
}

/* entrance: <h1 class="rise" style="--d:150ms"> */
.rise { animation: rise .7s var(--ease-rise) var(--d, 50ms) backwards; }
.enter { animation: enter .9s var(--ease-rise) var(--d, 0s) backwards; }
.tr-swap { display: inline-block; animation: tr-swap .42s var(--ease-rise) backwards; }

/* cards in a feed: style="--i:3" */
.card-rise { animation: card-rise .4s var(--ease-rise) calc(var(--i, 0) * 25ms) backwards; }

/* anything clickable */
.pressable {
  transition: transform .2s var(--ease-spring), background-color .15s, color .15s;
}
.pressable:active { transform: scale(.96); }
.pressable.icon:active { transform: scale(.92); }
.pressable.cta:active { transform: scale(.97); }

/* hover lift for tiles */
.liftable { transition: transform .25s var(--ease-spring), background-color .2s; }
.liftable:hover { transform: translateY(-2px); }
.liftable:active { transform: scale(.96); }

/* modal */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: rgb(var(--tint) / .28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade .25s;
}
.slip { animation: slip .9s var(--ease-slip); }
.pop { animation: pop .28s var(--ease-rise); }

.levitate {
  animation: levitate calc(5.6s + var(--i, 0) * .45s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.7s);
}

/* theme switch via View Transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
:root[data-theme-switch] *, :root[data-theme-switch] ::before, :root[data-theme-switch] ::after { transition: none !important; }