/* ============================================================
   Hero — Stripe-inspired animated gradient background
   Four soft radial-gradient blobs drift using CSS transforms.
   Sits at z-index 0 inside .header; all content is z-index 1.
   ============================================================ */


/* ── Make header a stacking context that contains the blobs ── */
.header {
    position: relative;
    overflow: hidden;
}

/* All hero content floats above the gradient layer */
.header .header-content {
    position: relative;
    z-index: 1;
}


/* ── Gradient container ── */
.hero-gradient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}


/* ── Shared blob base ── */
.hgb-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}


/* ──────────────────────────────────────────────────────────
   Blob 1 — Navy (brand primary)
   Large anchor blob, bleeds off the top-left corner.
   ────────────────────────────────────────────────────────── */
.hgb-blob-1 {
    width: 820px;
    height: 820px;
    background: radial-gradient(circle at 42% 38%,
        rgba(26, 47, 110, 0.52)  0%,
        rgba(26, 47, 110, 0.22)  45%,
        transparent               72%);
    top:  -280px;
    left: -200px;
    filter: blur(72px);
    animation: hgbMove1 24s ease-in-out infinite alternate;
}


/* ──────────────────────────────────────────────────────────
   Blob 2 — Mid-tone blue
   Upper-right corner, wraps behind the document animation.
   ────────────────────────────────────────────────────────── */
.hgb-blob-2 {
    width: 680px;
    height: 680px;
    background: radial-gradient(circle at 50% 42%,
        rgba(59, 110, 190, 0.44)  0%,
        rgba(59, 110, 190, 0.18)  50%,
        transparent                72%);
    top:   -160px;
    right: -140px;
    filter: blur(80px);
    animation: hgbMove2 30s ease-in-out infinite alternate;
}


/* ──────────────────────────────────────────────────────────
   Blob 3 — Soft violet accent
   Centre bridge between the two columns; creates depth
   without producing muddy tones against the navy blobs.
   ────────────────────────────────────────────────────────── */
.hgb-blob-3 {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at 50% 50%,
        rgba(99, 88, 200, 0.26)   0%,
        rgba(99, 88, 200, 0.10)   50%,
        transparent                72%);
    top:  20%;
    left: 22%;
    filter: blur(88px);
    animation: hgbMove3 20s ease-in-out infinite alternate;
}


/* ──────────────────────────────────────────────────────────
   Blob 4 — Navy low opacity
   Bottom area for colour balance.
   ────────────────────────────────────────────────────────── */
.hgb-blob-4 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at 44% 54%,
        rgba(26, 47, 110, 0.28)  0%,
        rgba(26, 47, 110, 0.10)  50%,
        transparent               72%);
    bottom: -120px;
    left:    8%;
    filter: blur(84px);
    animation: hgbMove4 27s ease-in-out infinite alternate;
}


/* ── Keyframes ─────────────────────────────────────────────
   Each blob moves on an independent trajectory and duration
   so they never fully sync — creating organic, live motion.
   ────────────────────────────────────────────────────────── */

@keyframes hgbMove1 {
    0%   { transform: translate(  0px,   0px) scale(1.00); }
    25%  { transform: translate( 70px,  55px) scale(1.07); }
    55%  { transform: translate(130px,  25px) scale(0.94); }
    80%  { transform: translate( 80px,  95px) scale(1.05); }
    100% { transform: translate(100px,  65px) scale(1.09); }
}

@keyframes hgbMove2 {
    0%   { transform: translate(   0px,   0px) scale(1.00); }
    30%  { transform: translate(-110px,  75px) scale(1.10); }
    60%  { transform: translate(-170px, 125px) scale(0.91); }
    85%  { transform: translate(-100px, 155px) scale(1.06); }
    100% { transform: translate( -80px, 170px) scale(1.03); }
}

@keyframes hgbMove3 {
    0%   { transform: translate(  0px,   0px) scale(1.00); }
    35%  { transform: translate( 95px, -65px)  scale(1.13); }
    65%  { transform: translate(-55px, -85px)  scale(0.87); }
    90%  { transform: translate( 60px, -45px)  scale(1.07); }
    100% { transform: translate( 75px, -55px)  scale(1.05); }
}

@keyframes hgbMove4 {
    0%   { transform: translate(  0px,   0px)  scale(1.00); }
    30%  { transform: translate(115px,  -45px) scale(1.09); }
    60%  { transform: translate( -65px, -85px) scale(0.91); }
    85%  { transform: translate(  55px,-120px) scale(1.07); }
    100% { transform: translate(  45px,-135px) scale(1.05); }
}


/* ── Accessibility: no animation for users who prefer it ── */
@media (prefers-reduced-motion: reduce) {
    .hgb-blob {
        animation: none;
    }
}


/* ── Responsive ─────────────────────────────────────────────
   Scale down blobs on smaller viewports; hide the two
   accent blobs on mobile where they would dominate the view.
   ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hgb-blob-1 { width: 560px; height: 560px; }
    .hgb-blob-2 { width: 460px; height: 460px; }
    .hgb-blob-3 { width: 380px; height: 380px; }
    .hgb-blob-4 { width: 360px; height: 360px; }
}

@media (max-width: 767px) {
    .hgb-blob-1 { width: 380px; height: 380px; top: -140px; left: -100px; }
    .hgb-blob-2 { width: 300px; height: 300px; top:  -80px; right: -80px; }
    .hgb-blob-3 { display: none; }
    .hgb-blob-4 { display: none; }
}


/* ============================================================
   Subpage Hero — gradient background for ex-header pages
   (articles, documentation, FAQ)
   ============================================================ */

.ex-header.hero-gradient {
    position: relative;
    overflow: hidden;
    clip-path: inset(0);          /* clips blur() effects that leak past overflow:hidden */
    background-color: #f1f1f8;    /* match the rest of the page (#f1f1f8) */
    isolation: isolate;
}

.ex-header.hero-gradient .hero-gradient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Subtle dot-grid overlay for a polished, modern texture */
.ex-header.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(26, 47, 110, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
}

.ex-header.hero-gradient .container {
    position: relative;
    z-index: 1;
}