/* ============================================================================
   Avogado — motion layer
   Reveal-on-scroll (JS adds `.in` via IntersectionObserver). Two levels behind
   one constant (MOTION_LEVEL in motion.js): cinematic 34px/760ms (default),
   subtle 10px/420ms. Easing everywhere: expo-out.
   ========================================================================== */

:root[data-motion="subtle"] { --reveal-dist: 10px; --reveal-dur: 420ms; }

/* Mobile always reveals at the subtle level regardless of the constant —
   big translates feel laggy on phones. */
@media (max-width: 760px) {
  :root, :root[data-motion] { --reveal-dist: 10px; --reveal-dur: 420ms; }
}

/* ---- Reveal-on-scroll ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-dist));
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Elements already in the viewport on load are never hidden (no flash):
   motion.js adds `.in` synchronously before first paint for those. */

/* ---- Stagger helper: set --i per child (~90ms within a row) -------------- */
.stagger > *:nth-child(1){--i:0}.stagger > *:nth-child(2){--i:1}
.stagger > *:nth-child(3){--i:2}.stagger > *:nth-child(4){--i:3}
.stagger > *:nth-child(5){--i:4}.stagger > *:nth-child(6){--i:5}
.stagger > *:nth-child(7){--i:6}.stagger > *:nth-child(8){--i:7}
.stagger > *:nth-child(9){--i:8}

/* ---- Hero entrance (on load; stagger 0/.08/.16/.24/.32s) ------------------ */
@keyframes avHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.enter {
  opacity: 0;
  animation: avHeroIn 760ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* ---- Mascot float: 7s, translateY ±12px, rotate −2° → 1.5° ---------------- */
@keyframes avFloat {
  0%, 100% { transform: translateY(6px) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}
.float { animation: avFloat 7s ease-in-out infinite; }

/* ---- Card entrance for demo steps (used by home demos) -------------------- */
@keyframes avCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.card-in { animation: avCardIn 500ms var(--ease-out) both; }

/* ---- Reduced motion: crossfade only, no spatial movement ------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 240ms ease; transition-delay: 0ms; }
  .enter { animation: fade 260ms ease forwards; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .float { animation: none; }
  .card-in { animation: fade 240ms ease both; }
}