/* ============================================================
   MANTOLA OF MOTORS — ANIMATIONS
   animations.css — Blue theme transitions & keyframes
   ============================================================ */

/* ── Scroll reveal base (handled via JS IntersectionObserver) ── */

/* ── Custom Cursor ─────────────────────────────────────────── */
.cursor, .cursor-follower {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.cursor { width: 8px; height: 8px; background: var(--clr-blue-mid); transition: opacity 0.3s; }
.cursor-follower { width: 36px; height: 36px; border: 1.5px solid rgba(88,183,255,0.45); background: transparent; transition: transform 0.12s var(--ease-premium), opacity 0.3s; }
body:not(:hover) .cursor, body:not(:hover) .cursor-follower { opacity: 0; }
a:hover ~ .cursor, button:hover ~ .cursor { transform: translate(-50%,-50%) scale(1.5); background: var(--clr-blue-deep); }

/* ── Page Transition ───────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-fade-in { animation: pageFadeIn 0.7s var(--ease-expo) forwards; }

/* ── Float ─────────────────────────────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.float { animation: floatY 4s ease-in-out infinite; }

/* ── Glow pulse ────────────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(88,183,255,0.2); }
  50%       { box-shadow: 0 0 44px rgba(88,183,255,0.55); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ── Shimmer (for skeleton loaders) ───────────────────────── */
@keyframes shimmer {
  from { background-position: -500px 0; }
  to   { background-position: 500px 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--clr-surface) 25%, var(--clr-blue-light) 50%, var(--clr-surface) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.8s infinite linear;
}

/* ── Spin ──────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1.2s linear infinite; }

/* ── Gradient text ─────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--clr-blue-mid), var(--clr-blue-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BlueBlink ─────────────────────────────────────────────── */
@keyframes blueBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Slide up via class ────────────────────────────────────── */
.slide-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
.slide-up.in-view { opacity: 1; transform: translateY(0); }

/* ── Fade in ───────────────────────────────────────────────── */
.fade-in {
  opacity: 0; transition: opacity 0.9s var(--ease-expo);
}
.fade-in.in-view { opacity: 1; }

/* ── Scale in ──────────────────────────────────────────────── */
.scale-in {
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
}
.scale-in.in-view { opacity: 1; transform: scale(1); }

/* ── Price card pop ─────────────────────────────────────────── */
.price-card { animation-fill-mode: both; }

/* ── Typing cursor ─────────────────────────────────────────── */
.typing-cursor::after { content: '|'; animation: blueBlink 0.9s step-end infinite; color: var(--clr-blue-mid); }