/* ============================================================
   HANDVANCE — Animations
   ============================================================ */

/* ── Screen entrance ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Entrance helpers */
.e1 { animation: fade-up var(--dur-in) var(--ease-out) 0ms   both; }
.e2 { animation: fade-up var(--dur-in) var(--ease-out) 60ms  both; }
.e3 { animation: fade-up var(--dur-in) var(--ease-out) 120ms both; }
.e4 { animation: fade-up var(--dur-in) var(--ease-out) 180ms both; }
.e5 { animation: fade-up var(--dur-in) var(--ease-out) 240ms both; }
.e6 { animation: fade-up var(--dur-in) var(--ease-out) 300ms both; }

.s1 { animation: stagger-in var(--dur-base) var(--ease-out) 60ms  both; }
.s2 { animation: stagger-in var(--dur-base) var(--ease-out) 100ms both; }
.s3 { animation: stagger-in var(--dur-base) var(--ease-out) 140ms both; }
.s4 { animation: stagger-in var(--dur-base) var(--ease-out) 180ms both; }
.s5 { animation: stagger-in var(--dur-base) var(--ease-out) 220ms both; }
.s6 { animation: stagger-in var(--dur-base) var(--ease-out) 260ms both; }
.s7 { animation: stagger-in var(--dur-base) var(--ease-out) 300ms both; }
.s8 { animation: stagger-in var(--dur-base) var(--ease-out) 340ms both; }

.anim-fade-in     { animation: fade-in   var(--dur-slow) var(--ease-out)    both; }
.anim-slide-up    { animation: slide-up  var(--dur-slow) var(--ease-out)    both; }
.anim-slide-left  { animation: slide-in-left var(--dur-slow) var(--ease-out) both; }
.anim-scale-in    { animation: scale-in  var(--dur-slow) var(--ease-out)    both; }

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: var(--r-sm);
}
.skel-line {
  height: 12px;
  margin-bottom: 8px;
}
.skel-line:last-child { width: 65%; margin-bottom: 0; }

/* ── Ripple ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(59,130,246,0.25);
  transform: scale(0);
  animation: ripple-anim 600ms var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Live pulse (scoreboard blue line) ── */
@keyframes pulse-blue {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
.pulse-blue { animation: pulse-blue 2s ease-in-out infinite; }

/* ── Overlay entrance ── */
.overlay-enter      { animation: slide-up var(--dur-slow) var(--ease-out) both; }
.overlay-side-enter { animation: slide-in-left var(--dur-slow) var(--ease-out) both; }
.overlay-side-leave { animation: slide-out-left 280ms var(--ease-out) forwards; }
.drawer-enter       { animation: slide-in-left var(--dur-slow) var(--ease-out) both; }
.sheet-enter        { animation: slide-up var(--dur-slow) var(--ease-out) both; }
.backdrop-enter     { animation: fade-in var(--dur-base) var(--ease-out) both; }

/* ── Score pop (when goal scored) ── */
@keyframes score-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.score-pop { animation: score-pop 400ms var(--ease-spring); }

/* ── Action added flash ── */
@keyframes action-flash {
  0%   { background: rgba(59,130,246,0.2); }
  100% { background: rgba(59,130,246,0.06); }
}
.action-flash { animation: action-flash 600ms var(--ease-out) both; }

/* ── Wizard click-pulse (additive ack on choice/chip/picker) ── */
@keyframes aw-pulse-anim {
  0%   { transform: scale(0.97); }
  55%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.aw-pulse { animation: aw-pulse-anim 220ms var(--ease-out) both; }

/* ── Wizard step fade (only on real step changes) ── */
@keyframes aw-step-fade-anim {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aw-step-fade { animation: aw-step-fade-anim 280ms var(--ease-out) both; }