/* ============================================================
   Emirates Toys — Animations & Keyframes
   animations.css
   ============================================================ */

/* --------------------------------
   Entrance Animations
-------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  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 scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* --------------------------------
   Looping Animations
-------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(3deg); }
  66%       { transform: translateY(-6px) rotate(-3deg); }
}

@keyframes floatAlt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-16px) rotate(-5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

@keyframes pulseRing {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-8px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

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

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

/* --------------------------------
   Cart / Add to cart feedback
-------------------------------- */
@keyframes cartBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes badgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* --------------------------------
   Toast
-------------------------------- */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(50%) translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(50%) translateY(0); }
  to   { opacity: 0; transform: translateX(50%) translateY(16px); }
}

/* --------------------------------
   Success checkmark
-------------------------------- */
@keyframes checkmarkPop {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120px) rotate(720deg); opacity: 0; }
}

/* --------------------------------
   Hero shapes
-------------------------------- */
@keyframes morphBlob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* --------------------------------
   Utility animation classes
-------------------------------- */
.anim-fade-in-up {
  animation: fadeInUp var(--dur-slow) var(--ease-out) both;
}
.anim-fade-in-up--d1 { animation-delay: 100ms; }
.anim-fade-in-up--d2 { animation-delay: 200ms; }
.anim-fade-in-up--d3 { animation-delay: 300ms; }
.anim-fade-in-up--d4 { animation-delay: 400ms; }
.anim-fade-in-up--d5 { animation-delay: 500ms; }

.anim-float     { animation: float 4s ease-in-out infinite; }
.anim-float-alt { animation: floatAlt 5s ease-in-out infinite; }
.anim-pulse     { animation: pulse 2s ease-in-out infinite; }
.anim-bounce    { animation: bounce 1.4s infinite; }
.anim-spin      { animation: spin 1s linear infinite; }
.anim-wiggle    { animation: wiggle 0.6s ease-in-out; }

/* Hover: lift card */
.hover-lift {
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

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