/* --- 5. HORIZONTAL LINES --- */

hr {
  border: 0;
  height: 2px;
  /* Use rgba(0, 0, 0, 0.2) for a subtle dark gray that works on white backgrounds */
  background: linear-gradient(to right, transparent, rgba(70, 29, 124, 0.5), transparent);
  margin: 25px auto;
  width: 100%;
}
hr.red {
  background: linear-gradient(to right, transparent, rgba(255, 0, 0, 0.5), transparent);
}
hr.thin {
  border-top: 1px solid #ccc;
  background: none;
  margin: 30px 0;
}
hr.thick {
  border-top: 4px solid #461d7c;
  background: none;
  margin: 40px 0;
}
hr.dotted {
  border-top: 2px dotted #888;
  background: none;
  margin: 35px 0;
}



.lsu-bar {
    background-color: #fdd023; /* LSU Purple */
    border: 1px solid #461d7c;   /* LSU Gold */
    width: 100%;
    height: 10px;               /* Adjust thickness here */
    box-sizing: border-box;     /* Keeps the border inside the 100% width */
    margin: 30px 0;             /* Adds a little space above and below */
}






    /* -------------------------------- */
    /* 6. Metallic Shine Bar */
    /* -------------------------------- */

    .bar1, .bar2 {
      position: relative;
      overflow: hidden;
      height: 16px;
      width: 100%;

      background: linear-gradient(
        90deg,
        #444,
        #999,
        #eee,
        #999,
        #444
      );
    }

    .bar1 {
margin-top: 40px;
margin-bottom: 60px;
}
    .bar2 {
margin-top: 0px;
margin-bottom: 0px;
}

    .bar2::after {
      content: "";
      position: absolute;
      top: 0;
      left: -40%;
      width: 40%;
      height: 100%;
      background: rgba(255,255,255,0.5);
      transform: skewX(-20deg);
      animation: shine 5s infinite;
    }

    @keyframes shine {
      to {
        left: 140%;
      }
    }




/* New Wave : Uses the SVG */

.wave-up, .wave-down {
  width: 100%;
  height: 105px; /* Matches the SVG viewBox height */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -50px;
  margin-bottom: 0px;

}

/* Wave Up: Uses the SVG background and rotates it 180 degrees */
.wave-up {
  display: block;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 105' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23333'/%3E%3Cstop offset='50%25' stop-color='%23888'/%3E%3Cstop offset='100%25' stop-color='%23ddd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g1)' d='M0,64L80,58.7C160,53,320,43,480,53.3C640,64,800,96,960,96C1120,96,1280,64,1360,48L1440,32V120H0Z'/%3E%3C/svg%3E");
}

/* Wave Down: Uses the SVG background oriented normally */
.wave-down {
  display: block;
  transform: scaleX(1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 105' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23333'/%3E%3Cstop offset='50%25' stop-color='%23888'/%3E%3Cstop offset='100%25' stop-color='%23ddd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g2)' d='M0,64L80,58.7C160,53,320,43,480,53.3C640,64,800,96,960,96C1120,96,1280,64,1360,48L1440,32V120H0Z'/%3E%3C/svg%3E");
}

/* Smartphone Mode (Title bar, title, and subtitle) */
@media screen and (max-width: 768px) {
.wave-up, .wave-down {
  height: 50px;
  margin-top: -20px;
  margin-bottom: 10px;
  }
}


/* --- 11. RESPONSIVE / MOBILE --- */
@media (max-width: 768px) {

  /* Fixed naming mismatch: changed from .hr-thin to hr.thin to match desktop */
  hr.thin {
    border-top-color: #666;
  }
  hr.thick {
    border-top-color: #fdd023;
  }
  hr.dotted {
    border-top-color: #777;
  }

  hr {
    background: linear-gradient(to right, transparent, rgba(253, 208, 35, 0.5), transparent);
  }

.lsu-bar {
    background-color: black; /* LSU Purple */
    border: 1px solid white;   /* LSU Gold */
}

}