/* ============================================
   Interactive Background – Maid in Nepal
   Project-themed: house helpers, Nepal, trust, home
   Elements: Himalayan peaks, prayer flags, homes, connection dots
   ============================================ */

/* Ensure interactive bg shows – override any body/html background */
html.has-interactive-bg,
body.has-interactive-bg {
  background: transparent !important;
  min-height: 100vh;
}

:root {
  --ibg-mouse-x: 50%;
  --ibg-mouse-y: 50%;
  --ibg-brand: #047857;
  --ibg-brand-light: #059669;
}

#interactive-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Base gradient – fresh, home-like (Maid in Nepal brand greens + warm) */
#interactive-bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: 
    linear-gradient(
      165deg,
      #f0fdf4 0%,
      #ecfdf5 15%,
      #f0f9ff 35%,
      #f8fafc 50%,
      #ecfdf5 70%,
      #f0fdf4 85%,
      #ecfdf5 100%
    );
  background-size: 400% 400%;
  animation: ibgGradientShift 20s ease-in-out infinite;
}

/* Mouse-reactive glow – follows cursor */
#interactive-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 65% at var(--ibg-mouse-x) var(--ibg-mouse-y),
    rgba(5, 150, 105, 0.2) 0%,
    rgba(16, 185, 129, 0.1) 35%,
    rgba(34, 197, 94, 0.05) 55%,
    transparent 75%
  );
  transition: opacity 0.5s ease;
}

/* Floating orbs – brand green + soft teal (trust, fresh, home) */
.ibg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  opacity: 0.5;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ibg-orb-1 {
  width: clamp(200px, 35vw, 400px);
  height: clamp(200px, 35vw, 400px);
  background: radial-gradient(circle, rgba(5, 150, 105, 0.35) 0%, rgba(16, 185, 129, 0.15) 50%, transparent 70%);
  top: 5%;
  left: 10%;
  animation: ibgFloat1 14s ease-in-out infinite;
}

.ibg-orb-2 {
  width: clamp(180px, 30vw, 350px);
  height: clamp(180px, 30vw, 350px);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(34, 197, 94, 0.12) 50%, transparent 70%);
  top: 50%;
  right: 5%;
  animation: ibgFloat2 16s ease-in-out infinite;
}

.ibg-orb-3 {
  width: clamp(150px, 26vw, 280px);
  height: clamp(150px, 26vw, 280px);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.28) 0%, rgba(74, 222, 128, 0.1) 50%, transparent 70%);
  bottom: 10%;
  left: 18%;
  animation: ibgFloat3 15s ease-in-out infinite;
}

.ibg-orb-4 {
  width: clamp(120px, 20vw, 220px);
  height: clamp(120px, 20vw, 220px);
  background: radial-gradient(circle, rgba(167, 243, 208, 0.35) 0%, rgba(187, 247, 208, 0.15) 50%, transparent 70%);
  top: 28%;
  right: 22%;
  animation: ibgFloat4 12s ease-in-out infinite;
}

.ibg-orb-5 {
  width: clamp(90px, 16vw, 160px);
  height: clamp(90px, 16vw, 160px);
  background: radial-gradient(circle, rgba(5, 150, 105, 0.25) 0%, transparent 65%);
  top: 68%;
  left: 48%;
  animation: ibgFloat5 11s ease-in-out infinite;
}

/* Soft clouds – gentle movement */
.ibg-clouds {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(ellipse 110px 38px at 12% 15%, rgba(255, 255, 255, 0.75) 0%, transparent 70%),
    radial-gradient(ellipse 95px 32px at 88% 22%, rgba(255, 255, 255, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 85px 28px at 72% 78%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 75px 26px at 22% 68%, rgba(255, 255, 255, 0.55) 0%, transparent 55%);
  background-size: 100% 100%;
  animation: ibgCloudsFloat 24s ease-in-out infinite;
  opacity: 0.92;
}

/* Himalayan peaks – Nepal */
.ibg-mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  min-height: 130px;
  background: 
    linear-gradient(140deg, transparent 40%, rgba(5, 150, 105, 0.06) 44%, transparent 48%) 0 100% / 30% 100% no-repeat,
    linear-gradient(152deg, transparent 46%, rgba(16, 185, 129, 0.05) 50%, transparent 54%) 30% 100% / 26% 100% no-repeat,
    linear-gradient(158deg, transparent 42%, rgba(34, 197, 94, 0.04) 46%, transparent 50%) 56% 100% / 28% 100% no-repeat,
    linear-gradient(148deg, transparent 48%, rgba(5, 150, 105, 0.03) 52%, transparent 56%) 84% 100% / 16% 100% no-repeat;
  animation: ibgMountainsShift 26s ease-in-out infinite;
  pointer-events: none;
}

/* Prayer flags – Nepal tradition */
.ibg-prayer-flags {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 100%;
  background: repeating-linear-gradient(
    102deg,
    transparent 0px,
    transparent 6px,
    rgba(5, 150, 105, 0.08) 6px,
    rgba(5, 150, 105, 0.08) 8px
  ),
  repeating-linear-gradient(
    102deg,
    transparent 2px,
    transparent 8px,
    rgba(16, 185, 129, 0.06) 8px,
    rgba(16, 185, 129, 0.06) 10px
  ),
  repeating-linear-gradient(
    102deg,
    transparent 4px,
    transparent 10px,
    rgba(34, 197, 94, 0.05) 10px,
    rgba(34, 197, 94, 0.05) 12px
  );
  animation: ibgFlagsWave 7s ease-in-out infinite;
  opacity: 0.65;
}

/* Connection dots – clients & helpers linking (project theme) */
.ibg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 18% 28%, rgba(5, 150, 105, 0.04) 0%, transparent 3%),
    radial-gradient(circle at 82% 72%, rgba(16, 185, 129, 0.035) 0%, transparent 3%),
    radial-gradient(circle at 48% 52%, rgba(34, 197, 94, 0.03) 0%, transparent 2.5%),
    radial-gradient(circle at 75% 25%, rgba(5, 150, 105, 0.025) 0%, transparent 2%),
    radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.025) 0%, transparent 2%);
  background-size: 50px 50px, 70px 70px, 90px 90px, 60px 60px, 80px 80px;
  animation: ibgPatternPulse 14s ease-in-out infinite;
}

/* Sparkles – clean, fresh (home care) */
.ibg-bubbles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.7) 0%, transparent 2%),
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.6) 0%, transparent 1.8%),
    radial-gradient(circle at 70% 85%, rgba(255, 255, 255, 0.65) 0%, transparent 2%),
    radial-gradient(circle at 28% 70%, rgba(255, 255, 255, 0.55) 0%, transparent 1.8%),
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.4) 0%, transparent 1.4%);
  animation: ibgBubblesPulse 10s ease-in-out infinite;
}

/* Keyframes */
@keyframes ibgGradientShift {
  0%, 100% { background-position: 0% 50%; }
  33% { background-position: 100% 30%; }
  66% { background-position: 50% 100%; }
}

@keyframes ibgFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(22px, -18px) scale(1.05); }
}

@keyframes ibgFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18px, 16px) scale(1.06); }
}

@keyframes ibgFloat3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(16px, 10px) scale(1.04); }
}

@keyframes ibgFloat4 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10px, -14px) scale(1.03); }
}

@keyframes ibgFloat5 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(12px, -8px) scale(1.02); }
}

@keyframes ibgCloudsFloat {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(6px) translateY(-4px); }
  50% { transform: translateX(-4px) translateY(6px); }
  75% { transform: translateX(4px) translateY(2px); }
}

@keyframes ibgMountainsShift {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(2px); }
}

@keyframes ibgFlagsWave {
  0%, 100% { transform: skewX(0deg); opacity: 0.65; }
  50% { transform: skewX(-0.8deg); opacity: 0.55; }
}

@keyframes ibgPatternPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

@keyframes ibgBubblesPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  #interactive-bg::before,
  .ibg-orb,
  .ibg-clouds,
  .ibg-mountains,
  .ibg-prayer-flags,
  .ibg-pattern,
  .ibg-bubbles {
    animation: none !important;
  }
}

/* Content above background */
body > .container,
body > main,
body > header,
body > footer,
body > .wrap,
body > .nav,
body > .page,
body > .toast-container,
body > #toast {
  position: relative;
  z-index: 1;
}
/* Chatbot: must stay fixed bottom-right, never override */
#chatbot-wrap {
  position: fixed !important;
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
}
@keyframes chatbot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(5,150,105,0.4), 0 0 20px rgba(5,150,105,0.25); }
  50% { transform: scale(1.05); box-shadow: 0 6px 24px rgba(5,150,105,0.5), 0 0 32px rgba(5,150,105,0.4), 0 0 48px rgba(34,197,94,0.25); }
}
#chatbot-toggle {
  animation: chatbot-pulse 2.5s ease-in-out infinite;
  -webkit-animation: chatbot-pulse 2.5s ease-in-out infinite;
}
@media (max-width: 640px) {
  #chatbot-wrap { bottom: 3.25rem !important; }
  #chatbot-panel { bottom: 6.5rem !important; }
}