/* ============================================================
   SAN MIGUEL S.A. — animations.css
   Animaciones suaves activadas por scroll (sin librería externa)
   ============================================================ */

/* ── Base: elementos que se animan al entrar en viewport ── */
[data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              transform .7s cubic-bezier(.4,0,.2,1);
}
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].revealed {
  opacity: 1;
  transform: none !important;
}

/* ── Delays escalonados ──────────────────────────────────── */
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* ── Shimmer en cards de producto al hover ───────────────── */
.product-card::after {
  content: '';
  position: absolute;
  top: -100%; left: -60%;
  width: 40%; height: 300%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.08) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.product-card:hover::after {
  animation: shimmer .6s ease forwards;
}
@keyframes shimmer {
  from { left: -60%; }
  to   { left: 120%; }
}

/* ── Número contadores parpadeantes ─────────────────────── */
.trust-item .number.animating {
  animation: countGlow .4s ease;
}
@keyframes countGlow {
  0%   { text-shadow: 0 0 0 transparent; }
  50%  { text-shadow: 0 0 20px rgba(0,196,167,.5); }
  100% { text-shadow: none; }
}

/* ── Línea decorativa animada en headings ────────────────── */
.heading-line {
  display: inline-block;
  position: relative;
}
.heading-line::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
  border-radius: 2px;
  transition: width .8s cubic-bezier(.4,0,.2,1) .2s;
}
.heading-line.revealed::after { width: 100%; }

/* ── Floating badge en hero ──────────────────────────────── */
.float-badge {
  animation: floatBadge 4s ease-in-out infinite;
}
@keyframes floatBadge {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.float-badge-2 {
  animation: floatBadge 5s ease-in-out infinite;
  animation-delay: -2.5s;
}

/* ── Ripple en botones ───────────────────────────────────── */
.btn-teal, .btn-navy, .btn-primary, .btn-secondary {
  position: relative; overflow: hidden;
}
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: rippleAnim .55s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Gradiente animado en hero (sutil) ───────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Skeleton loader (mientras carga algo) ───────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-light) 25%, var(--gray-mid) 50%, var(--gray-light) 75%);
  background-size: 200% 100%;
  animation: skeleton .8s infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scroll progress bar ─────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 1001;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--navy-light));
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(0,196,167,.5);
}