/* ==========================================================================
   Quenavo — animations.css
   Keyframes, scroll-reveal states, floating/rotating hero effects
   ========================================================================== */

/* ------------------------------- Keyframes ------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatSpin {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-18px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -24px) scale(1.08); }
  66%      { transform: translate(-22px, 18px) scale(0.94); }
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes glowSlide {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 10px 30px var(--glow-blue); }
  50%      { box-shadow: 0 10px 42px var(--glow-purple); }
}
@keyframes particleRise {
  from { transform: translateY(0); opacity: 0.7; }
  to   { transform: translateY(-140px); opacity: 0; }
}
@keyframes spinnerRot {
  to { transform: rotate(360deg); }
}

/* --------------------------- Scroll reveal system ------------------------ */
/* Elements start hidden; animations.js adds .is-visible via IntersectionObserver.
   If JS fails, the no-js fallback keeps everything visible. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal, .no-observer .reveal { opacity: 1; transform: none; }

/* Stagger helpers */
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.42s; }
.no-js .reveal-stagger > *, .no-observer .reveal-stagger > * { opacity: 1; transform: none; }

/* ------------------------- Hero floating elements ------------------------ */
.float-card { animation: floaty 5.5s ease-in-out infinite; }
.float-card--pdf { animation-duration: 6s; }
.float-card--jpg { animation-duration: 5s; animation-delay: -1.6s; }
.float-card--conv { animation-duration: 6.8s; animation-delay: -3s; }

/* inner icon slow rotation for 3D feel */
.float-card--conv svg { animation: slowSpin 14s linear infinite; }
.float-card::after {
  /* glossy highlight */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.35), transparent 46%);
  pointer-events: none;
}
.blob { animation: blobMove 14s ease-in-out infinite; }
.particle { animation: particleRise 7s linear infinite; }

/* Gradient shine sweep on primary buttons */
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::before { left: 130%; }

/* Loading spinner */
.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--blue);
  animation: spinnerRot 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
.btn .spinner { border-color: rgba(255,255,255,0.35); border-top-color: #fff; width: 17px; height: 17px; }

/* Hero CTA pulse */
.hero .btn--primary { animation: pulseGlow 4s ease-in-out infinite; }

/* Counter (About/stats) */
.counter { font-variant-numeric: tabular-nums; }