/* =====================================================================
   animations.css — scroll reveal + CSS micro-demos + reduced-motion
   ===================================================================== */

/* Scroll-reveal primitives (toggled by main.js via .in-view).
   Uses the independent `translate` property so it composes with
   `transform`-based hover/lift effects (e.g. card hovers). */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--dur-slow) var(--ease-out),
              translate var(--dur-slow) var(--ease-out);
  will-change: opacity, translate;
}
.reveal.in-view {
  opacity: 1;
  translate: none;
}
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* ---------- CSS micro-demo: MoKoPal light effect ---------- */
@keyframes moko-glow {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50%      { filter: hue-rotate(40deg) brightness(1.15); }
}
.demo-lights {
  animation: moko-glow 5s ease-in-out infinite;
}

/* ---------- CSS micro-demo: SE X-Bot blink ---------- */
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 97%      { transform: scaleY(.08); }
}
.demo-blink {
  transform-origin: center;
  animation: blink 6s ease-in-out infinite;
}

/* ---------- CSS micro-demo: 360° turn ---------- */
@keyframes turn {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}
.demo-turn { animation: turn 7s ease-in-out infinite; transform-origin: 50% 100%; }

/* ---------- Pulse for the "voice / listening" accent ---------- */
@keyframes pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
.demo-pulse { animation: pulse 2.6s ease-in-out infinite; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: none; }
}