/* ==========================================================================
   StinkBugs Site Styles (cleaned)
   --------------------------------------------------------------------------
   - Fixed background on About (prevents banding/striping)
   - Centered surfaces on Home & About (desktop + mobile)
   - Motion-respectful (prefers-reduced-motion)
   - Scoped container/card rules so Bootstrap isn’t affected globally
   ========================================================================== */

/* ---- Theme Tokens ---- */
:root {
    --bg: #0b0f14;
    --text: #e8eef8;
    --muted: #9fb0c6;
    --accent: #7dd3fc;
    --accent-2: #a78bfa;
}

/* ---- Base / Reset ---- */
* {
    box-sizing: border-box
}

html, body {
    height: 100%;
    margin: 0
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%
}

@media (min-width:768px) {
    html {
        font-size: 16px
    }
}

body {
    margin-bottom: 60px; /* harmless if no footer */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color: var(--text);
    background: url('/images/bg-swamp.avif') no-repeat center / cover, linear-gradient(180deg, var(--bg), #1a242f);
    background-blend-mode: overlay;
    overflow-x: hidden;
}

    /* ---- Page-Specific Background (About) ---- */
    /* Prevent double-painting; use solid behind fixed artwork */
    body.about {
        background: var(--bg)
    }
        /* Fixed art layer eliminates banding on long scroll pages */
        body.about::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            background: url('/images/bg-swamp.avif') center / cover no-repeat, linear-gradient(180deg, var(--bg), #1a242f);
            background-blend-mode: overlay;
            will-change: transform; /* GPU-friendly */
        }

/* ---- Header / Nav ---- */
header.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 16px 22px;
    background: linear-gradient(180deg, rgba(11,15,20,.75), rgba(11,15,20,.15));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--text);
    text-decoration: none
}

    .brand .mark {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(125,211,252,.25), rgba(167,139,250,.25));
        border: 1px solid rgba(125,211,252,.35);
    }

.nav-actions a {
    color: var(--text);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: .4rem .7rem;
    font-weight: 600;
    margin-left: .4rem;
}

/* Optional focus helper (works fine with/without Bootstrap) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
}

/* ---- Ambient Layers: Fog / Sky / Stars / Plants ---- */
.fog {
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    filter: blur(10px);
    mix-blend-mode: screen;
    opacity: .10;
}

    .fog.one {
        animation: fog-drift-1 70s linear infinite
    }

    .fog.two {
        opacity: .09;
        filter: blur(14px);
        mix-blend-mode: screen;
        animation: fog-drift-2 95s linear infinite reverse
    }

@keyframes fog-drift-1 {
    0% {
        transform: translate3d(-4%,-2%,0)
    }

    50% {
        transform: translate3d(3%,2%,0)
    }

    100% {
        transform: translate3d(-4%,-2%,0)
    }
}

@keyframes fog-drift-2 {
    0% {
        transform: translate3d(4%,3%,0)
    }

    50% {
        transform: translate3d(-3%,-1%,0)
    }

    100% {
        transform: translate3d(4%,3%,0)
    }
}

.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none
}

.moon {
    position: absolute;
    right: 5vw;
    top: 6vh;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #dbeafe 45%, #9ca3af 60%, rgba(0,0,0,.0) 62%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.8), rgba(255,255,255,.2) 60%);
    box-shadow: 0 0 40px 10px rgba(180,200,255,.15), 0 0 120px 40px rgba(140,180,255,.08);
    opacity: .9;
}

.stars {
    position: absolute;
    inset: 0
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: .8;
    animation: twinkle var(--tdur,3s) ease-in-out infinite;
    animation-delay: var(--tdel,0s);
}

    .star.big {
        width: 3px;
        height: 3px;
        box-shadow: 0 0 6px rgba(255,255,255,.7)
    }

@keyframes twinkle {
    0%,100% {
        opacity: .2
    }

    50% {
        opacity: 1
    }
}

.plants {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

.plant {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--w,6px);
    height: var(--h,110px);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 100"><path d="M4 100 C3 80 2 60 1 40 C2 28 3 16 4 0 C5 16 6 28 7 40 C6 60 5 80 4 100 Z" fill="%231f6c3a"/></svg>') no-repeat center bottom / 100% 100%;
    transform-origin: bottom center;
    opacity: .85;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
    animation: sway var(--dur,8s) ease-in-out infinite;
    animation-delay: var(--delay,0s);
}

@keyframes sway {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(var(--amp,2deg))
    }

    50% {
        transform: rotate(0deg)
    }

    75% {
        transform: rotate(calc(var(--amp,2deg) * -1))
    }

    100% {
        transform: rotate(0deg)
    }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fog.one, .fog.two, .plant, .star {
        animation: none
    }
}

/* ---- Layout ---- */
main {
    position: relative;
    z-index: 1;
    padding: 120px 6vw 48px;
    display: grid;
    place-items: center;
}

/* Don’t let outer wrapper do weird layout things */
.container-body {
    width: 100%;
    margin: 0;
    padding: 0
}

/* ---- Surfaces (scoped to pages to avoid Bootstrap collisions) ---- */
body.home .container,
body.about .container,
body.home .card,
body.about .card {
    background: rgba(15,22,35,.85);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
}

/* Default surface widths */
body.home .container,
body.about .container {
    width: min(1000px, 94vw)
}

body.home .card,
body.about .card {
    width: min(720px, 92vw);
    margin-top: 80px
}

/* Home: single hero card */
body.home main.wrap {
    display: grid;
    place-items: center;
    padding: 120px 6vw 48px
}

body.home .card {
    margin: 80px auto 0;
}

/* About: hard-center the content container */
:is(body.about) main .container {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    padding: clamp(16px, 5vw, 32px);
    box-sizing: border-box;
    justify-self: center;
}

/* ---- Type / Content ---- */
h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 .5rem
}

p.lede, .sub {
    color: var(--muted);
    font-size: clamp(1rem, 2.2vw, 1.125rem)
}

.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr
}

.card .logo {
    display: flex;
    align-items: center;
    gap: .75rem
}

.logo .name {
    font-weight: 700;
    font-size: 1.15rem
}

.badge {
    display: inline-flex;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    color: #0b1220;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    font-weight: 700;
}

h2 {
    margin: .25rem 0 .5rem;
    font-size: 1.35rem
}

ul {
    margin: .5rem 0 0 1.25rem
}

/* ---- Performance Toggles ---- */
.low-end .card {
    backdrop-filter: none;
    box-shadow: none
}

.low-end .fog {
    opacity: .05;
    filter: blur(8px)
}

/* ---- Mobile Tweaks ---- */
@media (max-width:768px) {
    /* cheaper visuals on small screens */
    .fog {
        opacity: .06;
        filter: blur(8px)
    }

    /* surfaces: drop the heavy blur/shadow on phones */
    body.home .card, body.home .container,
    body.about .card, body.about .container {
        backdrop-filter: none;
        box-shadow: none;
    }

    /* About cards stack & fill */
    body.about .grid {
        grid-template-columns: 1fr
    }

    body.about .card {
        width: 100%;
        margin: 0
    }
}

/* ===================== PATCH (add at end of site.css) ===================== */

/* 1) HOME: push the "Coming Soon" badge to the right edge of the card */
body.home .card .logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

    body.home .card .logo .badge {
        margin-left: auto; /* shoves badge to the right */
    }

/* 2) GLOBAL (non-Home): fixed background layer to kill striping on long pages
      - applies to About, Privacy, and any other non-Home page */
body:not(.home) {
    background: var(--bg);
}

    body:not(.home)::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url('/images/bg-swamp.avif') center / cover no-repeat, linear-gradient(180deg, var(--bg), #1a242f);
        background-blend-mode: overlay;
        will-change: transform;
    }

/* 3) ABOUT + PRIVACY: hard center the inner content and make cards fill nicely */
body.about main,
body.privacy main {
    display: grid;
    place-items: center;
    padding: 120px 6vw 48px; /* match header height + breathing room */
}

/* Center the primary section container on About/Privacy */
:is(body.about, body.privacy) main .container {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    padding: clamp(16px, 5vw, 32px);
    box-sizing: border-box;
    justify-self: center;
}

/* About grid/cards: fill the centered container instead of hugging left */
body.about .grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    justify-items: stretch;
}

body.about .card {
    width: 100%;
    margin: 0;
    background: rgba(15,22,35,.85);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
}

/* Privacy page: use same “surface” styling */
body.privacy .card {
    width: 100%;
    background: rgba(15,22,35,.85);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
    backdrop-filter: blur(10px);
}

/* Phones: ensure full-width stacking */
@media (max-width:768px) {
    body.about .card,
    body.privacy .card {
        width: 100%;
        margin: 0;
    }
}
/* =================== END PATCH =================== */