/* ============================================
   SHOPINGKSA - ANIMATIONS CSS
   ============================================ */

/* ---- KEYFRAMES ---- */
@keyframes fadeIn       { from { opacity:0 } to { opacity:1 } }
@keyframes fadeInUp     { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInDown   { from { opacity:0; transform:translateY(-30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInLeft   { from { opacity:0; transform:translateX(-30px) } to { opacity:1; transform:translateX(0) } }
@keyframes fadeInRight  { from { opacity:0; transform:translateX(30px) } to { opacity:1; transform:translateX(0) } }
@keyframes scaleIn      { from { opacity:0; transform:scale(0.92) } to { opacity:1; transform:scale(1) } }
@keyframes slideInLeft  { from { transform:translateX(-100%) } to { transform:translateX(0) } }
@keyframes slideInRight { from { transform:translateX(100%) } to { transform:translateX(0) } }
@keyframes pulse        { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(1.05); opacity:.85 } }
@keyframes float        { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-14px) } }
@keyframes spin         { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes shimmer      { 0% { background-position:-700px 0 } 100% { background-position:700px 0 } }
@keyframes neonPulse    { 0%,100% { box-shadow:0 0 10px rgba(0,212,255,.3),0 0 30px rgba(0,212,255,.1) } 50% { box-shadow:0 0 20px rgba(0,212,255,.6),0 0 60px rgba(0,212,255,.25) } }
@keyframes rgbBorder    { 0% { border-color:var(--neon-blue) } 33% { border-color:var(--neon-purple) } 66% { border-color:var(--neon-gold) } 100% { border-color:var(--neon-blue) } }
@keyframes glitch       {
  0%,100% { clip-path:inset(0 0 100% 0); transform:none }
  10%      { clip-path:inset(20% 0 60% 0); transform:translate(-4px,2px) }
  20%      { clip-path:inset(40% 0 40% 0); transform:translate(4px,-2px) }
  30%      { clip-path:inset(60% 0 20% 0); transform:translate(-2px,4px) }
  40%      { clip-path:inset(80% 0 0% 0); transform:translate(2px,-4px) }
  50%      { clip-path:inset(0 0 80% 0); transform:none }
}
@keyframes scanline {
  0%   { transform:translateY(-100%) }
  100% { transform:translateY(100vh) }
}
@keyframes borderGlow {
  0%,100% { border-color:rgba(0,212,255,.2) }
  50%      { border-color:rgba(0,212,255,.6) }
}

/* ---- UTILITY ANIMATION CLASSES ---- */
.sk-anim-fade-in       { animation: fadeIn 0.6s ease both }
.sk-anim-fade-up       { animation: fadeInUp 0.6s ease both }
.sk-anim-fade-down     { animation: fadeInDown 0.6s ease both }
.sk-anim-fade-left     { animation: fadeInLeft 0.6s ease both }
.sk-anim-fade-right    { animation: fadeInRight 0.6s ease both }
.sk-anim-scale         { animation: scaleIn 0.5s ease both }
.sk-anim-float         { animation: float 4s ease-in-out infinite }
.sk-anim-pulse         { animation: pulse 2s ease-in-out infinite }
.sk-anim-spin          { animation: spin 1s linear infinite }
.sk-anim-neon-pulse    { animation: neonPulse 2s ease-in-out infinite }

/* DELAY HELPERS */
.sk-delay-1 { animation-delay: 0.1s }
.sk-delay-2 { animation-delay: 0.2s }
.sk-delay-3 { animation-delay: 0.3s }
.sk-delay-4 { animation-delay: 0.4s }
.sk-delay-5 { animation-delay: 0.5s }
.sk-delay-6 { animation-delay: 0.6s }

/* ---- SKELETON LOADING ---- */
.sk-skeleton {
  background: linear-gradient(90deg, var(--dark-card) 25%, var(--dark-card2) 50%, var(--dark-card) 75%);
  background-size: 700px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
.sk-skeleton-img  { width:100%; aspect-ratio:16/9; }
.sk-skeleton-text { height:14px; margin-bottom:8px; }
.sk-skeleton-text.sk-w-80 { width:80% }
.sk-skeleton-text.sk-w-60 { width:60% }
.sk-skeleton-text.sk-w-40 { width:40% }

/* ---- HOVER EFFECTS ---- */
.sk-hover-lift    { transition: transform 0.3s ease, box-shadow 0.3s ease }
.sk-hover-lift:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.5) }

.sk-hover-glow    { transition: box-shadow 0.3s ease }
.sk-hover-glow:hover { box-shadow: 0 0 30px rgba(0,212,255,.35) }

.sk-hover-scale   { transition: transform 0.3s ease }
.sk-hover-scale:hover { transform:scale(1.04) }

/* ---- NEON TEXT EFFECTS ---- */
.sk-neon-text {
  color: var(--neon-blue);
  text-shadow: 0 0 10px rgba(0,212,255,.7), 0 0 30px rgba(0,212,255,.4), 0 0 60px rgba(0,212,255,.2);
}
.sk-neon-text-purple {
  color: var(--neon-purple);
  text-shadow: 0 0 10px rgba(168,85,247,.7), 0 0 30px rgba(168,85,247,.4);
}
.sk-neon-text-gold {
  color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(251,191,36,.7), 0 0 30px rgba(251,191,36,.4);
}

/* ---- RGB BORDER ---- */
.sk-rgb-border { animation: rgbBorder 3s linear infinite }

/* ---- PAGE TRANSITION ---- */
.sk-page-enter {
  animation: fadeIn 0.3s ease both;
}

/* ---- SCANLINE OVERLAY (optional dramatic effect) ---- */
.sk-scanlines::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: rgba(0,212,255,.06);
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: 9998;
}

/* ---- CARD REVEAL ON SCROLL ---- */
.sk-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sk-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- GRADIENT TEXT ---- */
.sk-gradient-text {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sk-gradient-text-gold {
  background: linear-gradient(135deg, var(--neon-gold), #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- LOADING SPINNER ---- */
.sk-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--dark-border2);
  border-top-color: var(--neon-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

/* ---- TOOLTIP ---- */
.sk-tooltip {
  position: relative;
  cursor: pointer;
}
.sk-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-card2);
  border: 1px solid var(--dark-border2);
  color: var(--text-secondary);
  font-size: .75rem;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}
.sk-tooltip:hover::after { opacity: 1; }

/* ---- GLOW BOX SHADOWS ---- */
.sk-glow-blue   { box-shadow: var(--glow-blue) }
.sk-glow-purple { box-shadow: var(--glow-purple) }
.sk-glow-gold   { box-shadow: var(--glow-gold) }

/* ---- PREFERS REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}