@charset "UTF-8";
/* =========================================================================
   Header interactive background — extracted from css/style-black.css
   2026-04-25 (Pass 2 follow-up).

   The animated SVG-goo gradient blob behind .Header (homepage hero) plus
   .Header .headerContainer z-index stacking that keeps content above the
   blur layer. Background animation from a 2026-04-14 redesign session.
   ========================================================================= */

/* ── Header Interactive Background ──────────────────────────────────────────── */
.Header .gradient-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(40deg, #0d1117, #0d1117);
    overflow: hidden;
}

.Header svg { display: none; }

.Header .gradients-container {
    filter: url(#headerGoo) blur(40px);
    width: 100%;
    height: 100%;
    position: relative;
}

@keyframes headerMoveInCircle {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
@keyframes headerMoveVertical {
    0%   { transform: translateY(-50%); }
    50%  { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}
@keyframes headerMoveHorizontal {
    0%   { transform: translateX(-50%) translateY(-10%); }
    50%  { transform: translateX(50%)  translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

.Header .g1,
.Header .g2,
.Header .g3,
.Header .g4,
.Header .g5 {
    position: absolute;
    width: 80%;
    height: 80%;
    top: calc(50% - 40%);
    left: calc(50% - 40%);
    mix-blend-mode: hard-light;
}

.Header .g1 {
    background: radial-gradient(circle at center, rgba(42,90,55,0.8) 0, rgba(42,90,55,0) 50%) no-repeat;
    transform-origin: center center;
    animation: headerMoveVertical 30s ease infinite;
}
.Header .g2 {
    background: radial-gradient(circle at center, rgba(115,35,35,0.8) 0, rgba(115,35,35,0) 50%) no-repeat;
    transform-origin: calc(50% - 400px);
    animation: headerMoveInCircle 22s reverse infinite;
}
.Header .g3 {
    background: radial-gradient(circle at center, rgba(175,165,150,0.8) 0, rgba(175,165,150,0) 50%) no-repeat;
    top: calc(50% - 40% + 200px);
    left: calc(50% - 40% - 500px);
    transform-origin: calc(50% + 400px);
    animation: headerMoveInCircle 40s linear infinite;
}
.Header .g4 {
    background: radial-gradient(circle at center, rgba(50,85,55,0.8) 0, rgba(50,85,55,0) 50%) no-repeat;
    transform-origin: calc(50% - 200px);
    animation: headerMoveHorizontal 40s ease infinite;
    opacity: 0.7;
}
.Header .g5 {
    background: radial-gradient(circle at center, rgba(100,28,28,0.8) 0, rgba(100,28,28,0) 50%) no-repeat;
    width: 160%;
    height: 160%;
    top: calc(50% - 80%);
    left: calc(50% - 80%);
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: headerMoveInCircle 22s ease infinite;
}

.Header .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgb(181 147 90 / 62%) 0, rgba(160, 130, 80, 0) 17%) no-repeat;
    mix-blend-mode: hard-light;
    width: 360%;
    height: 360%;
    top: -180%;
    left: -180%;
    opacity: 0.7;
    pointer-events: none;
    z-index: 5;
}

.Header .headerContainer {
    position: relative;
    z-index: 10;
    pointer-events: none;
}