/* ===== animations.css ===== */

/* Base Animations */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes progress {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}

@keyframes ring {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

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

@keyframes popIn {
  0% { transform: scale(0); }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== NEW AESTHETIC ANIMATIONS ===== */

/* Steam Effect - parang usok ng kape */
@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 0.5;
    transform: translateY(-10px) scale(1.1);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-20px) scale(1.2);
  }
  75% {
    opacity: 0.2;
    transform: translateY(-30px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.4);
  }
}

/* Gentle Sway - parang coffee shop lights */
@keyframes gentleSway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

/* Coffee Pour Effect */
@keyframes pour {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

/* Bean Bounce */
@keyframes beanBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  40% {
    transform: translateY(-15px) rotate(10deg);
  }
  60% {
    transform: translateY(-7px) rotate(5deg);
  }
}

/* Cream Swirl */
@keyframes swirl {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Latte Art Reveal */
@keyframes reveal {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  100% {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}

/* Warm Glow Pulse */
@keyframes warmGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(30, 106, 208, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(30, 106, 208, 0.6);
  }
}

/* Grain Texture Move - parang coffee grounds */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(2%, 2%); }
  30% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -2%); }
  50% { transform: translate(-2%, -2%); }
  60% { transform: translate(2%, 2%); }
  70% { transform: translate(-2%, 2%); }
  80% { transform: translate(2%, -2%); }
  90% { transform: translate(-2%, -2%); }
}

/* Drip Effect */
@keyframes drip {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  50% {
    transform: translateY(10px) scaleY(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translateY(20px) scaleY(0.8);
    opacity: 0;
  }
}

/* Fade In Scale */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Left with Bounce */
@keyframes slideInLeftBounce {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  70% {
    transform: translateX(10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide In Right with Bounce */
@keyframes slideInRightBounce {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  70% {
    transform: translateX(-10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Rotate Scale */
@keyframes rotateScale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ===== ANIMATION CLASSES ===== */

/* Original Classes */
.cart-sidebar.closing {
  animation: slideOutRight 0.3s ease;
}

.cart-item-animation {
  animation: fadeInUp 0.3s ease-out;
}

.cart-badge.pulse {
  animation: pulse 0.3s ease-in-out;
}

.cart-shake {
  animation: shake 0.3s ease-in-out;
}

.cart-success-icon {
  animation: checkmark 0.3s ease-in-out;
}

.cart-empty-animation {
  animation: float 3s ease-in-out infinite;
}

.notification-ring {
  animation: ring 0.5s ease-in-out;
}

.animate-slideUp {
  animation: slideUp 0.4s ease-out;
}

.animate-pulse {
  animation: pulse 1s ease-in-out;
}

/* ===== NEW AESTHETIC CLASSES ===== */

/* Steam Animation - para sa mga coffee images */
.animate-steam {
  animation: steam 3s ease-in-out infinite;
}

/* Gentle Sway - para sa mga icons */
.animate-sway {
  animation: gentleSway 4s ease-in-out infinite;
  transform-origin: center;
}

/* Coffee Pour - para sa loading effects */
.animate-pour {
  animation: pour 2s ease-in-out infinite;
}

/* Bean Bounce - para sa mga coffee bean icons */
.animate-bean-bounce {
  animation: beanBounce 2s ease-in-out infinite;
}

/* Swirl - para sa mga frappe icons */
.animate-swirl {
  animation: swirl 6s linear infinite;
}

/* Reveal - para sa mga images pag load */
.animate-reveal {
  animation: reveal 0.8s ease-out forwards;
}

/* Warm Glow - para sa mga buttons/cards */
.animate-warm-glow {
  animation: warmGlow 2s ease-in-out infinite;
}

/* Grain Effect - para sa mga background */
.animate-grain {
  animation: grain 0.5s steps(2) infinite;
}

/* Drip Effect - para sa mga coffee drops */
.animate-drip {
  animation: drip 1.5s ease-in-out infinite;
}

/* Fade In Scale - para sa mga modals */
.animate-fade-scale {
  animation: fadeInScale 0.4s ease-out forwards;
}

/* Slide In Left Bounce - para sa sidebar */
.animate-slide-left-bounce {
  animation: slideInLeftBounce 0.5s ease-out forwards;
}

/* Slide In Right Bounce - para sa notifications */
.animate-slide-right-bounce {
  animation: slideInRightBounce 0.5s ease-out forwards;
}

/* Rotate Scale - para sa mga loading icons */
.animate-rotate-scale {
  animation: rotateScale 2s linear infinite;
}

/* ===== COMBINATION ANIMATIONS ===== */

/* Coffee Steam + Sway Combo */
.animate-coffee {
  animation: steam 3s ease-in-out infinite, gentleSway 4s ease-in-out infinite;
}

/* Bean Loading */
.animate-bean-loading {
  animation: beanBounce 1s ease-in-out infinite, rotateScale 3s linear infinite;
}

/* Warm Card Hover Effect */
.hover-warm-glow:hover {
  animation: warmGlow 1.5s ease-in-out infinite;
}

/* Card Entry Animation */
.card-entry {
  animation: fadeInScale 0.5s ease-out forwards, slideUp 0.5s ease-out forwards;
}

/* ===== LOADING SPINNERS (UPDATED) ===== */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(30, 106, 208, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

.loading-spinner-large {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(30, 106, 208, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

/* Coffee Cup Loading Spinner */
.loading-coffee {
  position: relative;
  width: 60px;
  height: 60px;
}

.loading-coffee::before {
  content: '☕';
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: beanBounce 1s ease-in-out infinite;
}

.loading-coffee::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(30, 106, 208, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Steam Loading Effect */
.loading-steam {
  position: relative;
  width: 60px;
  height: 60px;
}

.loading-steam::before,
.loading-steam::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 20px;
  background: linear-gradient(to top, rgba(30, 106, 208, 0.8), transparent);
  left: 50%;
  transform: translateX(-50%);
  animation: steam 2s ease-out infinite;
}

.loading-steam::after {
  animation-delay: 0.5s;
  left: calc(50% + 10px);
}

/* ===== LOADING OVERLAY (UPDATED) ===== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.loading-overlay.show {
  opacity: 1;
  visibility: visible;
}

.loading-overlay .loading-content {
  background: white;
  padding: 2rem;
  border-radius: 2rem;
  box-shadow: 0 20px 40px rgba(30, 106, 208, 0.2);
  animation: fadeInScale 0.4s ease-out;
  border: 2px solid var(--primary-color);
}

.loading-progress {
  width: 200px;
  height: 4px;
  background: #e0e7ff;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px auto;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #60a5fa);
  border-radius: 4px;
  animation: progress 2s ease-in-out infinite;
}

/* Coffee Bean Progress Bar */
.loading-progress-coffee {
  width: 200px;
  height: 30px;
  background: #e0e7ff;
  border-radius: 30px;
  overflow: hidden;
  margin: 10px auto;
  position: relative;
}

.loading-progress-coffee::before {
  content: '🫘';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: slideInLeftBounce 2s ease-in-out infinite;
  font-size: 20px;
}

.loading-progress-coffee::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--primary-color), #60a5fa);
  animation: progress 2s ease-in-out infinite;
  opacity: 0.3;
}

/* ===== PAGE TRANSITIONS ===== */

/* Page Enter Animation */
.page-enter {
  animation: fadeInScale 0.5s ease-out;
}

/* Page Exit Animation */
.page-exit {
  animation: slideOutRight 0.3s ease forwards;
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Hover Animations for Cards */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(30, 106, 208, 0.15);
}

/* Hover Glow */
.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(30, 106, 208, 0.4);
}

/* Hover Scale */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Hover Rotate */
.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* ===== MENU ITEM ANIMATIONS ===== */

.menu-item-enter {
  animation: fadeInUp 0.4s ease-out;
}

.menu-item-enter:nth-child(odd) {
  animation: slideInLeftBounce 0.5s ease-out;
}

.menu-item-enter:nth-child(even) {
  animation: slideInRightBounce 0.5s ease-out;
}

/* ===== NOTIFICATION ANIMATIONS ===== */

.notification-enter {
  animation: slideInRightBounce 0.5s ease-out;
}

.notification-exit {
  animation: slideOutRight 0.3s ease forwards;
}

/* ===== CART ANIMATIONS ===== */

.cart-item-add {
  animation: popIn 0.3s ease-out;
}

.cart-item-remove {
  animation: fadeInUp 0.3s ease-out reverse;
}

/* ===== BUTTON ANIMATIONS ===== */

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

.btn-pulse:hover {
  animation: none;
  transform: scale(1.05);
}

/* ===== CUSTOM DELAYS ===== */

.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-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* ===== CUSTOM DURATIONS ===== */

.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 2s; }

/* ===== INFINITE ANIMATIONS ===== */

.infinite-slow {
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

.infinite-medium {
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.infinite-fast {
  animation-iteration-count: infinite;
  animation-duration: 1s;
}