/* ============================================================
   HTH Developers — Animations
   Keyframes, micro-interactions, tilt & reveal helpers
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(6px); }
}

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 92, 255, 0.5); }
  50% { box-shadow: 0 0 40px rgba(24, 224, 255, 0.7); }
}

/* ---------- Animated gradient utility ---------- */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ---------- Button shine / micro-interaction ---------- */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---------- Card tilt (JS-driven, sets --rx/--ry) ---------- */
.tilt {
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-glow {
  position: relative;
}
.tilt-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(124,92,255,0.25), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.tilt-glow:hover::before { opacity: 1; }

/* ---------- AOS-like reveal fallback (no-JS / progressive) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal='left'] { transform: translateX(-40px); }
[data-reveal='right'] { transform: translateX(40px); }
[data-reveal='scale'] { transform: scale(0.9); }
[data-reveal].in-view { transform: none; }

/* Stagger delays */
[data-delay='1'] { transition-delay: 0.08s; }
[data-delay='2'] { transition-delay: 0.16s; }
[data-delay='3'] { transition-delay: 0.24s; }
[data-delay='4'] { transition-delay: 0.32s; }
[data-delay='5'] { transition-delay: 0.40s; }
[data-delay='6'] { transition-delay: 0.48s; }

/* ---------- Skeleton shimmer for loading ---------- */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}

/* ---------- Glow pulse element ---------- */
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ---------- Hover lift utility ---------- */
.lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lift:hover { transform: translateY(-6px); }

/* ---------- Underline grow link ---------- */
.link-grow { position: relative; }
.link-grow::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--grad-main);
  transition: width 0.3s ease;
}
.link-grow:hover::after { width: 100%; }

/* ---------- Count up helper (kept visible) ---------- */
.counting { font-variant-numeric: tabular-nums; }

/* ---------- Page transition fade ---------- */
.page-fade {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}