/* =========================================================
   PAGE PRELOADER  (logo pop-in → zoom → reveal)
   ========================================================= */

.is-loading,
.is-loading body {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      1200px 600px at 50% 40%,
      #131a33 0%,
      var(--dark) 60%,
      #05070f 100%
    );

  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

.preloader-logo {
  width: min(52vw, 220px);
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  padding: 0;
  border-radius: 50%;
  overflow: hidden;

  background: #ffffff;

  box-shadow:
    0 0 0 6px rgba(91, 92, 240, 0.28),
    0 0 0 12px rgba(91, 92, 240, 0.14),
    0 0 60px rgba(91, 92, 240, 0.55),
    0 20px 50px rgba(0, 0, 0, 0.45);

  /* pop-in */
  animation: preloaderPop 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preloader-logo img {
  display: block;
  width: 155%;
  height: auto;
  object-fit: contain;
}

/* rapid zoom-in + fade, triggered by JS after the hold */
.preloader.zoom-out {
  opacity: 0;
  visibility: hidden;
}

.preloader.zoom-out .preloader-logo {
  animation: preloaderZoom 0.7s cubic-bezier(0.6, 0, 0.9, 0.2) forwards;
}

@keyframes preloaderPop {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes preloaderZoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo {
    animation: none;
  }
  .preloader.zoom-out .preloader-logo {
    animation: none;
  }
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   HERO ENTRANCE
   ========================================================= */

.hero-copy {
  animation:
    heroCopyIn 0.8s ease both;
}

.hero-visual {
  animation:
    heroVisualIn 1s ease 0.15s both;
}

.hero-controls {
  animation:
    heroControlsIn 0.8s ease 0.35s both;
}


/* =========================================================
   HERO IMAGE FLOAT
   ========================================================= */

.hero-art {
  animation:
    heroFloat 6s ease-in-out infinite;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes heroCopyIn {

  from {
    opacity: 0;

    transform:
      translateY(28px);
  }

  to {
    opacity: 1;

    transform: none;
  }
}


@keyframes heroVisualIn {

  from {
    opacity: 0;

    transform:
      translateX(35px)
      scale(0.97);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      scale(1);
  }
}


@keyframes heroControlsIn {

  from {
    opacity: 0;

    transform:
      translate(-50%, 15px);
  }

  to {
    opacity: 1;

    transform:
      translate(-50%, 0);
  }
}


@keyframes heroFloat {

  0%,
  100% {
    transform:
      translateX(18px)
      translateY(-4px);
  }

  50% {
    transform:
      translateX(18px)
      translateY(-12px);
  }
}


/* =========================================================
   HERO SLIDE TEXT TRANSITION
   Scoped strictly to the swapped elements so it can never
   affect the eyebrow / benefits / other hero copy.
   ========================================================= */

#hero-title.slide-change,
#hero-description.slide-change,
#hero-primary.slide-change {
  animation: heroSlideText 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#hero-description.slide-change {
  animation-delay: 0.06s;
}

#hero-primary.slide-change {
  animation-delay: 0.12s;
}

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


/* =========================================================
   ELEGANT HOVER & FOCUS INTERACTIONS
   Applies site-wide (loaded on every page)
   ========================================================= */

/* --- Navigation links: sliding gradient underline --- */

.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 3px;
}

.nav-links a:not(.nav-cta)::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  border-radius: 2px;

  background:
    linear-gradient(90deg, var(--primary), var(--primary2));

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Nav CTA pill: fill + lift --- */

.nav-cta {
  transition:
    color 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color: #ffffff;

  background:
    linear-gradient(100deg, #6848f3 0%, #485ff1 48%, #129cec 100%);

  border-color: transparent;

  box-shadow: 0 12px 26px rgba(76, 87, 235, 0.28);

  transform: translateY(-2px);
}

/* --- Brand logo: gentle scale --- */

.brand img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover img {
  transform: scale(1.04);
}

/* --- Buttons: light sheen sweep --- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before {
  content: "";

  position: absolute;
  top: 0;
  left: -130%;
  z-index: -1;

  width: 55%;
  height: 100%;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );

  transform: skewX(-20deg);

  transition: left 0.6s ease;

  pointer-events: none;
}

.btn:hover::before {
  left: 150%;
}

.btn-ghost::before {
  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(91, 92, 240, 0.12),
      transparent
    );
}

.btn-ghost:hover .counselor-icon {
  transform: rotate(-14deg);
}

.counselor-icon {
  transition: transform 0.3s ease;
}

.btn-light {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-light:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

/* --- Course cards: perimeter line draws in on hover --- */

.course-card {
  position: relative;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.course-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 22px 46px rgba(8, 12, 34, 0.4);
}

.course-card::before,
.course-card::after {
  content: "";

  position: absolute;

  width: 0;
  height: 0;

  border-radius: var(--radius);

  pointer-events: none;

  opacity: 0;

  transition:
    width 0.25s ease,
    height 0.25s ease 0.25s,
    opacity 0.2s ease 0.25s;
}

.course-card::before {
  top: 0;
  left: 0;

  border-top: 2px solid var(--primary2);
  border-left: 2px solid var(--primary2);
}

.course-card::after {
  right: 0;
  bottom: 0;

  border-bottom: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}

.course-card:hover::before,
.course-card:hover::after {
  width: 100%;
  height: 100%;

  opacity: 1;

  transition:
    width 0.25s ease 0.25s,
    height 0.25s ease,
    opacity 0.15s ease;
}

.course-card a,
.course-card .course-cta {
  display: inline-block;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.course-card:hover a,
.course-card:hover .course-cta {
  transform: translateX(4px);

  color: #cbc6ff;
}

/* --- Feature cards --- */

.feature-card {
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);

  border-color: rgba(91, 92, 240, 0.4);

  box-shadow: 0 18px 40px rgba(30, 40, 90, 0.1);
}

.feature-card span {
  display: inline-block;

  transition: transform 0.3s ease;
}

.feature-card:hover span {
  transform: scale(1.15);
}

/* --- Program filter chips --- */

.filter {
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.filter:hover:not(.active) {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.4);

  transform: translateY(-2px);
}

/* --- FAQ items + animated marker --- */

.faq-list details {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.faq-list details:hover {
  border-color: rgba(91, 92, 240, 0.35);

  box-shadow: 0 10px 30px rgba(30, 40, 90, 0.07);
}

.faq-list summary {
  list-style: none;

  position: relative;

  padding-right: 30px;

  transition: color 0.2s ease;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";

  position: absolute;
  right: 2px;
  top: 50%;

  font-size: 1.25rem;
  line-height: 1;

  color: var(--primary);

  transform: translateY(-50%);

  transition: transform 0.3s ease;
}

.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-list summary:hover {
  color: var(--primary);
}

/* --- Trust strip items --- */

.trust-items span {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.trust-items span:hover {
  color: var(--primary);

  transform: translateY(-2px);
}

/* --- Footer links --- */

.footer-grid a {
  display: block;
  width: fit-content;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-grid a:hover {
  color: #ffffff;

  transform: translateX(4px);
}

/* --- Gallery placeholders --- */

.gallery-grid div {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.gallery-grid div:hover {
  transform: scale(1.03);

  box-shadow: 0 18px 40px rgba(30, 40, 90, 0.12);
}

/* --- Success carousel dots --- */

.success-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* --- Keyboard focus visibility --- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.filter:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }

}