/* ============================================
   Visual Enhancements - Colors, Animations & Effects
   ============================================ */

/* Animated Gradient Background */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating Particles Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-20px) translateX(10px) rotate(5deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-40px) translateX(-10px) rotate(-5deg);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-20px) translateX(5px) rotate(3deg);
    opacity: 0.8;
  }
}

/* Enhanced Light Beam Animation */
@keyframes lightBeam {
  0% {
    transform: translateX(-100%) translateY(-50%) rotate(45deg);
    opacity: 0;
  }
  5% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(200vw) translateY(-50%) rotate(45deg);
    opacity: 0;
  }
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(63, 122, 224, 0.3),
                0 0 40px rgba(63, 122, 224, 0.2),
                0 0 60px rgba(63, 122, 224, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(63, 122, 224, 0.5),
                0 0 60px rgba(63, 122, 224, 0.3),
                0 0 90px rgba(63, 122, 224, 0.2);
  }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Color Accent Animation */
@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* ============================================
   Body Enhancements
   ============================================ */

/* Body background - keep it simple/white */
body {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8faff 25%,
    #ffffff 50%,
    #f0f4ff 75%,
    #ffffff 100%
  );
  background-size: 400% 400%;
  animation: subtleGradientShift 20s ease infinite;
}

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

/* Floating Particles Container - Removed */

/* Enhanced Strolling Light Beams - Multiple colorful lights */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 300%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 107, 107, 0.3),
    rgba(78, 205, 196, 0.5),
    rgba(255, 230, 109, 0.6),
    rgba(170, 150, 218, 0.5),
    rgba(255, 107, 107, 0.3),
    transparent
  );
  animation: lightBeam 12s linear infinite;
  pointer-events: none;
  z-index: 2;
  transform: rotate(45deg);
  box-shadow: 0 0 30px rgba(78, 205, 196, 0.8),
              0 0 60px rgba(255, 230, 109, 0.6),
              0 0 90px rgba(170, 150, 218, 0.4);
}

/* Additional strolling light beams */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 250%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(236, 72, 153, 0.4),
    rgba(63, 122, 224, 0.6),
    rgba(149, 225, 211, 0.5),
    rgba(236, 72, 153, 0.4),
    transparent
  );
  animation: lightBeam 15s linear infinite reverse;
  pointer-events: none;
  z-index: 2;
  transform: rotate(-35deg);
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.7),
              0 0 80px rgba(63, 122, 224, 0.5);
}

/* ============================================
   Header Enhancements
   ============================================ */

.header {
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(63, 122, 224, 0.1);
  box-shadow: 0 4px 30px rgba(63, 122, 224, 0.1);
  transition: all 0.3s ease;
}

.header:hover {
  box-shadow: 0 6px 40px rgba(63, 122, 224, 0.15);
}

.logo-text {
  background: linear-gradient(
    135deg,
    #ff6b6b 0%,
    #4ecdc4 25%,
    #ffe66d 50%,
    #aa96da 75%,
    #ec4899 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.4));
}

.logo-text:hover {
  transform: scale(1.05);
  animation: gradientShift 2s ease infinite;
  filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.6));
}

/* ============================================
   Navigation Enhancements
   ============================================ */

.menu-link {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.menu-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(63, 122, 224, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.menu-link:hover::before {
  left: 100%;
}

.menu-link:hover {
  color: var(--ink);
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(147, 51, 234, 0.1) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(63, 122, 224, 0.2);
}

/* ============================================
   Product Card Enhancements
   ============================================ */

.product-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f0f4ff 100%);
  backdrop-filter: blur(10px);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 16px;
}

.product-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(63, 122, 224, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.product-card:hover::before {
  opacity: 1;
  animation: pulseGlow 2s ease-in-out infinite;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(63, 122, 224, 0.25),
              0 0 40px rgba(147, 51, 234, 0.15),
              0 0 0 3px rgba(63, 122, 224, 0.4),
              inset 0 0 0 1px rgba(147, 51, 234, 0.2);
  border-color: rgba(63, 122, 224, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 50%, #f8faff 100%);
}

.product-img {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.product-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.6s ease;
}

.product-card:hover .product-img::after {
  left: 100%;
  animation: shimmer 1.5s ease;
}

.product-card:hover .product-img {
  transform: scale(1.08) rotate(1deg);
  filter: brightness(1.1) saturate(1.2);
}

/* ============================================
   Button Enhancements
   ============================================ */

.btn-primary,
.hero-main-btn,
.add-to-cart {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #ff6b6b 0%,
    #4ecdc4 25%,
    #ffe66d 50%,
    #aa96da 75%,
    #ec4899 100%
  );
  background-size: 300% 300%;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4),
              0 0 30px rgba(78, 205, 196, 0.3);
  animation: buttonGradientShift 5s ease infinite;
  color: #fff;
  font-weight: 600;
}

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

.btn-primary::before,
.hero-main-btn::before,
.add-to-cart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:hover::before,
.hero-main-btn:hover::before,
.add-to-cart:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary:hover,
.hero-main-btn:hover,
.add-to-cart:hover {
  background-position: 100% 0%;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.6),
              0 0 40px rgba(78, 205, 196, 0.5),
              0 0 60px rgba(170, 150, 218, 0.4);
  animation: buttonGradientShift 2s ease infinite,
             pulseGlow 1.5s ease-in-out infinite;
  filter: brightness(1.1);
}

.btn-primary:active,
.hero-main-btn:active,
.add-to-cart:active {
  transform: translateY(0px);
}

/* ============================================
   Section Enhancements with Colorful Effects
   ============================================ */

.section-shell {
  position: relative;
  transition: all 0.3s ease;
}

.section-shell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 109, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(170, 150, 218, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(236, 72, 153, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.section-shell:hover::before {
  opacity: 1;
  animation: sectionColorPulse 3s ease-in-out infinite;
}

@keyframes sectionColorPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

.section-title {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    #ff6b6b 0%,
    #4ecdc4 25%,
    #ffe66d 50%,
    #aa96da 75%,
    #ec4899 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.section-title:hover {
  animation: gradientShift 3s ease infinite;
  filter: brightness(1.2);
}

/* ============================================
   Floating Decorative Elements
   ============================================ */

.floating-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.1;
  animation: float 15s ease-in-out infinite;
}

.floating-shape-1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #3f7ae0, transparent);
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.floating-shape-2 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #9333ea, transparent);
  top: 60%;
  right: 10%;
  animation-delay: 3s;
}

.floating-shape-3 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ec4899, transparent);
  bottom: 20%;
  left: 20%;
  animation-delay: 6s;
}

/* ============================================
   Scroll Animations
   ============================================ */

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

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* ============================================
   Price Badge Enhancements
   ============================================ */

.new-price {
  position: relative;
  color: #3f7ae0;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(63, 122, 224, 0.3);
}

.old-price {
  position: relative;
}

.old-price::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ec4899, #9333ea);
  transform: translateY(-50%);
  opacity: 0.6;
}

/* ============================================
   Input Field Enhancements
   ============================================ */

.form-control:focus {
  border-color: #3f7ae0;
  box-shadow: 0 0 0 0.2rem rgba(63, 122, 224, 0.25),
              0 0 20px rgba(63, 122, 224, 0.1);
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* ============================================
   Badge Enhancements
   ============================================ */

.badge {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.badge:hover::before {
  left: 100%;
}

.badge:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(63, 122, 224, 0.3);
}

/* ============================================
   Loading Spinner Enhancement
   ============================================ */

.spinner-border {
  border-color: #3f7ae0;
  border-right-color: transparent;
  animation: spinner-border 0.75s linear infinite,
             pulseGlow 2s ease-in-out infinite;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
  body::after,
  body::before {
    animation-duration: 15s;
    opacity: 0.3;
  }
  
  .floating-shape {
    opacity: 0.05;
  }
  
  .floating-orb {
    display: none;
  }
  
  .colorful-overlay {
    opacity: 0.3;
  }
  
  .product-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .sprinkle-container {
    display: none;
  }
}

/* ============================================
   Sprinkle Raining Animation
   ============================================ */

.sprinkle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.sprinkle {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.9;
  animation: sprinkle-fall linear infinite;
  z-index: 5;
}

/* Shape variations */
.sprinkle.shape-circle {
  border-radius: 50%;
}

.sprinkle.shape-square {
  border-radius: 2px;
}

.sprinkle.shape-diamond {
  border-radius: 0;
}

.sprinkle.shape-triangle {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid;
  border-radius: 0;
}

.sprinkle.shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 0;
}

.sprinkle.shape-hexagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
  border-radius: 0;
}

/* Size variations */
.sprinkle.small {
  width: 8px;
  height: 8px;
}

.sprinkle.small.shape-triangle {
  width: 0;
  height: 0;
  border-left-width: 4px;
  border-right-width: 4px;
  border-bottom-width: 7px;
}

.sprinkle.medium {
  width: 12px;
  height: 12px;
}

.sprinkle.medium.shape-triangle {
  width: 0;
  height: 0;
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 10px;
}

.sprinkle.large {
  width: 16px;
  height: 16px;
}

.sprinkle.large.shape-triangle {
  width: 0;
  height: 0;
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom-width: 14px;
}

@keyframes sprinkle-fall {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(calc(50vh)) translateX(var(--drift, 0px)) rotate(180deg);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(calc(var(--drift, 0px) * 2)) rotate(360deg);
    opacity: 0;
  }
}

/* Special rotation for square and diamond shapes */
@keyframes sprinkle-fall-square {
  0% {
    transform: translateY(-50px) translateX(0) rotate(45deg);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(calc(50vh)) translateX(var(--drift, 0px)) rotate(225deg);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(calc(var(--drift, 0px) * 2)) rotate(405deg);
    opacity: 0;
  }
}

.sprinkle.shape-square {
  animation: sprinkle-fall-square linear infinite;
}

.sprinkle.shape-diamond {
  animation: sprinkle-fall-square linear infinite;
}

/* Color variations for sprinkles - Enhanced visibility */
.sprinkle.color-1 {
  background: #ff6b6b;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.9),
              0 0 20px rgba(255, 107, 107, 0.6),
              0 0 30px rgba(255, 107, 107, 0.3);
}

.sprinkle.color-1.shape-triangle {
  border-bottom-color: #ff6b6b;
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.9),
              0 0 20px rgba(255, 107, 107, 0.6),
              0 0 30px rgba(255, 107, 107, 0.3);
}

.sprinkle.color-2 {
  background: #4ecdc4;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.9),
              0 0 20px rgba(78, 205, 196, 0.6),
              0 0 30px rgba(78, 205, 196, 0.3);
}

.sprinkle.color-2.shape-triangle {
  border-bottom-color: #4ecdc4;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.9),
              0 0 20px rgba(78, 205, 196, 0.6),
              0 0 30px rgba(78, 205, 196, 0.3);
}

.sprinkle.color-3 {
  background: #ffe66d;
  box-shadow: 0 0 10px rgba(255, 230, 109, 0.9),
              0 0 20px rgba(255, 230, 109, 0.6),
              0 0 30px rgba(255, 230, 109, 0.3);
}

.sprinkle.color-3.shape-triangle {
  border-bottom-color: #ffe66d;
  box-shadow: 0 0 10px rgba(255, 230, 109, 0.9),
              0 0 20px rgba(255, 230, 109, 0.6),
              0 0 30px rgba(255, 230, 109, 0.3);
}

.sprinkle.color-4 {
  background: #95e1d3;
  box-shadow: 0 0 10px rgba(149, 225, 211, 0.9),
              0 0 20px rgba(149, 225, 211, 0.6),
              0 0 30px rgba(149, 225, 211, 0.3);
}

.sprinkle.color-4.shape-triangle {
  border-bottom-color: #95e1d3;
  box-shadow: 0 0 10px rgba(149, 225, 211, 0.9),
              0 0 20px rgba(149, 225, 211, 0.6),
              0 0 30px rgba(149, 225, 211, 0.3);
}

.sprinkle.color-5 {
  background: #f38181;
  box-shadow: 0 0 10px rgba(243, 129, 129, 0.9),
              0 0 20px rgba(243, 129, 129, 0.6),
              0 0 30px rgba(243, 129, 129, 0.3);
}

.sprinkle.color-5.shape-triangle {
  border-bottom-color: #f38181;
  box-shadow: 0 0 10px rgba(243, 129, 129, 0.9),
              0 0 20px rgba(243, 129, 129, 0.6),
              0 0 30px rgba(243, 129, 129, 0.3);
}

.sprinkle.color-6 {
  background: #aa96da;
  box-shadow: 0 0 10px rgba(170, 150, 218, 0.9),
              0 0 20px rgba(170, 150, 218, 0.6),
              0 0 30px rgba(170, 150, 218, 0.3);
}

.sprinkle.color-6.shape-triangle {
  border-bottom-color: #aa96da;
  box-shadow: 0 0 10px rgba(170, 150, 218, 0.9),
              0 0 20px rgba(170, 150, 218, 0.6),
              0 0 30px rgba(170, 150, 218, 0.3);
}

.sprinkle.color-7 {
  background: #fcbad3;
  box-shadow: 0 0 10px rgba(252, 186, 211, 0.9),
              0 0 20px rgba(252, 186, 211, 0.6),
              0 0 30px rgba(252, 186, 211, 0.3);
}

.sprinkle.color-7.shape-triangle {
  border-bottom-color: #fcbad3;
  box-shadow: 0 0 10px rgba(252, 186, 211, 0.9),
              0 0 20px rgba(252, 186, 211, 0.6),
              0 0 30px rgba(252, 186, 211, 0.3);
}

.sprinkle.color-8 {
  background: #a8e6cf;
  box-shadow: 0 0 10px rgba(168, 230, 207, 0.9),
              0 0 20px rgba(168, 230, 207, 0.6),
              0 0 30px rgba(168, 230, 207, 0.3);
}

.sprinkle.color-8.shape-triangle {
  border-bottom-color: #a8e6cf;
  box-shadow: 0 0 10px rgba(168, 230, 207, 0.9),
              0 0 20px rgba(168, 230, 207, 0.6),
              0 0 30px rgba(168, 230, 207, 0.3);
}

.sprinkle.color-9 {
  background: #ffd3a5;
  box-shadow: 0 0 10px rgba(255, 211, 165, 0.9),
              0 0 20px rgba(255, 211, 165, 0.6),
              0 0 30px rgba(255, 211, 165, 0.3);
}

.sprinkle.color-9.shape-triangle {
  border-bottom-color: #ffd3a5;
  box-shadow: 0 0 10px rgba(255, 211, 165, 0.9),
              0 0 20px rgba(255, 211, 165, 0.6),
              0 0 30px rgba(255, 211, 165, 0.3);
}

.sprinkle.color-10 {
  background: #c7ceea;
  box-shadow: 0 0 10px rgba(199, 206, 234, 0.9),
              0 0 20px rgba(199, 206, 234, 0.6),
              0 0 30px rgba(199, 206, 234, 0.3);
}

.sprinkle.color-10.shape-triangle {
  border-bottom-color: #c7ceea;
  box-shadow: 0 0 10px rgba(199, 206, 234, 0.9),
              0 0 20px rgba(199, 206, 234, 0.6),
              0 0 30px rgba(199, 206, 234, 0.3);
}

/* ============================================
   Colorful Floating Orbs
   ============================================ */

.floating-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.6;
  animation: orbFloat 20s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translate(30px, -30px) scale(1.2);
    opacity: 0.6;
  }
  50% {
    transform: translate(-20px, 20px) scale(0.8);
    opacity: 0.5;
  }
  75% {
    transform: translate(20px, 30px) scale(1.1);
    opacity: 0.7;
  }
}

.orb-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.8), rgba(255, 107, 107, 0.2));
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.orb-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.8), rgba(78, 205, 196, 0.2));
  top: 60%;
  right: 10%;
  animation-delay: 5s;
}

.orb-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 230, 109, 0.8), rgba(255, 230, 109, 0.2));
  bottom: 20%;
  left: 20%;
  animation-delay: 10s;
}

.orb-4 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(170, 150, 218, 0.8), rgba(170, 150, 218, 0.2));
  top: 40%;
  right: 30%;
  animation-delay: 15s;
}

.orb-5 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.8), rgba(236, 72, 153, 0.2));
  bottom: 10%;
  right: 20%;
  animation-delay: 7s;
}

/* ============================================
   Colorful Gradient Background Overlay
   ============================================ */

.colorful-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 109, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(170, 150, 218, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(236, 72, 153, 0.12) 0%, transparent 50%);
  animation: gradientPulse 15s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes gradientPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* ============================================
   Performance Optimizations
   ============================================ */

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