/* Suite-wide micro-motion utilities. GPU-only (transform/opacity), honors prefers-reduced-motion.
   Pair with static/_shared/motion.js which toggles .is-in on [data-reveal]. */

:root {
  --mo-ease: cubic-bezier(.22, .7, .2, 1);
  --mo-dur: .55s;
}

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-18px); }
[data-reveal="right"] { transform: translateX(18px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Hover / press affordances ---- */
.mo-lift { transition: transform .28s var(--mo-ease), box-shadow .28s var(--mo-ease); }
.mo-lift:hover { transform: translateY(-4px); }
.mo-press { transition: transform .12s var(--mo-ease); }
.mo-press:active { transform: translateY(1px) scale(.985); }

/* Arrow nudge inside links/buttons: <span class="mo-arrow">→</span> */
.mo-arrow { display: inline-block; transition: transform .22s var(--mo-ease); }
a:hover .mo-arrow, button:hover .mo-arrow { transform: translateX(4px); }

/* ---- Ambient keyframes ---- */
@keyframes mo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mo-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes mo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes mo-dash { to { stroke-dashoffset: 0; } }
@keyframes mo-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.mo-float { animation: mo-float 12s var(--mo-ease) infinite; }
.mo-pulse { animation: mo-pulse-soft 2.6s ease-in-out infinite; }
.mo-breathe { animation: mo-breathe 6s ease-in-out infinite; transform-origin: center; }

/* Skeleton shimmer for async panels */
.mo-skeleton {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: mo-shimmer 1.4s linear infinite;
}

/* SVG line-draw: set pathLength="1" on the path, add .mo-draw */
.mo-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mo-dash 1.2s var(--mo-ease) forwards; }

/* Count-up numbers get a subtle settle */
[data-count].is-in { transition: opacity .3s var(--mo-ease); }

/* ---- Reduced motion: everything static, instantly visible ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-float, .mo-pulse, .mo-breathe, .mo-skeleton, .mo-draw { animation: none !important; }
  .mo-draw { stroke-dashoffset: 0; }
  .mo-lift:hover, .mo-press:active { transform: none; }
}