/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  animations.css — Sistemul de Animații                       ║
 * ║                                                              ║
 * ║  ORGANIZARE:                                                 ║
 * ║  §1 Keyframes de bază — fade, slide, scale                  ║
 * ║  §2 Animații specializate — float, shimmer, pulse           ║
 * ║  §3 Sistem Scroll Reveal — clase pentru animare la scroll   ║
 * ║  §4 Stagger delays — animare în cascadă                     ║
 * ║  §5 Animații Hero — intrare la încărcarea paginii           ║
 * ║  §6 Animații speciale cofetărie                             ║
 * ║                                                              ║
 * ║  CUM SE FOLOSEȘTE SCROLL REVEAL:                             ║
 * ║  1. Adaugă class="sr" la element                             ║
 * ║  2. Adaugă modifier: sr--up, sr--left, sr--right, sr--scale ║
 * ║  3. JavaScript (core.js) adaugă .visible când e în viewport ║
 * ║  4. Opțional: .sr-d1 ... .sr-d6 pentru stagger delay        ║
 * ║                                                              ║
 * ║  EXEMPLU:                                                    ║
 * ║  <div class="sr sr--up sr-d2">Conținut animat</div>          ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════
   §1 KEYFRAMES DE BAZĂ
═══════════════════════════════════════════ */

/* Intrare de jos în sus (cel mai folosit) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade simplu */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Intrare din stânga */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Intrare din dreapta */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zoom in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Rotație */
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════
   §2 ANIMAȚII SPECIALIZATE
═══════════════════════════════════════════ */

/**
 * Float — pentru tortul din hero și badge-uri flotante
 * Simulează o plutire ușoară sus-jos
 */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%       { transform: translateY(-16px) rotate(1.5deg); }
  70%       { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/**
 * Shimmer — efect de loading skeleton
 * Simulează conținut care se încarcă
 */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/**
 * Pulse Ring — pentru butonul WhatsApp
 * Creează un efect de „pulsare" care atrage atenția
 */
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.65); opacity: 0; }
}

/**
 * Pulse Glow — pentru elemente importante
 */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 135, 58, 0.4); }
  50%       { box-shadow: 0 0 0 14px rgba(200, 135, 58, 0); }
}

/**
 * Gradient Shift — pentru text gradient animat
 */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/**
 * Marquee — pentru strip-ul de features
 * Se mișcă continuu de la dreapta la stânga
 */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/**
 * Toast In — notificări care apar de jos
 */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/**
 * Wiggle — pentru elemente decorative jucăușe
 */
@keyframes wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}

/**
 * Draw — pentru trasarea SVG path-urilor
 * Necesită stroke-dasharray și stroke-dashoffset pe element
 */
@keyframes draw {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}

/**
 * Count Up — pentru contoare animate
 */
@keyframes countUp {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: translateY(0); }
}

/**
 * Sprinkle Fall — pentru particule decorative
 */
@keyframes sprinkleFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════════
   §3 SISTEM SCROLL REVEAL
   Clasa .sr = element de animat
   JavaScript din core.js adaugă .visible
═══════════════════════════════════════════ */

/* Stare inițială — elementul este invizibil */
.sr {
  opacity: 0;
  transition:
    opacity  var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
}

/* Modificatori — direcția din care apare elementul */
.sr--up    { transform: translateY(32px); }
.sr--down  { transform: translateY(-32px); }
.sr--left  { transform: translateX(-32px); }
.sr--right { transform: translateX(32px); }
.sr--scale { transform: scale(0.90); }
.sr--none  { transform: none; } /* fade simplu, fără mișcare */

/* Starea finală — adăugată de JavaScript */
.sr.visible {
  opacity: 1;
  transform: none;
}


/* ═══════════════════════════════════════════
   §4 STAGGER DELAYS — animare în cascadă
   Adaugă .sr-d1 ... .sr-d8 pe copiii unui grid
   pentru a se anima unul după altul
═══════════════════════════════════════════ */

.sr-d1 { transition-delay: 0ms; }
.sr-d2 { transition-delay: 80ms; }
.sr-d3 { transition-delay: 160ms; }
.sr-d4 { transition-delay: 240ms; }
.sr-d5 { transition-delay: 320ms; }
.sr-d6 { transition-delay: 400ms; }
.sr-d7 { transition-delay: 480ms; }
.sr-d8 { transition-delay: 560ms; }


/* ═══════════════════════════════════════════
   §5 ANIMAȚII HERO (intrare la load)
   Folosite pe elementele din secțiunea hero.
   Se joacă O SINGURĂ DATĂ la încărcarea paginii.
═══════════════════════════════════════════ */

.anim-h1 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.10s both; }
.anim-h2 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.22s both; }
.anim-h3 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.34s both; }
.anim-h4 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.46s both; }
.anim-h5 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.58s both; }
.anim-h6 { animation: fadeUp var(--dur-xslow) var(--ease-out) 0.70s both; }

/* Animații din laterale — pentru ilustrații */
.anim-from-left  { animation: fadeLeft  var(--dur-xslow) var(--ease-out) 0.30s both; }
.anim-from-right { animation: fadeRight var(--dur-xslow) var(--ease-out) 0.30s both; }
.anim-scale-in   { animation: scaleIn   var(--dur-xslow) var(--ease-out) 0.20s both; }


/* ═══════════════════════════════════════════
   §6 CLASE REUTILIZABILE
═══════════════════════════════════════════ */

/* Float animations pentru elemente decorative */
.float-1 { animation: float 4.5s var(--ease-inout) 0.0s infinite; }
.float-2 { animation: float 5.5s var(--ease-inout) 0.7s infinite; }
.float-3 { animation: float 6.5s var(--ease-inout) 1.4s infinite; }
.float-gentle { animation: floatGentle 8s var(--ease-inout) infinite; }

/* Wiggle pentru emoji decorative */
.wiggle { animation: wiggle 3s ease-in-out infinite; }

/* Shimmer skeleton loader */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--clr-vanilla-200) 25%,
    var(--clr-vanilla-100) 50%,
    var(--clr-vanilla-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* Text gradient animat */
.text-gradient-anim {
  background: linear-gradient(
    135deg,
    var(--clr-caramel-500),
    var(--clr-peach-500),
    var(--clr-gold-400),
    var(--clr-caramel-500)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

/* Marquee strip */
.marquee-track { overflow: hidden; }
.marquee-list  { display: flex; animation: marquee 30s linear infinite; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   §7 HOVER EFFECTS — clase utilitare hover
═══════════════════════════════════════════ */
.hover-lift {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--dur-base) var(--ease-spring);
}
.hover-scale:hover { transform: scale(1.04); }

.hover-glow {
  transition: box-shadow var(--dur-base);
}
.hover-glow:hover { box-shadow: var(--shadow-glow); }