/* ══════════════════════════════════════════════
   style_efectos.css — Animaciones y efectos UI
   ══════════════════════════════════════════════ */

/* ══ QTY BUTTON POP ══ */
.qty-btn-pop{animation:qtyPop .25s cubic-bezier(.34,1.56,.64,1) both}
@keyframes qtyPop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ══ ICON ATTENTION: shake + grow ══ */
@keyframes iconAttention{
  0%   {transform:scale(1) rotate(0deg)}
  5%   {transform:scale(1.45) rotate(-12deg)}
  10%  {transform:scale(1.5) rotate(12deg)}
  15%  {transform:scale(1.45) rotate(-10deg)}
  20%  {transform:scale(1.48) rotate(10deg)}
  25%  {transform:scale(1.44) rotate(-8deg)}
  30%  {transform:scale(1.46) rotate(8deg)}
  40%  {transform:scale(1.42) rotate(-5deg)}
  50%  {transform:scale(1.44) rotate(5deg)}
  60%  {transform:scale(1.4) rotate(-3deg)}
  75%  {transform:scale(1.38) rotate(2deg)}
  90%  {transform:scale(1.2) rotate(-1deg)}
  100% {transform:scale(1) rotate(0deg)}
}
.icon-attention{
  animation:iconAttention 3s cubic-bezier(.34,1.56,.64,1) both !important;
  z-index:9999;position:relative;
}

/* ══ POINTER ARROW (flecha de descarga) ══ */
.dl-arrow{
  position:fixed;pointer-events:none;z-index:99990;
  display:flex;flex-direction:column;align-items:center;
  animation:arrowBounce 3s ease both;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.dl-arrow svg{width:38px;height:38px}
@keyframes arrowBounce{
  0%  {opacity:0;transform:translateY(-18px)}
  8%  {opacity:1;transform:translateY(0)}
  80% {opacity:1;transform:translateY(0)}
  88% {opacity:1;transform:translateY(-6px)}
  94% {opacity:1;transform:translateY(2px)}
  100%{opacity:0;transform:translateY(-8px)}
}

/* ══ ATTENTION STARS ══ */
.att-star{
  position:fixed;pointer-events:none;z-index:99991;
  font-size:var(--as-size,20px);
  animation:attStar var(--as-dur,2s) cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes attStar{
  0%  {opacity:0;transform:translate(0,0) scale(0) rotate(0deg)}
  15% {opacity:1;transform:translate(var(--as-tx),var(--as-ty)) scale(1.3) rotate(var(--as-rot))}
  70% {opacity:1;transform:translate(var(--as-tx),var(--as-ty)) scale(1) rotate(var(--as-rot))}
  100%{opacity:0;transform:translate(var(--as-tx),var(--as-ty)) scale(0) rotate(var(--as-rot))}
}

/* ══ PULSE RING alrededor del ícono ══ */
.pulse-ring{
  position:fixed;border-radius:50%;pointer-events:none;z-index:99989;
  border:3px solid var(--red);
  animation:pulseRing 3s ease both;
}
@keyframes pulseRing{
  0%  {transform:scale(.8);opacity:.9}
  30% {transform:scale(1.6);opacity:.6}
  60% {transform:scale(2.2);opacity:.2}
  100%{transform:scale(2.8);opacity:0}
}

/* ══ SKELETON SHIMMER ══ */
.skeleton {
  background: linear-gradient(90deg, var(--s2) 25%, var(--border) 50%, var(--s2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.img-loaded { animation: imgFadeIn .3s ease both }
@keyframes imgFadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* ══ ODIN CARD ENTRADA ══ */
.odin-biz-card {
  animation: none;
}

/* ══ FLOATING EMOJI (estilo TikTok) — migrado desde style.css (huerfano, no cargado) ══ */
.float-emoji{ position:fixed; font-size:28px; pointer-events:none; z-index:99999; animation:floatUp var(--fe-dur,.9s) cubic-bezier(.25,.46,.45,.94) forwards; transform-origin:center; }
.float-emoji.down{ animation:floatDown var(--fe-dur,.7s) cubic-bezier(.55,.06,.68,.19) forwards; }
@keyframes floatUp{
  0%  {transform:translateY(0) scale(0) rotate(-15deg);opacity:0}
  15% {transform:translateY(-10px) scale(1.3) rotate(8deg);opacity:1}
  40% {transform:translateY(-40px) scale(1.1) rotate(-4deg);opacity:1}
  70% {transform:translateY(-80px) scale(1) rotate(2deg);opacity:.8}
  100%{transform:translateY(-130px) scale(.7) rotate(0);opacity:0}
}
@keyframes floatDown{
  0%  {transform:translateY(0) scale(0);opacity:0}
  20% {transform:translateY(8px) scale(1.2);opacity:1}
  60% {transform:translateY(40px) scale(.95);opacity:.7}
  100%{transform:translateY(80px) scale(.6);opacity:0}
}