/* ============================================================================
   hero-shared.css — the Index page's hero background system, extracted
   ============================================================================
   WHY THIS FILE EXISTS
   Every inner page had its own hero background, and all six differed from
   index.html and from each other:

     .ab-hero   linear-gradient(180deg, #F8FAFD, --ab-tint)
     .evp-hero  linear-gradient(180deg, #EAF1F9, #F4F7FB, #FFFFFF)
     .pk-hero   linear-gradient(180deg, #EAF1F9, #F4F7FB, #FFFFFF)
     .cx-hero   linear-gradient(180deg, #EAF1F9, #F4F7FB, #FFFFFF)
     .ar-hero   linear-gradient(160deg, #EAF1F9, #F4F0F9, #F7FAFD)
     .at-hero   linear-gradient(160deg, #F4F7FD, #EFF1FB, #F9FAFE)

   index.html does NOT paint its hero background on the section at all. It
   uses three stacked page-level layers:
     1. .mesh-gradient  — position:fixed, z-index:-3, four radial washes
     2. .hero-blob 1-3  — blurred, slowly drifting colour blobs
     3. .hero-cursor-glow — a glow that follows the pointer

   Copying a flat gradient onto each page would have produced an approximation
   of the index hero, not a match. These rules are the ACTUAL index hero
   background, lifted verbatim (values unchanged) into one shared file so all
   eight pages render from a single source and cannot drift apart again.

   SCOPE — this file only touches hero backgrounds. It defines no typography,
   no spacing, no layout, and nothing outside the hero. Each page keeps its own
   hero content, headings, buttons and structure exactly as they were.
   ========================================================================= */

/* ---- layer 1: the page-level mesh wash --------------------------------- */
/* position:fixed and z-index:-3, exactly as on index.html, so it sits behind
   all page content including the transparent navbar. */
.mesh-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(6, 58, 120, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(44, 111, 196, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(234, 241, 249, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 55%, #F4F7FB 100%);
}

/* ---- layer 2: drifting blobs ------------------------------------------- */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  animation: blobFloat 18s ease-in-out infinite;
}

.hero-blob-1 {
  width: 420px; height: 420px; top: -10%; right: 5%;
  background: radial-gradient(circle, rgba(6, 58, 120, 0.35), transparent 70%);
}

.hero-blob-2 {
  width: 380px; height: 380px; bottom: -15%; left: 0%;
  background: radial-gradient(circle, rgba(44, 111, 196, 0.3), transparent 70%);
  animation-delay: -6s;
  animation-duration: 24s;
}

.hero-blob-3 {
  width: 260px; height: 260px; top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(234, 241, 249, 0.6), transparent 70%);
  animation-delay: -12s;
  animation-duration: 20s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -20px) scale(1.08); }
}

/* ---- layer 3: pointer glow — index.html only ---------------------------
   The .hero-cursor-glow element is NOT added to the inner pages. Its opacity
   is toggled by a mousemove handler that lives inline in index.html, not in
   the shared js/site.js — so on any other page the element would sit at
   opacity:0 permanently. Rather than duplicate that handler seven times for
   a subtle effect, the inner pages use the two CSS-only layers above, which
   is what produces the visible background match. index.html keeps its glow
   and its own rule, untouched. */

/* ---- applying it to each page's hero ------------------------------------
   The six hero classes keep every other property they already had — padding,
   layout, grid, their own content. ONLY the background is replaced, and it is
   replaced with `transparent` so the fixed .mesh-gradient shows through,
   which is precisely how index.html works. Overriding with a copy of the
   gradient would look close but would not scroll or layer identically. */
.ab-hero,
.evp-hero,
.pk-hero,
.cx-hero,
.ar-hero,
.at-hero,
/* About's hero is the index About section ported across, so its class is
   .abt-section rather than a *-hero name. Scoped to .about-page so the
   identical section on index.html is not affected. */
.about-page .abt-section {
  position: relative;   /* required so the blobs position against the hero */
  background: transparent;
  overflow: hidden;     /* blobs are oversized and blurred; keep them inside */
}

/* Hero content must sit above the blob layer, same as index.html. */
.ab-hero > .container,
.evp-hero > .container,
.pk-hero > .container,
.cx-hero > .container,
.ar-hero > .container,
.at-hero > .container,
.about-page .abt-section > .container {
  position: relative;
  z-index: 1;
}

/* ---- reduced motion ----------------------------------------------------
   Matches index.html's own behaviour: the layers stay, the movement stops. */
@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
}