/* ============================================================
   Vertbits Lab — animations.css
   Page fade · reveal · stagger · shake · marquee · pulse · floats
   ============================================================ */

/* ---------- Page transitions ----------
   Handled by the html.boot logo-loader overlay (see global.css);
   body is never hidden so content paints immediately. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Loader: ring spin + logo pulse ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes logo-pulse {
  0%, 100% { background-size: 60px auto; }
  50%      { background-size: 72px auto; }
}
@keyframes loader-done {
  to { opacity: 0; visibility: hidden; }
}

/* ---------- Scroll reveal (global.js observes .reveal) ----------
   Optional stagger: style="--d:120ms" on the element. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease var(--d, 0ms), transform 0.65s cubic-bezier(0.22, 0.7, 0.2, 1) var(--d, 0ms);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* variants */
.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.visible, .reveal--right.visible, .reveal--scale.visible { transform: none; }

/* ---------- Cursor blink ---------- */
@keyframes blink { 50% { opacity: 0; } }
.cursor::after {
  content: '▊';
  margin-left: 6px;
  color: var(--accent);
  animation: blink 1.1s step-end infinite;
}

/* ---------- Shake (form validation) ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.shake { animation: shake 0.4s ease; }

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Scan line (product dashboard) ---------- */
@keyframes scanline {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 0.12; }
  95%  { opacity: 0.12; }
  100% { top: 100%; opacity: 0; }
}

/* ---------- Badge pulse ---------- */
@keyframes pulse-badge {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.pulse-badge { animation: pulse-badge 2s ease-in-out infinite; }

/* ---------- Kicker rule draw-in ---------- */
@keyframes rule-in {
  to { transform: scaleX(1); }
}

/* ---------- Ambient background drift ---------- */
@keyframes bg-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  to   { transform: translate3d(2%, 2.5%, 0) scale(1.08); }
}

/* ---------- Gentle float (mascots, logo) ---------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Float with a slight sway (hero mascot) ---------- */
@keyframes float-sway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1.2deg); }
}

/* ---------- Glow pulse ---------- */
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(0,229,199,0.20)) drop-shadow(0 0 8px rgba(0,229,199,0.15)); }
  50%      { filter: drop-shadow(0 0 46px rgba(0,229,199,0.35)) drop-shadow(0 0 14px rgba(0,229,199,0.22)); }
}

/* ---------- Soft pop (cards entering) ---------- */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}