/* ================= COLLEGE LOADER ================= */
#college-loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(rgb(225, 27, 34), #020202 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 8;
}

@keyframes bgPulse {
  0%,
  100% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
}

/* Container */
.loader-box {
  text-align: center;
  transform: translateY(10px);
  animation: boxFloat 3.5s ease-in-out infinite;
}

/* College name */
.loader-box h1 {
  font-family: EB Garamond;
  font-weight: 400;
  font-style: Regular;
  font-size: 36px;

  letter-spacing: 1.2px;
  color: #f5f0f0;
  animation: textFade 2.8s ease-in-out infinite;
}

/* Academic underline */
.loader-box .line {
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #e11b22, #f8f8f8);
  margin: 14px auto 32px;
  border-radius: 2px;
  animation: lineGrow 2.8s ease-in-out infinite;
}

/* ================= MODERN RING ================= */
.ring {
  width: 66px;
  height: 66px;
  border: 3px solid rgba(28, 63, 148, 0.15);
  border-top-color: #1c3f94;
  border-radius: 50%;
  animation: rotate 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  margin: auto;
  position: relative;
}

/* Soft glow */
.ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 19, 19, 0.18), transparent 65%);
  opacity: 0.6;
  animation: glowPulse 2.8s ease-in-out infinite;
}

/* Loading text */
.loader-box p {
  margin-top: 22px;
  font-family: Outfit;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;

  color: #f5f0f0;
  letter-spacing: 0.6px;
  animation: textBlink 2.2s ease-in-out infinite;
}

/* ================= ANIMATIONS ================= */

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes boxFloat {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
  }
}

@keyframes textFade {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes lineGrow {
  0%,
  100% {
    width: 70px;
  }
  50% {
    width: 100px;
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes textBlink {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}