/* =========================================================
   KSG LEAGUES — LIVE PATTERN POLISH
   Adds subtle visual energy without changing existing layouts.
   ========================================================= */

/* ---------------------------------------------------------
   TOP NAV
   The previous pattern was hidden beneath an almost-opaque
   white gradient. Put the pattern on top of the white base.
   --------------------------------------------------------- */
.site-header{
    background-color:rgba(255,255,255,.975) !important;
    background-image:
        linear-gradient(
            115deg,
            transparent 0 22%,
            rgba(215,38,56,.055) 22% 22.8%,
            transparent 22.8% 47%,
            rgba(20,15,45,.035) 47% 47.7%,
            transparent 47.7% 72%,
            rgba(215,38,56,.045) 72% 72.6%,
            transparent 72.6% 100%
        ),
        radial-gradient(circle at 1px 1px, rgba(20,15,45,.075) 1px, transparent 1.15px) !important;
    background-size:
        260px 100%,
        22px 22px !important;
    background-position:
        0 0,
        0 0 !important;
}

/* Slight live drift, intentionally almost imperceptible. */
@media (prefers-reduced-motion:no-preference){
    .site-header{
        animation:ksg-nav-pattern-drift 28s linear infinite;
    }
}

@keyframes ksg-nav-pattern-drift{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:260px 0,22px 0;
    }
}

/* ---------------------------------------------------------
   SHARED PUBLIC PAGE BANNERS
   Existing background colors / gradients stay untouched.
   --------------------------------------------------------- */
.page-hero,
.league-hero,
.team-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

/*
  Layer 1: fine diagonal broadcast lines
  Layer 2: sparse soft dots
  The pseudo-element is transparent and never affects layout.
*/
.page-hero::before,
.league-hero::before,
.team-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.72;
    background-image:
        repeating-linear-gradient(
            120deg,
            transparent 0 34px,
            rgba(255,255,255,.052) 34px 35px,
            transparent 35px 70px
        ),
        radial-gradient(
            circle at center,
            rgba(255,255,255,.11) 0 1px,
            transparent 1.35px
        );
    background-size:
        180px 180px,
        28px 28px;
    background-position:
        0 0,
        0 0;
}

/* A restrained large-scale accent sweep. */
.page-hero::after,
.league-hero::after,
.team-hero::after{
    content:"";
    position:absolute;
    width:46%;
    min-width:360px;
    aspect-ratio:1;
    right:-12%;
    top:50%;
    transform:translateY(-50%) rotate(16deg);
    z-index:-1;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    box-shadow:
        0 0 0 54px rgba(255,255,255,.018),
        0 0 0 108px rgba(255,255,255,.012);
}

/*
  Keep all existing banner content above the pattern.
  No typography, spacing, sizing, or color changes.
*/
.page-hero > *,
.league-hero > *,
.team-hero > *{
    position:relative;
    z-index:1;
}

@media (prefers-reduced-motion:no-preference){
    .page-hero::before,
    .league-hero::before,
    .team-hero::before{
        animation:ksg-banner-pattern-drift 32s linear infinite;
    }

    .page-hero::after,
    .league-hero::after,
    .team-hero::after{
        animation:ksg-banner-orbit 18s ease-in-out infinite alternate;
    }
}

@keyframes ksg-banner-pattern-drift{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:180px 90px,28px 28px;
    }
}

@keyframes ksg-banner-orbit{
    from{
        transform:translateY(-50%) rotate(12deg) scale(.98);
        opacity:.76;
    }
    to{
        transform:translateY(-48%) rotate(20deg) scale(1.03);
        opacity:1;
    }
}

@media (prefers-reduced-motion:reduce){
    .site-header,
    .page-hero::before,
    .league-hero::before,
    .team-hero::before,
    .page-hero::after,
    .league-hero::after,
    .team-hero::after{
        animation:none !important;
    }
}

/* Keep the pattern understated on small screens. */
@media (max-width:620px){
    .site-header{
        background-size:
            220px 100%,
            24px 24px !important;
    }

    .page-hero::before,
    .league-hero::before,
    .team-hero::before{
        opacity:.52;
    }

    .page-hero::after,
    .league-hero::after,
    .team-hero::after{
        width:68%;
        right:-30%;
        opacity:.65;
    }
}