/* === EPIC TOYZ - ANIMATIONS === */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37,211,102,0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(37,211,102,0);
  }
}

@keyframes pulseRed {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(230,57,70,0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(230,57,70,0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-15px); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.3); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.2); }
  70%       { transform: scale(1); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-8deg); }
  75%       { transform: rotate(8deg); }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO BACKGROUND
   ============================================================ */
.hero-bg-animated {
  background: linear-gradient(-45deg, #0D0E1A, #1D3557, #0D0E1A, #1A0D0F);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ============================================================
   FLOATING
   ============================================================ */
.float-animation {
  animation: float 4s ease-in-out infinite;
}

.float-animation-slow {
  animation: float 6s ease-in-out infinite;
}

.float-animation-fast {
  animation: float 2.5s ease-in-out infinite;
}

/* ============================================================
   WA BUTTON PULSE
   ============================================================ */
.wa-pulse {
  animation: pulse 2s infinite;
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--dark-600);
  border-top-color: var(--red-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 4px;
}

.spinner-white {
  border-color: rgba(255,255,255,0.3);
  border-top-color: white;
}

/* ============================================================
   SKELETON SHIMMER
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--dark-700) 25%,
    var(--dark-600) 50%,
    var(--dark-700) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-image {
  background: linear-gradient(
    90deg,
    var(--dark-700) 25%,
    var(--dark-600) 50%,
    var(--dark-700) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible,
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.visible,
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right.visible,
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-scale.visible,
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   STAGGER DELAYS FOR CHILDREN
   ============================================================ */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.stagger > *:nth-child(4) { transition-delay: 0.20s; }
.stagger > *:nth-child(5) { transition-delay: 0.25s; }
.stagger > *:nth-child(6) { transition-delay: 0.30s; }
.stagger > *:nth-child(7) { transition-delay: 0.35s; }
.stagger > *:nth-child(8) { transition-delay: 0.40s; }
.stagger > *:nth-child(9) { transition-delay: 0.45s; }
.stagger > *:nth-child(10){ transition-delay: 0.50s; }

/* ============================================================
   HOVER EFFECTS
   ============================================================ */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.hover-scale {
  transition: transform var(--transition);
}
.hover-scale:hover {
  transform: scale(1.03);
}

.hover-glow {
  transition: box-shadow var(--transition);
}
.hover-glow:hover {
  box-shadow: 0 0 24px rgba(230,57,70,0.3);
}

.hover-bright {
  transition: filter var(--transition);
}
.hover-bright:hover {
  filter: brightness(1.1);
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--dark-900);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--dark-900);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: opacity 0.4s ease;
}
.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   TOAST ANIMATIONS
   ============================================================ */
.toast {
  animation: toastIn 0.3s ease forwards;
}
.toast.removing {
  animation: toastOut 0.3s ease forwards;
}

/* ============================================================
   NAMED ANIMATION CLASSES
   ============================================================ */
.animate-fade-up     { animation: fadeUp 0.6s ease forwards; }
.animate-fade-in     { animation: fadeIn 0.4s ease forwards; }
.animate-fade-down   { animation: fadeDown 0.4s ease forwards; }
.animate-slide-left  { animation: slideInLeft 0.5s ease forwards; }
.animate-slide-right { animation: slideInRight 0.5s ease forwards; }
.animate-scale       { animation: scaleIn 0.4s ease forwards; }
.animate-bounce      { animation: bounceIn 0.6s ease forwards; }
.animate-wiggle      { animation: wiggle 0.5s ease; }
.animate-heartbeat   { animation: heartBeat 0.8s ease; }
.animate-spin        { animation: spin 1s linear infinite; }

/* ============================================================
   DELAY UTILITIES
   ============================================================ */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* ============================================================
   PRODUCT CARD IMAGE ZOOM
   ============================================================ */
.product-card-image img {
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

/* ============================================================
   MOBILE NAV SLIDE
   ============================================================ */
.mobile-nav {
  animation: slideDown 0.25s ease;
}

/* ============================================================
   RIPPLE EFFECT (JS-triggered)
   ============================================================ */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ============================================================
   COUNT-UP ANIMATION
   ============================================================ */
.count-up {
  animation: countUp 0.6s ease forwards;
}

/* ============================================================
   GLOWING BORDER PULSE
   ============================================================ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.3); }
  50%       { box-shadow: 0 0 20px 6px rgba(230,57,70,0.15); }
}

.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ============================================================
   TYPING CURSOR
   ============================================================ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  color: var(--red-500);
}

/* ============================================================
   CART BOUNCE (when item added)
   ============================================================ */
@keyframes cartBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.cart-bounce {
  animation: cartBounce 0.4s ease;
}

/* ============================================================
   PARALLAX LAYER (for hero elements)
   ============================================================ */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* Disable scroll reveal animations */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}