/* ==========================================================================
   O'Steen Meats — Aurora Field
   Ambient page background system.

   Palette is unchanged: green #006633 / #004d26, gold #FFD700, ink #1a1a1a.
   This sheet only changes the *ground* those colors sit on: a slow-drifting
   field of green and gold light over a green-biased off-white, a hairline
   grid, and film grain. Neutral bands become frosted glass so the field
   reads through them; dark bands stay solid and act as punctuation.

   Loaded after each page's inline <style>, so equal-specificity rules win
   on source order. No !important is needed anywhere.
   ========================================================================== */

:root {
    /* Chosen neutrals — biased toward the brand green, never flat grey. */
    --field-ground:      #f2f5f1;
    --field-ground-warm: #fbfaf5;

    /* Frosted surfaces */
    --glass:             rgba(255, 255, 255, 0.62);
    --glass-strong:      rgba(255, 255, 255, 0.82);
    --glass-line:        rgba(0, 102, 51, 0.11);
    --glass-line-strong: rgba(0, 102, 51, 0.18);

    /* Shadows tinted with the brand green rather than neutral black */
    --glass-shadow:      0 10px 40px rgba(0, 77, 38, 0.09), 0 2px 8px rgba(0, 77, 38, 0.04);
    --glass-shadow-lift: 0 24px 64px rgba(0, 77, 38, 0.16), 0 4px 14px rgba(0, 77, 38, 0.07);
}

/* --------------------------------------------------------------------------
   1. The ground
   The base wash lives on <html> so that <body> can stay transparent and let
   the negatively-stacked aurora layer show through.
   -------------------------------------------------------------------------- */

/* A flat fallback on <html> so the overscroll area and any no-CSS-layers
   fallback still land on the right neutral. The gradient wash itself rides on
   .aurora-field, which is already position:fixed — background-attachment:fixed
   is unreliable on iOS, and this gets the same result without it. */
html {
    background: var(--field-ground);
}

body {
    background: transparent;
}

/* --------------------------------------------------------------------------
   2. The aurora
   Four independently drifting blooms. Cycle lengths are mutually prime-ish
   (43 / 57 / 71 / 89s) so the composition never visibly repeats. Blooms are
   soft radial gradients rather than blurred solids — same look, none of the
   filter cost — and animate on transform only, so they composite on the GPU.
   -------------------------------------------------------------------------- */

.aurora-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(125% 85% at 50% -12%,
            #ffffff 0%,
            var(--field-ground-warm) 34%,
            var(--field-ground) 100%);
}

.aurora-field span {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

/* Deep green, upper left — the anchor bloom */
.aurora-field .bloom-1 {
    width: 82vmax;
    height: 82vmax;
    top: -30vmax;
    left: -22vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(0, 102, 51, 0.26) 0%,
        rgba(0, 102, 51, 0.12) 36%,
        rgba(0, 102, 51, 0) 68%);
    animation: bloom-drift-1 43s ease-in-out infinite;
}

/* Gold, upper right — the warm counterweight */
.aurora-field .bloom-2 {
    width: 64vmax;
    height: 64vmax;
    top: -18vmax;
    right: -20vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 215, 0, 0.30) 0%,
        rgba(255, 215, 0, 0.13) 34%,
        rgba(255, 215, 0, 0) 66%);
    animation: bloom-drift-2 57s ease-in-out infinite;
}

/* Dark green, lower right */
.aurora-field .bloom-3 {
    width: 74vmax;
    height: 74vmax;
    bottom: -32vmax;
    right: -16vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(0, 77, 38, 0.22) 0%,
        rgba(0, 77, 38, 0.09) 38%,
        rgba(0, 77, 38, 0) 70%);
    animation: bloom-drift-3 71s ease-in-out infinite;
}

/* Small warm gold, lower left — keeps the bottom of long pages alive */
.aurora-field .bloom-4 {
    width: 48vmax;
    height: 48vmax;
    bottom: -20vmax;
    left: -10vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 200, 40, 0.24) 0%,
        rgba(255, 200, 40, 0.10) 34%,
        rgba(255, 200, 40, 0) 66%);
    animation: bloom-drift-4 89s ease-in-out infinite;
}

@keyframes bloom-drift-1 {
    0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
    33%       { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); }
    66%       { transform: translate3d(3vmax, 12vmax, 0) scale(0.94); }
}

@keyframes bloom-drift-2 {
    0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
    40%       { transform: translate3d(-11vmax, 8vmax, 0) scale(1.16); }
    75%       { transform: translate3d(-4vmax, 16vmax, 0) scale(0.9); }
}

@keyframes bloom-drift-3 {
    0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
    45%       { transform: translate3d(-8vmax, -10vmax, 0) scale(1.1); }
    80%       { transform: translate3d(6vmax, -4vmax, 0) scale(0.92); }
}

@keyframes bloom-drift-4 {
    0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
    50%       { transform: translate3d(14vmax, -9vmax, 0) scale(1.2); }
}

/* Hairline grid — structure under the light, faded out at the edges so it
   never reads as a wireframe. */
.aurora-field::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,  rgba(0, 102, 51, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 102, 51, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 95% at 50% 18%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0) 84%);
            mask-image: radial-gradient(120% 95% at 50% 18%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0) 84%);
}

/* Film grain — breaks up gradient banding and gives the field a surface. */
.aurora-field::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.24;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23grain)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Neutral bands step aside
   Anything that was plain white or #f8f8f8 stops painting so the field
   carries through. Dark and green bands are left alone on purpose.
   -------------------------------------------------------------------------- */

.about,
.products,
.services,
.request-sample-section,
.distributors-section,
.countdown-section,
.content-section,
.catalog-section,
.problem-section,
.solution-section,
.faq-section,
.products-showcase,
.qr-cooking-section,
.final-cta,
.tips-section {
    background: transparent;
}

/* Bands that were a light grey gradient keep a whisper of separation — just
   enough to read as a distinct band without shutting the light out. */
.why-choose-section,
.certifications-section,
.alt-band,
.shop-login-section {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.58) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(0, 102, 51, 0.07);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .why-choose-section,
    .certifications-section,
    .alt-band,
    .shop-login-section {
        -webkit-backdrop-filter: blur(16px) saturate(125%);
                backdrop-filter: blur(16px) saturate(125%);
    }
}

/* --------------------------------------------------------------------------
   4. Cards become frosted glass
   Translucent white over the field, a green-tinted hairline instead of grey,
   and green-tinted shadows so nothing casts a dead neutral shadow.
   -------------------------------------------------------------------------- */

.product-card,
.service-card,
.benefit-card,
.distributor-card,
.distributors-intro,
.fact-card,
.contact-details,
.sample-form,
.problem-card,
.faq-item,
.qr-card,
.product-featured,
.calculator-card,
.tip-card,
.review-quote {
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow: var(--glass-shadow);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .product-card,
    .service-card,
    .benefit-card,
    .distributor-card,
    .distributors-intro,
    .fact-card,
    .contact-details,
    .sample-form,
    .problem-card,
    .faq-item,
    .qr-card,
    .product-featured,
    .calculator-card,
    .tip-card,
    .review-quote {
        -webkit-backdrop-filter: blur(20px) saturate(140%);
                backdrop-filter: blur(20px) saturate(140%);
    }
}

/* Panels that carry real input or reference detail sit on the more opaque glass. */
.contact-details,
.sample-form {
    background: var(--glass-strong);
}

/* One shared lift on hover, replacing the per-card grey shadows. */
.product-card:hover,
.service-card:hover,
.benefit-card:hover,
.distributor-card:hover,
.contact-details:hover,
.problem-card:hover,
.qr-card:hover,
.product-featured:hover,
.calculator-card:hover,
.tip-card:hover,
.fact-card:hover {
    background: var(--glass-strong);
    border-color: var(--glass-line-strong);
    box-shadow: var(--glass-shadow-lift);
}

/* Pills, chips, and the breadcrumb rail */
.filter-tab {
    background: var(--glass-strong);
    border-color: var(--glass-line-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

.filter-tab.active {
    background: var(--primary, #006633);
    border-color: var(--primary, #006633);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 102, 51, 0.28);
}

.breadcrumb {
    background: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(0, 102, 51, 0.08);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
}

/* --------------------------------------------------------------------------
   5. Navigation joins the glass system
   -------------------------------------------------------------------------- */

nav {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(0, 102, 51, 0.08);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 30px rgba(0, 77, 38, 0.07);
}

nav.scrolled {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 34px rgba(0, 77, 38, 0.12);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    nav,
    nav.scrolled {
        background: rgba(255, 255, 255, 0.97);
    }
}

/* --------------------------------------------------------------------------
   6. Solid bands get weather of their own
   A slow gold bloom inside each dark or green band, so the opaque sections
   belong to the same sky as the field behind them.
   -------------------------------------------------------------------------- */

.hero,
.page-hero,
.cta-band,
.cta-section {
    position: relative;
    overflow: hidden;
}

.hero::after,
.page-hero::after,
.cta-band::after,
.cta-section::after {
    content: '';
    position: absolute;
    inset: -30%;
    pointer-events: none;
    background:
        radial-gradient(38% 46% at 22% 28%, rgba(255, 215, 0, 0.20) 0%, rgba(255, 215, 0, 0) 62%),
        radial-gradient(34% 40% at 78% 72%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 60%);
    animation: band-bloom 34s ease-in-out infinite;
}

@keyframes band-bloom {
    0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
    50%       { transform: translate3d(6%, 4%, 0) scale(1.14); }
}

/* Keep every band's own content above its bloom. */
.hero > *,
.page-hero > *,
.cta-band > *,
.cta-section > * {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   7. Motion preferences
   With animation off the field still reads as a composed image — the blooms
   simply hold a position instead of drifting.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aurora-field span,
    .hero::after,
    .page-hero::after,
    .cta-band::after,
    .cta-section::after {
        animation: none;
    }

    .aurora-field .bloom-1 { transform: translate3d(6vmax, 4vmax, 0); }
    .aurora-field .bloom-2 { transform: translate3d(-7vmax, 5vmax, 0); }
    .aurora-field .bloom-3 { transform: translate3d(-5vmax, -6vmax, 0); }
    .aurora-field .bloom-4 { transform: translate3d(8vmax, -5vmax, 0); }
}

/* --------------------------------------------------------------------------
   8. Small screens
   One bloom fewer and a tighter grid — less compositing work on phones, and
   the field stays legible at a narrow width.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .aurora-field .bloom-4 { display: none; }
    .aurora-field::before  { background-size: 52px 52px; }

    .product-card,
    .service-card,
    .benefit-card,
    .distributor-card,
    .problem-card,
    .faq-item,
    .qr-card,
    .calculator-card,
    .tip-card,
    .fact-card {
        background: rgba(255, 255, 255, 0.78);
    }
}

/* --------------------------------------------------------------------------
   9. Nav clearance
   The fixed nav is 152px tall (a 95px logo plus its padding). The page heroes
   were clearing only 72px, so the top of each heading sat under the bar —
   invisible while the nav was opaque, and plainly wrong now that it is glass.
   -------------------------------------------------------------------------- */

.page-hero,
.catalog-hero,
.tools-hero {
    margin-top: 152px;
}

/* sales.html builds a shorter bar (137px) from tighter padding. */
.hero-sales {
    margin-top: 137px;
}

/* --------------------------------------------------------------------------
   10. The logo
   The mark is now a transparent PNG, so the old green glow — which used to
   halo a white rectangle — smears green light around green letterforms. It
   also has to hold up over the hero photo, where the glass nav is dark. A
   tight white halo separates the mark from any backdrop; the pulse stays,
   but it now breathes a warm gold rather than more green.
   Redefining logoGlow by name beats the inline keyframes on source order.
   -------------------------------------------------------------------------- */

.logo img {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.75))
        drop-shadow(0 3px 8px rgba(0, 40, 20, 0.28));
}

@keyframes logoGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.75))
            drop-shadow(0 3px 8px rgba(0, 40, 20, 0.28));
    }
    50% {
        filter:
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.85))
            drop-shadow(0 3px 10px rgba(0, 40, 20, 0.32))
            drop-shadow(0 0 14px rgba(255, 215, 0, 0.28));
    }
}

nav.scrolled .logo img {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.7))
        drop-shadow(0 2px 6px rgba(0, 40, 20, 0.24));
}

@media (prefers-reduced-motion: reduce) {
    .logo img { animation: none; }
}

/* --------------------------------------------------------------------------
   11. Build credit
   Sits under the client's copyright on every page that has a footer. Set a
   step smaller and dimmer than the copyright so it reads as a credit and
   never competes with O'Steen's own line. The three footer grounds it lands
   on are all dark (ink, translucent black, dark green), so one white-alpha
   value covers all of them.
   -------------------------------------------------------------------------- */

.footer-credit {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);   /* 5.9:1 on the ink footer - WCAG AA */
}

.footer-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--secondary, #FFD700);
    border-bottom-color: var(--secondary, #FFD700);
}

.footer-credit a:focus-visible {
    outline: 2px solid var(--secondary, #FFD700);
    outline-offset: 3px;
    border-radius: 2px;
}

@media print {
    .aurora-field { display: none; }
}
