/* ============================================================
   WOW.ZNAHIDKA — ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes spin          { to { transform: rotate(360deg); } }
@keyframes blink         { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes skelShimmer   { from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@keyframes orbFloat      { 0%,100%{ transform:translate(0,0)scale(1); } 33%{ transform:translate(22px,-22px)scale(1.08); } 66%{ transform:translate(-16px,16px)scale(.94); } }
@keyframes fadeUp        { from{ opacity:0; transform:translateY(28px)scale(.94); } to{ opacity:1; transform:none; } }
@keyframes pgIn          { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pgFade        { from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp       { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toastIn       { from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toastOut      { to{ opacity:0; pointer-events:none; } }
@keyframes shimmer       { 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
@keyframes bounceY       { from{ transform:translateY(0); } to{ transform:translateY(-14px); } }
@keyframes nudgePulse    { 0%,100%{ transform:scale(1); } 30%{ transform:scale(1.24); } 60%{ transform:scale(1.1); } }
@keyframes codPulse      { 0%,100%{ box-shadow:0 0 0 0 rgba(0,201,122,.18); } 50%{ box-shadow:0 0 0 9px rgba(0,201,122,0); } }
@keyframes cartBarPulse  { 0%,100%{ box-shadow:0 8px 32px rgba(0,0,0,.5); } 50%{ box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 0 3px rgba(255,255,255,.06); } }
@keyframes glowRed       { 0%,100%{ box-shadow:var(--shadow-red); } 50%{ box-shadow:0 12px 50px rgba(255,62,62,.45); } }
@keyframes scaleIn       { from{ transform:scale(.88); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes heartFly      { 0%{ transform:translate(0,0) scale(1.3); opacity:1; } 100%{ transform:translate(var(--dx,0px),var(--dy,-100px)) scale(0); opacity:0; } }
@keyframes comboPop      { 0%{ transform:scale(0.5); opacity:0; } 70%{ transform:scale(1.1); } 100%{ transform:scale(1); opacity:1; } }

/* ── 2026 PREMIUM ANIMATIONS ────────────────────── */
@keyframes cardShine {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}
@keyframes heroOrbA {
  0%,100%{ transform:translate(0,0) scale(1);    opacity:.7; }
  40%    { transform:translate(10%,-8%) scale(1.15); opacity:.9; }
  75%    { transform:translate(-6%,10%) scale(.9); opacity:.5; }
}
@keyframes heroOrbB {
  0%,100%{ transform:translate(0,0) scale(1);    opacity:.5; }
  35%    { transform:translate(-12%,6%) scale(.88); opacity:.7; }
  70%    { transform:translate(8%,-10%) scale(1.12); opacity:.35; }
}
@keyframes urgencyBreath {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.75; transform:scale(.97); }
}
@keyframes matchLikePulse {
  0%,100%{ box-shadow:0 6px 24px rgba(255,62,62,.35), 0 0 0 0 rgba(255,62,62,0); }
  50%    { box-shadow:0 8px 32px rgba(255,62,62,.5),  0 0 0 10px rgba(255,62,62,0); }
}
@keyframes ddFirePulse {
  0%,100%{ transform:scale(1) rotate(-4deg);   filter:drop-shadow(0 0 3px rgba(255,140,0,.55)) drop-shadow(0 0 8px rgba(255,80,0,.3)); }
  50%    { transform:scale(1.26) rotate(5deg);  filter:drop-shadow(0 0 8px rgba(255,100,0,.9)) drop-shadow(0 0 18px rgba(255,180,0,.55)); }
}
@keyframes secSlideIn {
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ── FIRE EMOJI ─────────────────────────────────── */
@keyframes fireBurn {
  0%,100% {
    transform: scale(1) rotate(-3deg);
    filter: drop-shadow(0 0 4px rgba(255,120,0,.7)) drop-shadow(0 0 12px rgba(255,60,0,.4));
  }
  25% { transform: scale(1.18) rotate(4deg); filter: drop-shadow(0 0 10px rgba(255,160,0,.9)) drop-shadow(0 0 24px rgba(255,80,0,.6)); }
  50% { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 0 6px rgba(255,100,0,.8)) drop-shadow(0 0 18px rgba(255,200,0,.5)); }
  75% { transform: scale(1.22) rotate(5deg); filter: drop-shadow(0 0 14px rgba(255,140,0,1)) drop-shadow(0 0 28px rgba(255,60,0,.7)); }
}

.fire-anim { display: inline-block; animation: fireBurn 1.4s ease-in-out infinite; }

/* ── CARD ENTRANCE ──────────────────────────────── */
@keyframes cardEnter {
  from { opacity:0; transform: translateY(20px) scale(.95); }
  to   { opacity:1; transform: none; }
}
.card-enter { animation: cardEnter .4s cubic-bezier(.16,1,.3,1) both; }

/* ── PAGE SLIDE ─────────────────────────────────── */
@keyframes pgSlideIn {
  from { opacity:0; transform: translateX(18px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ── SWIPE LABEL POP ────────────────────────────── */
@keyframes labelPop {
  0%   { transform: scale(.6) rotate(-8deg); opacity:0; }
  60%  { transform: scale(1.15) rotate(3deg); opacity:1; }
  100% { transform: scale(1) rotate(0deg); opacity:1; }
}

/* ── HERO TITLE ─────────────────────────────────── */
@keyframes titleReveal {
  from { opacity:0; transform: translateY(16px) skewY(2deg); }
  to   { opacity:1; transform: none; }
}

/* ── FLOAT ──────────────────────────────────────── */
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ── MICRO-INTERACTIONS ─────────────────────────── */
.tap-scale:active { transform: scale(.95); }
.press-bounce:active { animation: pressDown .14s ease; }
@keyframes pressDown { 0%,100%{ transform:scale(1); } 50%{ transform:scale(.94); } }

/* ── NAV NUDGE ──────────────────────────────────── */
.nav-item.nudge-pulse .nav-icon {
  animation: nudgePulse .55s cubic-bezier(.34,1.56,.64,1) 3;
  display: inline-block;
}

/* ── CART BAR PULSE ─────────────────────────────── */
#cart-sticky-bar.vis { animation: cartBarPulse 2.4s ease-in-out infinite; }

/* ── COD BANNER PULSE ───────────────────────────── */
.cod-banner { animation: codPulse 2.8s ease-in-out infinite; }

/* ── IMAGE LOADED FADE ──────────────────────────── */
.prod-card-img, .card-img, .m-card-img, .fav-img, .cart-img, .sp-img, .pd-img {
  transition: opacity .3s ease;
}
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded, img.loaded { opacity: 1; }

/* ── SHEET TRANSITION ───────────────────────────── */
.sheet { will-change: transform; }

/* ── CARD HOVER SHINE ───────────────────────────── */
.product-card::before {
  content: ''; position: absolute; z-index: 10;
  top: 0; left: -100%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .product-card:hover::before { animation: cardShine .55s ease forwards; }
}

/* ── SECTION STAGGER ENTRANCE ───────────────────── */
.page.active .section { animation: secSlideIn .42s var(--ease) both; }
.page.active .section:nth-child(1) { animation-delay:  30ms; }
.page.active .section:nth-child(2) { animation-delay:  90ms; }
.page.active .section:nth-child(3) { animation-delay: 150ms; }
.page.active .section:nth-child(4) { animation-delay: 210ms; }
.page.active .section:nth-child(5) { animation-delay: 270ms; }
.page.active .section:nth-child(6) { animation-delay: 330ms; }

/* ── URGENCY BREATHING ───────────────────────────── */
.urgency-hot, .urgency-low { animation: urgencyBreath 2s ease-in-out infinite; }

/* ── MATCH LIKE BUTTON PULSE ─────────────────────── */
.m-like { animation: matchLikePulse 2.2s ease-in-out infinite; }

/* ── HOVER GLOW (legacy) ────────────────────────── */
.prod-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--t-base);
  pointer-events: none;
}
.prod-card:hover::after { opacity: 1; }