/* =============================================================
   HPS Kadapa - new-design custom CSS
   Companion to Tailwind CDN
   ============================================================= */

html { scroll-behavior: smooth; }

.font-display { font-family: 'Playfair Display', Georgia, serif; }

/* ---- Section entry animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Gold underline link ---- */
.link-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.link-gold::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 1px; width: 100%;
  background: #C9A227;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.link-gold:hover::after { transform: scaleX(1); }

/* ---- Image zoom on hover ---- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.03); }

/* ---- Header transparent -> solid on scroll ---- */
/*#siteHeader {*/
/*  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;*/
/*}*/
/*#siteHeader.solid {*/
  /*background: rgba(11, 31, 58, .96);*/
/*  background: #001845;*/
/*  backdrop-filter: blur(8px);*/
/*  -webkit-backdrop-filter: blur(8px);*/
/*  border-bottom: 1px solid rgba(201, 162, 39, .35);*/
/*}*/

#siteHeader {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

#siteHeader.solid {
  background: rgb(4 48 108 / 96%);
  border-bottom: 1px solid rgba(201, 162, 39, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Megamenu hover reveal (unused in current header, kept for legacy) ---- */
.mega { display: none; }
.has-mega:hover .mega { display: block; }

/* =============================================================
   FULL-SCREEN MENU OVERLAY
   ============================================================= */
#mobileMenu {
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;               /* critical: doesn't block clicks when closed */
  transition: transform .4s ease, visibility .4s ease;
}
#mobileMenu.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* ---- Accordion subitems inside the overlay ---- */
.m-sub { display: none; }
.m-group.open > .m-sub { display: block; }

.m-group > .m-toggle {
  position: relative;
  padding-right: 2rem;
}
.m-group > .m-toggle::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #C9A227;
  transition: content .2s;
}
.m-group.open > .m-toggle::after { content: "\2212"; }  /* U+2212 minus sign */

/* ---- Desktop: two-column layout of the overlay's main list ---- */
@media (min-width: 1024px) {
  #mobileMenu nav.m-main { column-count: 2; column-gap: 4rem; }
  #mobileMenu nav.m-main > .m-item { break-inside: avoid; margin-bottom: 1.5rem; }
}

/* ---- Hero overlay gradient ---- */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(11,31,58,.15) 0%,
    rgba(11,31,58,.35) 45%,
    rgba(11,31,58,.85) 100%
  );
}

/* ---- Scroll cue ---- */
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(8px); opacity: .3; }
}
.scroll-cue { animation: cue 2s ease-in-out infinite; }

/* ---- Hero slides (crossfade) ---- */
.hero-slider .slide {
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero-slider .slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Hero text stack ---- */
.hero-text-stack { position: relative; }
.hero-text-item { display: none; }
.hero-text-item.active { display: block; }

/* ---- Slider indicators ---- */
.slider-indicators .indicator {
  opacity: .35;
  transition: opacity .3s, background-color .3s;
}
.slider-indicators .indicator.active,
.slider-indicators .indicator:hover {
  opacity: 1;
  background-color: #C9A227;
}

/* ---- Screen-reader-only ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================================
   HERO — Ken Burns zoom-out on the background image
   ============================================================= */

/* Each slide's background starts at a slightly larger scale
   and slowly zooms back to normal. Active slides get the
   animation; inactive slides are reset. */
.hero-slider .slide .slide-bg {
  transform: scale(1);
  transition: transform 8s ease-out, opacity 1.2s ease;
  opacity: 0;
}

.hero-slider .slide.active .slide-bg {
  transform: scale(1);
  animation: heroZoomOut 8s ease-out forwards;
  opacity: 1;
}

/* Start scaled up, end at normal size — the "zoom out" effect */
@keyframes heroZoomOut {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1.00); }
}

/* Text fades in a beat after the image starts */
.hero-text-item {
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-text-item.active {
  opacity: 1;
  transition-delay: .35s;
}

.hero-overlay {
  background: rgba(11, 31, 58, 0.55);
}


/* =============================================================
   ACCREDITATIONS MARQUEE
   ============================================================= */

/* The animation moves the track from 0 to -50% (since we duplicated the items) */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 35s linear infinite;
}

/* Pause the marquee when the user hovers over it */
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Adds a smooth fade to the left and right edges so logos appear/disappear gracefully */
.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}