/* ─────────────────────────────────────────────────────────────
   animations.css
   Toate animațiile și tranziția de reveal la scroll.
   Respectă prefers-reduced-motion din reset.css.
───────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   REVEAL LA SCROLL
   Elementele cu .reveal sunt invizibile la start.
   JS adaugă .is-visible când intră în viewport.
══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante direcție */
.reveal--right {
  transform: translateX(32px);
}
.reveal--right.is-visible {
  transform: translateX(0);
}
.reveal--left {
  transform: translateX(-32px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

/* Delay-uri pentru stagger */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }


/* ══════════════════════════════════════════════════════════════
   HERO CARD FLOATS
   Carduri plutitoare în scena hero.
══════════════════════════════════════════════════════════════ */
@keyframes floatA {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(0.5deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50%       { transform: translateY(10px) rotate(-0.5deg); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  50%       { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes floatD {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(7px); }
}

.float-a { animation: floatA 5s   ease-in-out infinite; }
.float-b { animation: floatB 6s   ease-in-out infinite; }
.float-c { animation: floatC 4.5s ease-in-out infinite; }
.float-d { animation: floatD 5.5s ease-in-out infinite; }


/* ══════════════════════════════════════════════════════════════
   PULSE (badge dot)
══════════════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(1.5); }
}


/* ══════════════════════════════════════════════════════════════
   SPIN (loading ring, btn spinner)
══════════════════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════
   COUNTER ENTRANCE
   Folosit de JS pentru animarea numerelor.
   Clasa .is-counting se adaugă dinamic.
══════════════════════════════════════════════════════════════ */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-card__num.is-counting {
  animation: countUp 0.4s var(--ease-out) both;
}


/* ══════════════════════════════════════════════════════════════
   ENTRANCE PENTRU CARDURI (hero scene initial load)
══════════════════════════════════════════════════════════════ */
@keyframes cardEntrance {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hero-scene .hcard {
  animation: cardEntrance 0.6s var(--ease-spring) both;
}
.hcard--main    { animation-delay: 0.1s; }
.hcard--left    { animation-delay: 0.25s; }
.hcard--right   { animation-delay: 0.35s; }
.hcard--savings { animation-delay: 0.45s; }