/* ============================================
   MS EDUCATORS — Custom Styles
   ============================================ */

:root {
  --navy-950: #081226;
  --navy-900: #0b1b3a;
  --navy-800: #12264e;
  --gold-400: #f5c16c;
  --gold-500: #e8a33d;
  --cream: #faf7f1;
  --ink: #16233f;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.font-display { font-family: "Fraunces", Georgia, serif; }

::selection { background: var(--gold-500); color: var(--navy-950); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-500), var(--navy-800)); border-radius: 99px; border: 3px solid var(--cream); }

/* ---------- Utilities ---------- */
.glass {
  background: rgba(8, 18, 38, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(245, 193, 108, 0.18);
}

.text-gradient-gold {
  background: linear-gradient(120deg, #f9d58a 0%, #e8a33d 55%, #f5c16c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-mesh {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(245, 193, 108, 0.18), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(46, 88, 170, 0.22), transparent 55%),
    linear-gradient(160deg, #0b1b3a 0%, #081226 70%);
}

.bg-mesh-gold {
  background:
    radial-gradient(900px 480px at 90% 10%, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1000px 600px at 0% 100%, rgba(245, 193, 108, 0.35), transparent 60%),
    linear-gradient(135deg, #e8a33d 0%, #f5c16c 60%, #e8a33d 100%);
}

.gold-line { height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--gold-500), transparent); }

.card-3d { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.card-3d:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -15px rgba(8,18,38,.25); }

/* ---------- Formula chips ---------- */
.formula-chip {
  font-family: "Fraunces", Georgia, serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: floaty 9s ease-in-out infinite;
  user-select: none;
}
.formula-a { animation-duration: 8s; }
.formula-b { animation-duration: 11s; animation-delay: 1.2s; }
.formula-c { animation-duration: 9.5s; animation-delay: 2.4s; }
.formula-d { animation-duration: 12s; animation-delay: .6s; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 26s linear infinite; }

/* ---------- Pulse dot ---------- */
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(245, 193, 108, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(245, 193, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 193, 108, 0); }
}
.pulse-dot { animation: pulse-dot 2s infinite; }

/* ---------- Hero slider ---------- */
.hero-slide { opacity: 0; transition: opacity 1.1s ease; z-index: 1; }
.hero-slide.active { opacity: 1; z-index: 10; }

.hero-slide .hero-media { animation: kenburns 24s ease-in-out infinite alternate; }
.hero-slide.active .hero-caption > * { animation: rise .9s cubic-bezier(.22,.61,.36,1) both; }
.hero-slide.active .hero-caption > *:nth-child(1) { animation-delay: .15s; }
.hero-slide.active .hero-caption > *:nth-child(2) { animation-delay: .32s; }
.hero-slide.active .hero-caption > *:nth-child(3) { animation-delay: .5s; }
.hero-slide.active .hero-caption > *:nth-child(4) { animation-delay: .68s; }

@keyframes kenburns {
  from { transform: scale(1.05) translate(0, 0); }
  to { transform: scale(1.18) translate(-2%, -2%); }
}

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

.hero-dot { transition: all .3s ease; }
.hero-dot.active { width: 3rem; background: var(--gold-500); }

/* ---------- Marquee ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { width: max-content; animation: marquee 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ---------- Floating blobs ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(6deg); } }
.floaty { animation: floaty 9s ease-in-out infinite; }
.floaty-slow { animation: floaty 13s ease-in-out infinite reverse; }

/* ---------- Section eyebrow ---------- */
.eyebrow {
  letter-spacing: .32em;
}

/* ---------- Cards ---------- */
.feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.12); }
.feature-icon { transition: transform .4s ease; }

.program-card .program-shade { opacity: 0; transition: opacity .5s ease; }
.program-card:hover .program-shade { opacity: 1; }
.program-card:hover .program-cta { transform: translateX(0); opacity: 1; }
.program-cta { transform: translateX(-16px); opacity: 0; transition: all .45s ease; }

/* ---------- Testimonials ---------- */
.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; animation: rise .6s ease both; }

/* ---------- Accordion ---------- */
.acc-answer { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,.61,.36,1); }
.acc-item.open .acc-answer { max-height: 300px; }
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-icon { transition: transform .35s ease; }

/* ---------- Floaty nav links underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  transition: width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Photo frames ---------- */
.frame-gold { position: relative; }
.frame-gold::after {
  content: "";
  position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 2px solid var(--gold-500); border-radius: 1.25rem; z-index: 0;
  pointer-events: none;
}

/* ---------- Grid pattern overlay ---------- */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- Back to top ---------- */
.back-top { opacity: 0; visibility: hidden; transition: .35s ease; }
.back-top.show { opacity: 1; visibility: visible; }