/* ═══════════════════════════════════════════════════════════
   IMPULSO SOCIAL MX — animations.css
   Todos los keyframes, efectos y clases de animación
═══════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Float / levitate */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  33%       { transform: translateY(-10px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

/* Pulse glow on buttons/badges */
@keyframes pulsate {
  0%, 100% { box-shadow: 0 0 8px rgba(26,127,255,.4); }
  50%       { box-shadow: 0 0 24px rgba(74,184,255,.8), 0 0 48px rgba(26,127,255,.25); }
}

/* Gradient shimmer text */
@keyframes shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* Hero particle drift */
@keyframes drift {
  0%   { transform: translateY(0)   translateX(0)   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-80px) translateX(20px) opacity: 0; }
}

/* Scanline sweep */
@keyframes scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* Counter number pop */
@keyframes countPop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Typing cursor */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Rotate loading */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading shimmer */
@keyframes skeleton {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Notification pop */
@keyframes notif-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Card enter stagger */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Border walk */
@keyframes borderWalk {
  0%   { border-color: rgba(26,127,255,.2); }
  50%  { border-color: rgba(232,144,28,.55); }
  100% { border-color: rgba(26,127,255,.2); }
}

/* ── SCROLL REVEAL ─────────────────────────────────────── */
/* Elements start invisible; JS adds .visible when in viewport */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger helpers */
.d1 { transition-delay: .08s !important; }
.d2 { transition-delay: .16s !important; }
.d3 { transition-delay: .24s !important; }
.d4 { transition-delay: .32s !important; }
.d5 { transition-delay: .40s !important; }
.d6 { transition-delay: .48s !important; }

/* ── PRODUCT CARDS FILTER TRANSITION ──────────────────── */
.grid-wrap {
  transition: opacity .2s ease, transform .2s ease;
}
.grid-wrap.fading {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* New cards animate in after filter */
.prod-item {
  animation: cardEnter .35s ease both;
}

/* ── UTILITY CLASSES ───────────────────────────────────── */
.float-anim   { animation: float 4s ease-in-out infinite; }
.float-anim-2 { animation: float 5s ease-in-out infinite; animation-delay: -1.5s; }

.shimmer-text {
  /* City night shimmer: blue eléctrico → chrome robot → ámbar dorado */
  background: linear-gradient(90deg,
    #1a7fff 0%, #4ab8ff 20%, #c0ccdc 42%, #eef2fa 52%, #e8901c 65%, #f4b040 78%, #1a7fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4.5s linear infinite;
}

.glow-pulse { animation: pulsate 2.5s ease-in-out infinite; }

.spin-anim { animation: spin .8s linear infinite; }

/* Typing cursor */
.cursor::after {
  content: '_';
  color: var(--red-b);
  font-weight: 400;
  animation: cursor-blink .9s step-end infinite;
  margin-left: 2px;
}

/* ── SKELETON CARDS ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-card) 25%,
    rgba(0,126,255,.07) 50%,
    var(--bg-card) 75%);
  background-size: 200px 100%;
  animation: skeleton 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.skeleton-img  { height: 160px; }
.skeleton-line { height: 10px; margin: 8px 12px; }
.skeleton-line.short { width: 60%; }
.skeleton-btn  { height: 30px; margin: 10px 12px; border-radius: var(--radius-sm); }

/* ── HERO PARTICLES ────────────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: drift linear infinite;
  opacity: 0;
}

/* ── PAGE TRANSITIONS ──────────────────────────────────── */
.page-fade-in { animation: fadeIn .4s ease; }

/* ── COUNTER ANIMATION ─────────────────────────────────── */
.stat-number.counted { animation: countPop .5s cubic-bezier(.36,.07,.19,.97); }