/* ============================================================
   PEPIK — animations.css
   ============================================================ */

/* ---- LOADER FROG BOUNCE ---- */
@keyframes loaderBounce {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-14px) scale(1.06); }
}
.loader-frog { animation: loaderBounce .75s ease-in-out infinite alternate; }

/* ---- SCROLL ARROW ---- */
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
  50%       { transform: rotate(45deg) translate(4px, 4px); opacity: .5; }
}
.scroll-arrow { animation: scrollBounce 1.4s ease-in-out infinite; }

/* ---- FLOATING FROG (hero + inline) ---- */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  33%       { transform: translateY(-20px) rotate( 1.5deg); }
  66%       { transform: translateY(-9px)  rotate(-.5deg);  }
}
.floating { animation: heroFloat 4.5s ease-in-out infinite; }

@keyframes frogFloat {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(2deg); }
}
.inline-frog    { animation: frogFloat 3.2s ease-in-out infinite; }
.cta-frog-img  { animation: frogFloat 3.2s ease-in-out infinite; }

/* ---- LUXURY AURORA ---- */
@keyframes aurora-drift {
  0%   { transform: translate(0, 0)       scale(1);    opacity: .80; }
  33%  { transform: translate(22px, -16px) scale(1.05); opacity: 1; }
  66%  { transform: translate(-12px, 14px) scale(0.97); opacity: .85; }
  100% { transform: translate(8px, -6px)  scale(1.06); opacity: .92; }
}

/* ---- HERO BG GLOW PULSE ---- */
@keyframes glowPulse {
  0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: .9;  transform: translate(-50%,-50%) scale(1.12); }
}
.hero-bg-glow { animation: glowPulse 5s ease-in-out infinite; }

/* ---- HERO ENTRANCE (triggered by JS class add) ---- */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(64px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1);
}
.hero-word.visible { opacity: 1; transform: translateY(0); }
.hero-word:nth-child(2) { transition-delay: .12s; }

.hero-badge,
.hero-tagline,
.hero-actions,
.hero-contract,
.hero-scroll-indicator {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.hero-badge.visible,
.hero-tagline.visible,
.hero-actions.visible,
.hero-contract.visible,
.hero-scroll-indicator.visible {
  opacity: 1; transform: translateY(0);
}
.hero-badge          { transition-delay: .35s; }
.hero-tagline        { transition-delay: .58s; }
.hero-actions        { transition-delay: .76s; }
.hero-contract       { transition-delay: .94s; }
.hero-scroll-indicator { transition-delay: 1.1s; }

/* ---- STAT GLOW ---- */
.stat-number { animation: none; }

/* ---- FEATURE DOT PULSE ---- */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0,201,167,.5); }
  50%       { box-shadow: 0 0 14px rgba(0,201,167,.9), 0 0 28px rgba(0,201,167,.3); }
}
.feature-dot { animation: dotPulse 2s ease-in-out infinite; }

/* ---- HEADER FADE IN ---- */
@keyframes headerFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header { animation: headerFadeIn .7s ease .2s both; }

/* ---- STEP NUM HOVER ---- */
.buy-step:hover .step-num {
  background: rgba(0,201,167,.18);
  box-shadow: 0 0 18px rgba(0,201,167,.35);
  transition: background .25s, box-shadow .25s;
}

/* ---- NAV BURGER OPEN ---- */
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }