/* ===================================
   Resources Warm Theme - Background Atmosphere
   =================================== */

.resources-homepage {
  position: relative;
  background: var(--resources-bg-warm);
  overflow-x: hidden; /* Prevent horizontal scroll only - allow vertical scroll */
}

/* Noise Texture Overlay */
.resources-homepage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Morphing Background Blobs */
.resources-homepage::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
}

.morphing-blob-1 {
  position: fixed;
  top: -200px;
  left: -200px;
  width: 400px;
  height: 400px;
  background: var(--resources-coral);
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  filter: blur(40px);
  opacity: 0.08;
  pointer-events: none;
  animation: morph-1 15s infinite ease-in-out;
  z-index: 0;
}

.morphing-blob-2 {
  position: fixed;
  top: 50%;
  right: -175px;
  width: 350px;
  height: 350px;
  background: var(--resources-amber);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  filter: blur(40px);
  opacity: 0.08;
  pointer-events: none;
  animation: morph-2 18s infinite ease-in-out;
  z-index: 0;
}

.morphing-blob-3 {
  position: fixed;
  bottom: -150px;
  left: 50%;
  width: 300px;
  height: 300px;
  background: var(--resources-mint);
  border-radius: 60% 40% 30% 70% / 60% 30% 30% 60%;
  filter: blur(40px);
  opacity: 0.08;
  pointer-events: none;
  animation: morph-3 20s infinite ease-in-out;
  z-index: 0;
}

.morphing-blob-4 {
  position: fixed;
  top: 30%;
  left: 30%;
  width: 350px;
  height: 350px;
  background: var(--resources-lavender);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(40px);
  opacity: 0.08;
  pointer-events: none;
  animation: morph-4 22s infinite ease-in-out;
  z-index: 0;
}

/* Morphing Animations */
@keyframes morph-1 {
  0%, 100% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%;
    transform: translate(20px, -20px) rotate(90deg);
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: translate(-15px, 15px) rotate(180deg);
  }
  75% {
    border-radius: 50% 30% 60% 40% / 30% 60% 70% 40%;
    transform: translate(-20px, -10px) rotate(270deg);
  }
}

@keyframes morph-2 {
  0%, 100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform: translate(-25px, 15px) rotate(120deg);
  }
  66% {
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    transform: translate(15px, -25px) rotate(240deg);
  }
}

@keyframes morph-3 {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 30% 60%;
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    border-radius: 40% 60% 70% 30% / 40% 70% 60% 30%;
    transform: translate(18px, -18px) rotate(90deg);
  }
  50% {
    border-radius: 70% 30% 40% 60% / 30% 40% 70% 60%;
    transform: translate(-12px, 12px) rotate(180deg);
  }
  75% {
    border-radius: 30% 70% 60% 40% / 70% 30% 40% 70%;
    transform: translate(-18px, -12px) rotate(270deg);
  }
}

@keyframes morph-4 {
  0%, 100% {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    transform: translate(22px, -22px) rotate(72deg);
  }
  40% {
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    transform: translate(-16px, 16px) rotate(144deg);
  }
  60% {
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    transform: translate(16px, -16px) rotate(216deg);
  }
  80% {
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    transform: translate(-22px, 22px) rotate(288deg);
  }
}

/* Dark mode adjustments */
html.dark-mode .resources-homepage {
  background: var(--resources-bg-warm);
}

html.dark-mode .resources-homepage::before {
  opacity: 0.02;
}

html.dark-mode .morphing-blob-1,
html.dark-mode .morphing-blob-2,
html.dark-mode .morphing-blob-3,
html.dark-mode .morphing-blob-4 {
  opacity: 0.05;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .morphing-blob-1,
  .morphing-blob-2,
  .morphing-blob-3,
  .morphing-blob-4 {
    animation: none;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .morphing-blob-1,
  .morphing-blob-2,
  .morphing-blob-3,
  .morphing-blob-4 {
    opacity: 0.04;
  }
  
  html.dark-mode .morphing-blob-1,
  html.dark-mode .morphing-blob-2,
  html.dark-mode .morphing-blob-3,
  html.dark-mode .morphing-blob-4 {
    opacity: 0.03;
  }
}