/* =============================================================================
   EngineerOS · Motion
   Focused-view transitions, staggered entrances, celebration, and a strict
   reduced-motion contract.
   ========================================================================== */

@keyframes viewIn   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes viewInUp { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pop      { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fall     { 0% { opacity: 1; transform: translateY(-12px) rotate(0); } 100% { opacity: 0; transform: translateY(72vh) rotate(560deg); } }
@keyframes floatIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* The focused view animates in each time it becomes active. */
.view.is-active.is-entering { animation: viewIn var(--dur-3) var(--ease-emphasized); }

/* Staggered children — progressive reveal within a view. */
.stagger > * { opacity: 0; animation: floatIn var(--dur-3) var(--ease-emphasized) forwards; }
.stagger > *:nth-child(1){ animation-delay: 20ms; }
.stagger > *:nth-child(2){ animation-delay: 70ms; }
.stagger > *:nth-child(3){ animation-delay: 120ms; }
.stagger > *:nth-child(4){ animation-delay: 170ms; }
.stagger > *:nth-child(5){ animation-delay: 220ms; }
.stagger > *:nth-child(6){ animation-delay: 270ms; }
.stagger > *:nth-child(7){ animation-delay: 320ms; }
.stagger > *:nth-child(8){ animation-delay: 370ms; }
.stagger > *:nth-child(n+9){ animation-delay: 410ms; }

/* Reveal-on-demand (progressive disclosure inside a mission). */
.reveal { animation: viewInUp var(--dur-3) var(--ease-emphasized); }

/* =============================================================================
   Reduced motion — disable all movement, keep opacity only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tap:hover, .list-row.tap:hover, .res-item:hover, .btn:hover { transform: none !important; }
  .stagger > * { opacity: 1; }
}