/* ============================================
   Brand Flow Animation - Soft Floating Colors
   Hunt for Bargains - Trustworthy & Elegant
   ============================================ */

/* Soft brand-matched floating colors background */
.brand-flow {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    #66BB6A, /* brand green */
    #FFD700, /* brand yellow */
    #FF6B35, /* brand orange */
    #4FC3F7, /* brand light blue */
    #10B981, /* brand green light */
    #FFA500, /* brand orange light */
    #66BB6A
  );
  animation: gentleSpin 55s linear infinite;
  opacity: 0.3;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

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

/* Additional soft floating effect */
.brand-flow-secondary {
  position: fixed;
  top: -30%;
  right: -30%;
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    rgba(102, 187, 106, 0.2) 0%, /* brand green */
    rgba(255, 215, 0, 0.18) 30%, /* brand yellow */
    rgba(255, 107, 53, 0.18) 60%, /* brand orange */
    rgba(79, 195, 247, 0.2) 100% /* brand light blue */
  );
  animation: gentleFloat 70s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.2;
  }
  25% {
    transform: translate(-5%, 5%) scale(1.05);
    opacity: 0.25;
  }
  50% {
    transform: translate(5%, -5%) scale(0.95);
    opacity: 0.18;
  }
  75% {
    transform: translate(-3%, -3%) scale(1.02);
    opacity: 0.22;
  }
}

/* Ensure body has relative positioning and no overflow issues */
body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Ensure all main content containers are above the animation */
body > *:not(.brand-flow):not(.brand-flow-secondary) {
  position: relative;
  z-index: 1;
}

/* Ensure header and navigation stay on top */
.header,
nav,
#header {
  position: relative;
  z-index: 100;
  background: inherit;
}

/* Ensure sections and cards maintain their backgrounds */
.section-shell,
.product-card,
.hero-shell,
.effort-section {
  position: relative;
  z-index: 1;
  background: inherit;
}

/* Mobile optimization - reduce blur and size for performance */
@media (max-width: 768px) {
  .brand-flow {
    filter: blur(40px);
    opacity: 0.3;
  }
  
  .brand-flow-secondary {
    filter: blur(30px);
    opacity: 0.15;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .brand-flow,
  .brand-flow-secondary {
    animation: none;
    opacity: 0.1;
  }
}