/* ====================================================================
   Allensama - Cute Pastel Café Animations
   Smooth, gentle, lightweight keyframe animations
   ==================================================================== */

/* Mascot floating & breathing */
@keyframes floatMascot {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

.mascot-illustration {
  animation: floatMascot 4s ease-in-out infinite;
}

/* Eye Blinking */
@keyframes eyeBlink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

.blinking-eye {
  transform-origin: center;
  animation: eyeBlink 4.5s ease-in-out infinite;
}

/* Soft floating bubble */
@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Floating background decor */
@keyframes floatSlow1 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-24px) rotate(15deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes floatSlow2 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(-12deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* Sparkle shimmer */
@keyframes sparkleShimmer {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(180deg);
  }
}

.steam-float {
  animation: floatSoft 3s ease-in-out infinite;
}

/* Heart burst effect when clicking mascot */
.heart-particle {
  position: absolute;
  pointer-events: none;
  font-size: 1.5rem;
  color: #FF5376;
  z-index: 100;
  animation: heartFly 1.2s ease-out forwards;
}

@keyframes heartFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 0px), var(--ty, -80px)) scale(1.4);
  }
}

/* Scroll reveal classes */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card Fade In on Filter */
.gallery-card.is-visible, .queue-ticket-card.is-visible {
  animation: cardFadeIn 0.3s ease forwards;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger delay helpers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Interactive ripple / pop on click */
.btn:active, .filter-btn:active, .social-btn:active {
  transform: scale(0.96);
}

/* Marquee scrolling animation */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mascot Jiggle */
@keyframes mascotJiggle {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.08) rotate(-4deg); }
  40% { transform: scale(1.08) rotate(4deg); }
  60% { transform: scale(1.05) rotate(-2deg); }
  80% { transform: scale(1.02) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.mascot-jiggle {
  animation: mascotJiggle 0.6s ease-in-out !important;
}

/* Cafe Bell Ring */
@keyframes bellRing {
  0% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}

.bell-ring {
  animation: bellRing 0.8s ease-in-out;
}

/* Stamp Pop Effect */
@keyframes stampPop {
  0% {
    transform: scale(2.5) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.9) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.stamp-popped {
  animation: stampPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}