/* ─────────────────────────────────────────────
   Base
──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; }

/* ─────────────────────────────────────────────
   Navbar — transparent on hero, solid when scrolled
──────────────────────────────────────────── */
#navbar {
  background-color: transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

#navbar.scrolled {
  background-color: #0F1B2D;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Nav link — red underline on hover / active */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #D0231E;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: #ffffff;
}

/* ─────────────────────────────────────────────
   Hero slider transitions
──────────────────────────────────────────── */
.slide {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Ken Burns zoom on active slide background */
@keyframes kenburns {
  from { transform: scale(1)    translate(0,    0);    }
  to   { transform: scale(1.12) translate(-1%, 0.5%); }
}

.slide-bg {
  will-change: transform;
  transform: scale(1.12);
}

.slide.active .slide-bg {
  animation: kenburns 9s ease-out forwards;
}

/* ─────────────────────────────────────────────
   Hero text entrance animations
──────────────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-tag,
.hero-title,
.hero-body,
.hero-cta {
  opacity: 0;
}

.hero-animate .hero-tag   { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.10s forwards; }
.hero-animate .hero-title { animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards; }
.hero-animate .hero-body  { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards; }
.hero-animate .hero-cta   { animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.63s forwards; }

/* ─────────────────────────────────────────────
   Slide progress bar
──────────────────────────────────────────── */
@keyframes slideProgress {
  from { width: 0%;    }
  to   { width: 100%;  }
}

#slide-progress.running {
  animation: slideProgress 5s linear forwards;
}

/* ─────────────────────────────────────────────
   Dot — pill shape when active
──────────────────────────────────────────── */
.dot {
  transition: width 0.3s ease, background-color 0.3s ease;
}

.dot.active {
  width: 1.75rem;
  background-color: #D0231E;
}

/* ─────────────────────────────────────────────
   Scroll indicator
──────────────────────────────────────────── */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1);    }
  50%       { opacity: 0.8; transform: scaleY(1.15); }
}

.scroll-indicator {
  animation: fadeSlideIn 1s ease 1.2s both;
}

.scroll-line {
  transform-origin: top;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   Quick-link strip — left border on hover
──────────────────────────────────────────── */
.quick-link {
  border-left: 3px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}

.quick-link:hover {
  border-left-color: #D0231E;
}

/* ─────────────────────────────────────────────
   Partners strip — hide scrollbar but allow scroll
──────────────────────────────────────────── */
.partners-strip {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.partners-strip::-webkit-scrollbar {
  display: none;
}

.partner-logo {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.partner-logo:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────────
   Programme cards
──────────────────────────────────────────── */
.programme-card {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.programme-card:hover {
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   News cards
──────────────────────────────────────────── */
.news-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.news-card:hover {
  transform: translateY(-4px);
}

/* Partner logos */
.partner-logo {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.partner-logo:hover {
  transform: translateY(-2px);
  opacity: 1;
}

/* ─────────────────────────────────────────────
   Counter animation — hide until JS fires
──────────────────────────────────────────── */
.counter {
  will-change: content;
}

/* ─────────────────────────────────────────────
   Mobile menu transition
──────────────────────────────────────────── */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* override the Tailwind `hidden` for mobile menu
   so our transition still works */
#mobile-menu:not(.hidden) {
  display: block;
}

/* ─────────────────────────────────────────────
   Global Alumni Map — KL hub pulse ring
──────────────────────────────────────────── */
@keyframes klPulse {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(2.6); opacity: 0;    }
}

.kl-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: klPulse 2.4s ease-out infinite;
}

/* ─────────────────────────────────────────────
   Page Preloader
──────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0F1B2D;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader.pl-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Spinning ring wrapper */
.pl-ring-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer static track ring */
.pl-ring-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(208, 35, 30, 0.12);
}

/* Spinning arc */
.pl-ring-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #D0231E;
  border-right-color: rgba(208, 35, 30, 0.35);
  animation: pl-spin 1s linear infinite;
}

/* Inner glow disc */
.pl-ring-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208,35,30,0.08) 0%, transparent 70%);
  animation: pl-pulse-glow 2s ease-in-out infinite;
}

/* Logo image */
.pl-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 12px rgba(208, 35, 30, 0.55));
  animation: pl-breathe 2.2s ease-in-out infinite;
}

/* Label */
.pl-label {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.38em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
}

/* Progress bar */
.pl-track {
  width: 110px;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 99px;
  overflow: hidden;
}

.pl-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #D0231E, #ff4a45);
  border-radius: 99px;
  animation: pl-progress 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

@keyframes pl-breathe {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.07); opacity: 0.88; }
}

@keyframes pl-pulse-glow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

@keyframes pl-progress {
  0%   { width: 0%;   }
  35%  { width: 50%;  }
  65%  { width: 74%;  }
  85%  { width: 89%;  }
  100% { width: 100%; }
}

/* ─────────────────────────────────────────────
   Responsive helpers
──────────────────────────────────────────── */
@media (max-width: 640px) {
  #hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
}