/* After All v2 — motion: easings, durations, keyframes, page transitions, reduced motion. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.3, 1.2, 0.5, 1);
  --dur-fast: 160ms; --dur: 260ms; --dur-slow: 420ms; --dur-page: 380ms;
}

/* ---------- keyframes ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slide-in-left { from { transform: translateX(-30%); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
@keyframes slide-out-left { from { transform: translateX(0); } to { transform: translateX(-30%); filter: brightness(.86); } }
@keyframes slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes modal-under { from { transform: scale(1); border-radius: 0; } to { transform: scale(0.94) translateY(8px); filter: brightness(.7); } }
@keyframes modal-under-back { from { transform: scale(0.94) translateY(8px); filter: brightness(.7); } to { transform: scale(1); filter: brightness(1); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.04); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 36, 106, 0.0), 0 10px 26px rgba(224, 36, 106, 0.28); } 50% { box-shadow: 0 0 0 8px rgba(224, 36, 106, 0.12), 0 12px 32px rgba(224, 36, 106, 0.42); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(224, 36, 106, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(224, 36, 106, 0); } }
@keyframes pulse-ring-out { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fomo-dot { 0% { box-shadow: 0 0 0 0 rgba(224, 36, 106, 0.55); } 100% { box-shadow: 0 0 0 8px rgba(224, 36, 106, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes banner-in { from { opacity: 0; transform: translateY(-40px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes banner-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
@keyframes confetti-fall { 0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } 100% { opacity: 0.9; transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 720deg)); } }
@keyframes pin-drop { 0% { opacity: 0; transform: translate(-50%, -260%) scale(0.6); } 60% { opacity: 1; transform: translate(-50%, -96%) scale(1.05); } 80% { transform: translate(-50%, -104%) scale(0.98); } 100% { transform: translate(-50%, -100%) scale(1); } }
@keyframes map-ripple { 0% { transform: scale(0.6); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
@keyframes mesh-move { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes count-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } }
@keyframes reveal-blur { from { filter: blur(14px); opacity: 0; transform: scale(1.04); } to { filter: blur(0); opacity: 1; transform: scale(1); } }
@keyframes draw-line { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(30deg); } }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- entrance helpers ---------- */
.anim-fade-up { animation: fade-up .5s var(--ease-out) both; }
.anim-fade-in { animation: fade-in .4s var(--ease-out) both; }
.anim-pop { animation: pop .45s var(--ease-spring) both; }
.anim-zoom { animation: zoom-in .4s var(--ease-out-expo) both; }
.anim-reveal { animation: reveal-blur .9s var(--ease-out) both; }
.anim-wiggle { animation: wiggle .6s ease-in-out; }
.anim-heartbeat { animation: heartbeat .9s ease-in-out; }
.anim-shake { animation: shake .4s ease; }
.stagger > * { animation: fade-up .55s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .03s; } .stagger > *:nth-child(2) { animation-delay: .08s; } .stagger > *:nth-child(3) { animation-delay: .13s; }
.stagger > *:nth-child(4) { animation-delay: .18s; } .stagger > *:nth-child(5) { animation-delay: .23s; } .stagger > *:nth-child(6) { animation-delay: .28s; }
.stagger > *:nth-child(7) { animation-delay: .33s; } .stagger > *:nth-child(8) { animation-delay: .38s; } .stagger > *:nth-child(n+9) { animation-delay: .42s; }
.delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .16s; } .delay-3 { animation-delay: .24s; } .delay-4 { animation-delay: .32s; } .delay-5 { animation-delay: .4s; } .delay-6 { animation-delay: .5s; }
.typing { display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: typing-dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.sparkle { animation: sparkle 2.4s ease-in-out infinite; transform-origin: center; }
.sparkle.d1 { animation-delay: .6s; } .sparkle.d2 { animation-delay: 1.3s; }
.marquee { overflow: hidden; white-space: nowrap; } .marquee > * { display: inline-flex; animation: marquee 22s linear infinite; }

/* ---------- page transitions (CSS keyframe engine) ----------
   The router adds `.screen.enter[data-tx=..][data-dir=..]` to the incoming screen
   and `.screen.leave[data-tx=..][data-dir=..]` to the outgoing one, then removes the outgoing one on animationend. */
.screen.enter, .screen.leave { pointer-events: none; }
.screen.enter[data-tx="slide"][data-dir="forward"] { animation: slide-in-right var(--dur-page) var(--ease-out-expo) both; z-index: 2; box-shadow: -12px 0 30px rgba(30, 20, 51, 0.12); }
.screen.leave[data-tx="slide"][data-dir="forward"] { animation: slide-out-left var(--dur-page) var(--ease-out-expo) both; z-index: 1; }
.screen.enter[data-tx="slide"][data-dir="back"] { animation: slide-in-left var(--dur-page) var(--ease-out-expo) both; z-index: 1; }
.screen.leave[data-tx="slide"][data-dir="back"] { animation: slide-out-right var(--dur-page) var(--ease-out-expo) both; z-index: 2; box-shadow: -12px 0 30px rgba(30, 20, 51, 0.12); }
.screen.enter[data-tx="fade"] { animation: fade-in var(--dur) var(--ease-out) both; z-index: 2; }
.screen.leave[data-tx="fade"] { animation: fade-out var(--dur) var(--ease-out) both; z-index: 1; }
.screen.enter[data-tx="sheet"][data-dir="forward"] { animation: sheet-up 480ms var(--ease-out-expo) both; z-index: 2; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(30, 20, 51, 0.25); }
.screen.leave[data-tx="sheet"][data-dir="forward"] { animation: modal-under 480ms var(--ease-out-expo) both; z-index: 1; border-radius: 24px; }
.screen.enter[data-tx="sheet"][data-dir="back"] { animation: modal-under-back 420ms var(--ease-out-expo) both; z-index: 1; border-radius: 24px; }
.screen.leave[data-tx="sheet"][data-dir="back"] { animation: sheet-down 380ms var(--ease-in) both; z-index: 2; border-radius: 24px 24px 0 0; }
.screen.enter[data-tx="zoom"][data-dir="forward"] { animation: zoom-in 420ms var(--ease-out-expo) both; z-index: 2; }
.screen.leave[data-tx="zoom"][data-dir="forward"] { animation: fade-out 300ms var(--ease-out) both; z-index: 1; }
.screen.enter[data-tx="zoom"][data-dir="back"] { animation: fade-in 300ms var(--ease-out) both; z-index: 1; }
.screen.leave[data-tx="zoom"][data-dir="back"] { animation: zoom-out 320ms var(--ease-in) both; z-index: 2; }
.screen.enter[data-tx="none"], .screen.leave[data-tx="none"] { animation: none; }

/* ---------- View Transitions engine (used for fade / zoom / tab switches when supported) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(app-member), ::view-transition-group(app-staff) { animation-duration: 300ms; }
html[data-vt="fade"] ::view-transition-old(app-member), html[data-vt="fade"] ::view-transition-old(app-staff) { animation: fade-out 220ms var(--ease-out) both; }
html[data-vt="fade"] ::view-transition-new(app-member), html[data-vt="fade"] ::view-transition-new(app-staff) { animation: fade-in 260ms var(--ease-out) both; }
html[data-vt="zoom"] ::view-transition-old(app-member), html[data-vt="zoom"] ::view-transition-old(app-staff) { animation: fade-out 240ms var(--ease-out) both; }
html[data-vt="zoom"] ::view-transition-new(app-member), html[data-vt="zoom"] ::view-transition-new(app-staff) { animation: zoom-in 380ms var(--ease-out-expo) both; }
html[data-vt="zoom-back"] ::view-transition-old(app-member), html[data-vt="zoom-back"] ::view-transition-old(app-staff) { animation: zoom-out 300ms var(--ease-in) both; }
html[data-vt="zoom-back"] ::view-transition-new(app-member), html[data-vt="zoom-back"] ::view-transition-new(app-staff) { animation: fade-in 300ms var(--ease-out) both; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .screen.enter, .screen.leave { animation: none !important; }
  .confetti-piece, .sparkle, .floaty, .marquee > * { display: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }