/*  Rainbow only behind the navbar */
header {
    position: relative;
    z-index: 1;
  }

  /* Rainbow layer — covers the full navbar width + height */
  .navbar-rainbow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* <-- fills entire header */
    overflow: hidden;
    z-index: 0; /* sits behind navbar text */
  }

  /* Rainbow animation bars */
  .navbar-rainbow .rainbow {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    transform: rotate(10deg);
    transform-origin: top right;
    animation: navbar-slide 45s linear infinite;
    opacity: 0.9;
  }

  /* Individual beams with slight delay + color shifts */
  .navbar-rainbow .rainbow:nth-child(1) {
    box-shadow: -130px 0 80px 40px white,
                -50px 0 50px 25px rgb(232 121 249),
                0 0 50px 25px rgb(96 165 250),
                50px 0 50px 25px rgb(94 234 212),
                130px 0 80px 40px white;
    animation-delay: -2s;
  }
  .navbar-rainbow .rainbow:nth-child(2) {
    box-shadow: -130px 0 80px 40px white,
                -50px 0 50px 25px rgb(96 165 250),
                0 0 50px 25px rgb(94 234 212),
                50px 0 50px 25px rgb(232 121 249),
                130px 0 80px 40px white;
    animation-delay: -4s;
  }
  .navbar-rainbow .rainbow:nth-child(3) {
    box-shadow: -130px 0 80px 40px white,
                -50px 0 50px 25px rgb(94 234 212),
                0 0 50px 25px rgb(232 121 249),
                50px 0 50px 25px rgb(96 165 250),
                130px 0 80px 40px white;
    animation-delay: -6s;
  }

  /* 🌈 Fade field between navbar animation and main content */
.navbar-fade-field {
    height: 7px; /* adjust for smoother/longer fade */
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(245, 245, 245, 0) 0%,     /* transparent top (shows rainbow) */
      rgb(189, 203, 252) 20%    /* solid bottom (matches page background) */
    );
    position: relative;
    z-index: 1;
    margin-top: -5px; /* optional: blend perfectly with navbar */
  }


  /* Movement across the navbar width */
  @keyframes navbar-slide {
    from { right: -30vw; }
    to { right: 130vw; }
  }

  /* Navbar sits above rainbow */
  .navbar.container {
    position: relative;
    z-index: 2;
    background: rgba(0, 81, 255, 0.621);
    color: white;
  }

  /* Restore scroll */
  body { overflow: auto; }