/* ═══════════════════════════════════════════════
   VIEW TRANSITIONS — Orbit
   Vertical Y-based · exit fast, enter slow
   ═══════════════════════════════════════════════ */

/* ── Exit: faster (250ms) ── */
#app.view-exit-left {
  animation: exitUp 250ms var(--ease-in) forwards;
}

#app.view-exit-right {
  animation: exitDown 250ms var(--ease-in) forwards;
}

/* ── Enter: slower (400ms) ── */
#app.view-enter-left {
  animation: enterFromDown 400ms var(--ease-out) forwards;
}

#app.view-enter-right {
  animation: enterFromUp 400ms var(--ease-out) forwards;
}

/* ── Exit keyframes ── */
@keyframes exitUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-40px) scale(0.98);
  }
}

@keyframes exitDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
}

/* ── Enter keyframes ── */
@keyframes enterFromDown {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes enterFromUp {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Overlay animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Sheet slide ── */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* ── Scale in ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Gentle float ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Ring draw (progress rings) ── */
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-circumference, 283); }
  to   { stroke-dashoffset: var(--ring-offset, 0); }
}

/* ── Check draw ── */
@keyframes checkDraw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}