/* ============================================================
   Merit Pathway — shared styles
   Loaded by every page. Edit here once, not eleven times.
   ============================================================ */

/* --- entrance animation --- */
.fade-in-up { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(30px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* --- frosted panels --- */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A192F; }
::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C5A028; }

/* --- page entry --- */
body { animation: smoothFadeIn 0.6s ease-out forwards; background-color: #F8FAFC; }
@keyframes smoothFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Muted text was #94A3B8 on white, which fails WCAG AA at small sizes.
   These two classes lift the common cases to a passing contrast ratio
   without changing the visual character of the page. */
.text-slate-400 { color: #64748B; }
.text-slate-500 { color: #475569; }

/* Light weights below 14px are hard to read on a phone in daylight,
   which is how most of our visitors read the site. */
.font-light { font-weight: 400; }

/* --- focus visibility, needed for keyboard users --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- overlay animation --- */
.mp-overlay { transition: opacity .3s ease; }
.mp-overlay-panel { transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in-up { opacity: 1; transform: none; }
}


/* ============================================================
   MOTION
   Three deliberate pieces of movement. Everything here is
   disabled under prefers-reduced-motion, and everything
   degrades to visible-and-static if JavaScript fails.
   ============================================================ */

/* --- scroll reveal ---------------------------------------
   The old .fade-in-up fired on page load, so sections below
   the fold finished animating before anyone scrolled to them.
   Now it waits until the element is actually on screen.
   The .mp-js guard means that if the script never runs, the
   content is simply visible rather than permanently hidden. */
.mp-js .fade-in-up { opacity: 0; transform: translateY(28px); animation: none; }
.mp-js .fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.mp-js .fade-in-up.delay-100.is-visible { transition-delay: .08s; }
.mp-js .fade-in-up.delay-200.is-visible { transition-delay: .16s; }
.mp-js .fade-in-up.delay-300.is-visible { transition-delay: .24s; }

/* --- rotating destination in the headline ----------------
   Height is fixed to the line box so the headline never
   reflows as words of different widths swap in. */
.rotator { display: inline-block; position: relative; vertical-align: bottom; }
/* A rotator dropped inside a bg-clip-text gradient would inherit a
   transparent fill and vanish, because an inline-block child is painted
   outside the parent's clipped background. These two lines make the word
   render in the inherited colour regardless of where it is placed. */
.rotator span {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.rotator span.on { opacity: 1; transform: translateY(0); }
.rotator span.out { opacity: 0; transform: translateY(-0.35em); }

/* --- facts ticker ----------------------------------------
   Two identical tracks side by side, the pair translated by
   exactly half its width, which loops with no visible seam. */
.ticker { overflow: hidden; position: relative; }
.ticker::before,
.ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 5rem; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(to right, #0A192F, transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  #0A192F, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .mp-js .fade-in-up { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .rotator span { transition: none; }
}


/* ============================================================
   MOBILE: stop the page scrolling sideways

   Several pages place large decorative blur circles with negative
   offsets (-mr-20, left-[-10%], w-96). On a desktop they sit
   harmlessly off the edge; on a 360px phone they widen the
   document and the whole page scrolls sideways, which is what
   makes a site feel broken on mobile.

   overflow-x: clip rather than hidden, because hidden turns the
   body into a scroll container and breaks the sticky navigation.
   ============================================================ */
html, body { max-width: 100%; overflow-x: clip; }

/* Decorative only — they never need to be reachable or to
   influence layout width. */
[class*="blur-[100px]"],
[class*="blur-[120px]"],
[class*="blur-3xl"] { pointer-events: none; }

@media (max-width: 640px) {
  /* Shrink the orbs rather than deleting them, so the page keeps
     its depth without the overflow. */
  [class*="blur-[100px]"],
  [class*="blur-[120px]"] { width: 16rem !important; height: 16rem !important; }

  /* Long button labels were set to never wrap, which forced a few
     buttons wider than the screen. */
  .whitespace-nowrap { white-space: normal; }
}