/* ============================================
   TSU PREMIUM LIGHTWEIGHT HERO BACKGROUND
   Looks lively like video, but uses only CSS.
   No heavy image/video loading.
   ============================================ */

/* Main animated hero background */
.hero,
.hero-home {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(0, 188, 212, 0.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 107, 53, 0.16), transparent 30%),
    radial-gradient(circle at 55% 82%, rgba(0, 151, 167, 0.18), transparent 34%),
    linear-gradient(135deg, #071625 0%, #09192b 42%, #0d2137 72%, #062f38 100%) !important;
}

/* Soft moving glow layer */
.hero::before,
.hero-home::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 35%, rgba(0, 188, 212, 0.18), transparent 25%),
    radial-gradient(circle at 75% 30%, rgba(255, 107, 53, 0.11), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(0, 151, 167, 0.16), transparent 28%);
  filter: blur(28px);
  opacity: 0.9;
  animation: tsuHeroGlowMove 18s ease-in-out infinite alternate;
}

/* Subtle technical grid/light pattern */
.hero::after,
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.08), transparent 48%);
  background-size: 54px 54px, 54px 54px, 100% 100%;
  opacity: 0.42;
  animation: tsuHeroGridDrift 28s linear infinite;
}

/* Keep content above animation */
.hero .container,
.hero .hero-content,
.hero-home .container,
.hero-home .hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Good readable overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(7, 22, 37, 0.62),
      rgba(9, 25, 43, 0.36)
    ) !important;
}

/* Rebuild hero-lights as lightweight animated floating lights */
.hero-lights {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-lights .light,
.hero-lights span.light,
.hero-lights div.light {
  display: block !important;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 188, 212, 0.62);
  box-shadow:
    0 0 14px rgba(0, 188, 212, 0.55),
    0 0 34px rgba(0, 151, 167, 0.25);
  opacity: 0.55 !important;
  transform: none;
  animation: tsuHeroParticleFloat 12s ease-in-out infinite;
}

/* Different positions for existing light elements */
.hero-lights .light:nth-child(1) {
  left: 12%;
  top: 24%;
  animation-delay: 0s;
}

.hero-lights .light:nth-child(2) {
  left: 72%;
  top: 22%;
  width: 7px;
  height: 7px;
  background: rgba(255, 107, 53, 0.62);
  box-shadow:
    0 0 14px rgba(255, 107, 53, 0.45),
    0 0 34px rgba(255, 107, 53, 0.18);
  animation-delay: 2s;
}

.hero-lights .light:nth-child(3) {
  left: 44%;
  top: 68%;
  width: 10px;
  height: 10px;
  animation-delay: 4s;
}

.hero-lights .light:nth-child(4) {
  left: 86%;
  top: 62%;
  width: 6px;
  height: 6px;
  animation-delay: 6s;
}

.hero-lights .light:nth-child(5) {
  left: 24%;
  top: 78%;
  width: 8px;
  height: 8px;
  animation-delay: 8s;
}

/* Animations */
@keyframes tsuHeroGlowMove {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }

  50% {
    transform: translate3d(3%, 2%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.02);
  }
}

@keyframes tsuHeroGridDrift {
  from {
    background-position: 0 0, 0 0, center;
  }

  to {
    background-position: 54px 54px, 54px 54px, center;
  }
}

@keyframes tsuHeroParticleFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.45;
  }

  50% {
    transform: translate3d(18px, -22px, 0) scale(1.25);
    opacity: 0.85;
  }
}

/* Admin controls should appear immediately when admin mode is active */
body.admin-mode .admin-section-controls,
body.admin-mode .admin-item-controls,
body.admin-mode .publication-admin-controls,
body.admin-mode .team-item-controls,
body.admin-mode .alumni-item-controls,
body.admin-mode .contact-admin-topbar {
  visibility: visible;
}

/* Respect users/devices that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero-home::before,
  .hero-home::after,
  .hero-lights .light {
    animation: none !important;
  }
}

/* Reduce animation strength on small/mobile devices */
@media (max-width: 768px) {
  .hero::before,
  .hero-home::before {
    filter: blur(34px);
    opacity: 0.65;
    animation-duration: 24s;
  }

  .hero::after,
  .hero-home::after {
    opacity: 0.28;
    animation-duration: 36s;
  }

  .hero-lights .light {
    opacity: 0.36 !important;
    animation-duration: 18s;
  }
}
/* ============================================
   MOBILE NAVIGATION FIX
   ============================================ */

.navbar {
  z-index: 9999 !important;
}

.navbar .container {
  overflow: visible !important;
}

.menu-toggle {
  z-index: 10001 !important;
}

@media (min-width: 769px) {
  .navbar-links {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex !important;
    position: relative !important;
    width: 34px;
    height: 28px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block !important;
    width: 26px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .navbar.scrolled .menu-toggle span,
  .navbar:not(.hero-transparent) .menu-toggle span {
    background: var(--color-gray-900, #111827);
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .navbar-links {
    position: fixed !important;
    top: 64px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 10000 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;

    padding: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(229, 231, 235, 0.95) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22) !important;
    backdrop-filter: blur(14px);

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px) scale(0.98) !important;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
  }

  .navbar-links.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .navbar-links a {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    color: var(--color-gray-800, #1f2937) !important;
    font-weight: 800 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .navbar-links a:hover,
  .navbar-links a.active {
    background: rgba(0, 151, 167, 0.1) !important;
    color: var(--color-teal, #0097a7) !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}