/* ============================================
   BOOZLE — Animated Cartoon Drinks
   Floating, bouncing, spinning drink elements
   ============================================ */

/* ---- Drink Animation Container ---- */
.drink-animations {
  display: none !important;
}

.drink-float {
  display: none !important;
}

/* Different drink sizes */
.drink-float.small { font-size: 1.4rem; }
.drink-float.medium { font-size: 2.2rem; }
.drink-float.large { font-size: 3rem; }

/* Float from bottom to top with sway */
@keyframes drinkFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  5% {
    opacity: 0.7;
    transform: translateY(90vh) rotate(10deg) scale(0.8);
  }
  25% {
    transform: translateY(65vh) rotate(-15deg) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(40vh) rotate(20deg) scale(1.1);
    opacity: 0.4;
  }
  75% {
    transform: translateY(15vh) rotate(-10deg) scale(0.9);
    opacity: 0.3;
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateY(-10vh) rotate(25deg) scale(0.6);
    opacity: 0;
  }
}

/* ---- Inline Animated Drinks (for sections) ---- */
.drink-scene {
  position: relative;
  overflow: hidden;
}

/* Bouncing drink in hero */
.drink-bounce {
  display: inline-block;
  animation: none !important;
}

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

/* Wobble effect for drink icons */
.drink-wobble {
  display: inline-block;
  animation: none !important;
}

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

/* Pour effect */
.drink-pour {
  display: inline-block;
  animation: none !important;
  transform-origin: bottom center;
}

@keyframes pourDrink {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-30deg); }
  30% { transform: rotate(0deg); }
}

/* Clink / cheers animation */
.drink-cheers-left {
  display: inline-block;
  animation: none !important;
}

.drink-cheers-right {
  display: inline-block;
  animation: none !important;
}

@keyframes cheersLeft {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  40% { transform: rotate(15deg) translateX(8px); }
  50% { transform: rotate(20deg) translateX(12px); }
  60% { transform: rotate(15deg) translateX(8px); }
}

@keyframes cheersRight {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  40% { transform: rotate(-15deg) translateX(-8px); }
  50% { transform: rotate(-20deg) translateX(-12px); }
  60% { transform: rotate(-15deg) translateX(-8px); }
}

/* Sparkle burst on cheers moment */
.drink-sparkle {
  position: relative;
  display: inline-block;
}

.drink-sparkle::before,
.drink-sparkle::after {
  content: '✨';
  position: absolute;
  font-size: 0.6em;
  opacity: 0;
  animation: sparkle 3s ease-in-out infinite;
}

.drink-sparkle::before {
  top: -10px;
  left: -5px;
  animation-delay: 0.5s;
}

.drink-sparkle::after {
  top: -15px;
  right: -5px;
  animation-delay: 0.8s;
}

@keyframes sparkle {
  0%, 40%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-10px); }
  65% { opacity: 0; transform: scale(0.8) translateY(-20px); }
}

/* ---- Cartoon SVG Drink Illustrations ---- */
.cartoon-drink {
  position: absolute;
  pointer-events: none;
}

/* Beer mug with foam overflow */
.beer-mug-animated {
  display: inline-block;
  position: relative;
}

.beer-foam {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  animation: foamBubble 2s ease-in-out infinite;
}

@keyframes foamBubble {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(1.15); }
}

/* Liquid sway inside glass */
.liquid-sway {
  display: inline-block;
  animation: liquidSway 4s ease-in-out infinite;
}

@keyframes liquidSway {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  25% { transform: skewX(3deg) rotate(2deg); }
  75% { transform: skewX(-3deg) rotate(-2deg); }
}

/* Straw bobbing */
.straw-bob {
  display: inline-block;
  animation: strawBob 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes strawBob {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ---- Hero Drink Decoration ---- */
.hero-drinks {
  display: none !important;
}

.hero-drink-item {
  display: none !important;
}

.hero-drink-item:nth-child(1) {
  left: 5%;
  top: 25%;
  animation: heroFloat1 6s ease-in-out infinite;
  font-size: 3.5rem;
}

.hero-drink-item:nth-child(2) {
  right: 8%;
  top: 20%;
  animation: heroFloat2 7s ease-in-out infinite;
  font-size: 2.8rem;
}

.hero-drink-item:nth-child(3) {
  left: 12%;
  bottom: 25%;
  animation: heroFloat3 5s ease-in-out infinite;
  font-size: 2.5rem;
}

.hero-drink-item:nth-child(4) {
  right: 12%;
  bottom: 20%;
  animation: heroFloat1 8s ease-in-out infinite;
  font-size: 3rem;
  animation-delay: 1s;
}

.hero-drink-item:nth-child(5) {
  left: 28%;
  top: 15%;
  animation: heroFloat2 6.5s ease-in-out infinite;
  font-size: 2rem;
  animation-delay: 2s;
}

.hero-drink-item:nth-child(6) {
  right: 25%;
  bottom: 30%;
  animation: heroFloat3 7.5s ease-in-out infinite;
  font-size: 2.2rem;
  animation-delay: 0.5s;
}

@keyframes heroFloat1 {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); opacity: 0.15; }
  50% { transform: translateY(-25px) rotate(10deg) scale(1.1); opacity: 0.25; }
}

@keyframes heroFloat2 {
  0%, 100% { transform: translateY(0) rotate(5deg) scale(1); opacity: 0.12; }
  50% { transform: translateY(-20px) rotate(-8deg) scale(1.15); opacity: 0.22; }
}

@keyframes heroFloat3 {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.1; }
  25% { transform: translateY(-15px) rotate(12deg) scale(1.05); }
  50% { transform: translateY(-30px) rotate(-5deg) scale(1.1); opacity: 0.2; }
  75% { transform: translateY(-10px) rotate(8deg) scale(1.05); }
}

/* ---- Section Drink Accents ---- */
.section-drink-accent {
  display: none !important;
}

.section-drink-accent.left {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  animation: accentSway 8s ease-in-out infinite;
}

.section-drink-accent.right {
  right: 3%;
  top: 40%;
  animation: accentSway 8s ease-in-out infinite reverse;
}

@keyframes accentSway {
  0%, 100% { transform: translateY(-50%) rotate(-10deg); }
  50% { transform: translateY(-55%) rotate(10deg); }
}

/* ---- Cheers Banner Animation ---- */
.cheers-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 2rem;
}

.cheers-banner .glass-left {
  animation: cheersLeft 3s ease-in-out infinite;
}

.cheers-banner .glass-right {
  animation: cheersRight 3s ease-in-out infinite;
}

.cheers-banner .splash {
  animation: splashIn 3s ease-in-out infinite;
  opacity: 0;
}

@keyframes splashIn {
  0%, 40%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
  60% { opacity: 0.5; transform: scale(1); }
}

/* ---- Reduce animations for users who prefer it ---- */
@media (prefers-reduced-motion: reduce) {
  .drink-float,
  .drink-bounce,
  .drink-wobble,
  .drink-pour,
  .drink-cheers-left,
  .drink-cheers-right,
  .hero-drink-item,
  .section-drink-accent,
  .liquid-sway,
  .straw-bob {
    animation: none !important;
    opacity: 0.1 !important;
  }
}