/* ============================================
   ANIMATIONS — Pedro Soares Personal Trainer
   ============================================ */

/* ---- Fade In Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Scroll-triggered animation classes ---- */
.anim-fade-in,
.anim-fade-in-left,
.anim-fade-in-right {
  opacity: 0;
  will-change: transform, opacity;
}

.anim-fade-in.is-visible {
  animation: fadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-fade-in-left.is-visible {
  animation: fadeInLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-fade-in-right.is-visible {
  animation: fadeInRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Pulse ---- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0; }
}

@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---- Marquee ---- */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Scroll Indicator ---- */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes scrollWheel {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ---- Float / Hover ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-6px) rotate(1deg); }
  66% { transform: translateY(-3px) rotate(-1deg); }
}

/* ---- Spin (for CTA image) ---- */
@keyframes spinIn {
  from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* ---- WhatsApp floating pulse ---- */
@keyframes whatsappPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---- Modal ---- */
@keyframes modalOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalContentIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalContentOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.9) translateY(20px); }
}

/* ---- Background shapes ---- */
@keyframes shapeFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -30px) rotate(5deg); }
  50% { transform: translate(-10px, -50px) rotate(-3deg); }
  75% { transform: translate(15px, -20px) rotate(3deg); }
}

@keyframes shapeFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-30px, 20px) rotate(-5deg); }
  50% { transform: translate(20px, 40px) rotate(3deg); }
  75% { transform: translate(-15px, 10px) rotate(-2deg); }
}

@keyframes shapeFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.1); }
}

/* ---- Button arrow ---- */
@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* ---- Diagonal stripe bg pattern ---- */
@keyframes diagonalMove {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ---- Stats mobile carousel ---- */
@keyframes statsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Nametag float ---- */
@keyframes nametagFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-8px) translateX(4px); }
}