/* molentje-bg.css */
:root {
  /* Colors extracted directly from your image */
  --sky-blue: #7dc9f4;
  --tulip-red: #e52e42;
  --tulip-yellow: #ffcc33;
  --tulip-purple: #8a41a4;
  --tulip-pink: #f178b6;
  --field-green: #8dbd41;
  --cloud-white: #ffffff;
}

.vibrant-landscape-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: var(--cloud-white);

  /* Layering gradients to mimic sky and fields */
  background-image:
    /* Bottom Field: Pink and Red highlights */
    radial-gradient(at 10% 90%, var(--tulip-pink) 0px, transparent 40%),
    radial-gradient(at 90% 95%, var(--tulip-red) 0px, transparent 40%),

    /* Mid Field: Yellow and Purple highlights */
    radial-gradient(at 30% 70%, var(--tulip-yellow) 0px, transparent 40%),
    radial-gradient(at 70% 75%, var(--tulip-purple) 0px, transparent 40%),

    /* Top: Sky and Greenery */
    radial-gradient(at 50% 0%, var(--sky-blue) 0px, transparent 60%),
    radial-gradient(at 0% 50%, var(--field-green) 0px, transparent 30%),
    radial-gradient(at 100% 50%, var(--field-green) 0px, transparent 30%);

  background-attachment: fixed;
}

/* Adds a soft glass-morphism overlay to ensure text is always readable */
.vibrant-landscape-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
}