/* ============================================================
   BELA65 Design System — Animations
   Keyframes + motion utilities. Reveal-on-scroll lives here.
   All motion is disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- Reveal on scroll (JS adds .in when in view) ---------- */
/* Base hidden state only applies when JS is present (html.js), so the
   site is fully readable with JavaScript disabled. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease, ease), transform .6s var(--ease, ease); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes bela-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bela-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bela-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes bela-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ---------- Utilities ---------- */
.anim-float { animation: bela-float 5s ease-in-out infinite; }
.anim-gradient { background-size: 200% 200%; animation: bela-gradient-shift 8s ease infinite; }
.anim-pulse { animation: bela-pulse 2.4s ease-in-out infinite; }

/* Hover lift helper (shared by cards) */
.lift { transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease); }
.lift:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .anim-float, .anim-gradient, .anim-pulse { animation: none !important; }
  * { scroll-behavior: auto !important; }
}