/* ============================================================
   SANTA DELICIA — Animations
   ============================================================ */

/* ── Keyframes ── */

@keyframes floatRandom {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-14px) rotate(6deg); }
  66%      { transform: translateY(6px) rotate(-4deg); }
}

@keyframes waPulse {
  0%   { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 0   rgba(37,211,102,.5); }
  70%  { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 0   rgba(37,211,102,0); }
}

@keyframes logoIconBounce {
  0%,100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-10deg) scale(1.08); }
  75%      { transform: rotate(8deg) scale(1.05); }
}

@keyframes badgePop {
  from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

@keyframes priceCount {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

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

/* ── Hero slide active content ── */
.hero__slide.active .hero__slide-title {
  animation: heroContentIn .65s var(--ease, cubic-bezier(.22,1,.36,1)) .15s both;
}
.hero__slide.active .hero__slide-body a {
  animation: heroContentIn .65s var(--ease, cubic-bezier(.22,1,.36,1)) .3s both;
}

/* ── WhatsApp pulse ── */
.wa-float {
  animation: waPulse 2.5s ease-in-out infinite;
}

/* ── Prod badge pop-in ── */
.prod-badge {
  animation: badgePop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}

/* ── Cat chip slide ── */
.prod-chip {
  animation: chipSlide .35s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}

/* ── Product card hover enhancements ── */
.prod-card {
  transition: transform .35s var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow .35s ease;
}

.btn-order {
  transition: background .2s ease, transform .22s var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow .22s ease;
}

/* ── Category tab active scale ── */
.cat-tab.active {
  animation: badgePop .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Trust item ── */
.trust-item {
  transition: transform .3s var(--ease, cubic-bezier(.22,1,.36,1));
}
.trust-item:hover {
  transform: translateY(-3px);
}
.trust-item__icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.trust-item:hover .trust-item__icon {
  transform: scale(1.15) rotate(-6deg);
}

/* ── Footer social links ── */
.social-link {
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.social-link:hover { opacity: .9; }

/* ── Nav link hover ── */
.nav__link {
  transition: color .2s ease, background .2s ease;
}

/* ── Why card icon ── */
.why-icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* ── Hero CTA button ── */
.btn {
  transition: transform .22s var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow .22s ease, filter .2s ease;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

/* ── Share buttons ── */
.sh {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}
.sh:hover { filter: brightness(1.12); }

/* ── Gallery arrow fade ── */
.g-arrow {
  transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.g-arrow:hover {
  transform: translateY(-50%) scale(1.08) !important;
}

/* ── Logo icon hover pulse ── */
.logo:hover .logo__icon {
  animation: logoIconBounce .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── CTA section gradient animate ── */
.cta-section {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ── Toast ── */
.toast {
  transition: opacity .3s ease, transform .3s var(--ease, cubic-bezier(.22,1,.36,1));
}