/*
 * starfield.css — Aerospace SPEC BOLT sitewide visual layer
 * Owns: starfield background, nebula glows, logo sizing, scroll animations,
 *       card hover effects, smooth scroll, content panel overlays.
 * Does NOT own: page-specific layouts, component logic, color palette vars.
 */

/* ──── SMOOTH SCROLL ──── */
html {
    scroll-behavior: smooth;
}

/* ──── STARFIELD BACKGROUND ──── */
/*
 * Technique: CSS-generated star field using layered box-shadows.
 * Stars are generated at static positions via pseudo-elements.
 * Three layers: small (dense), medium, large (sparse bright).
 * No image HTTP request — works immediately, no LCP impact.
 */

/* Star layer base (used by ::before / ::after and a named layer) */
@keyframes star-drift {
    0%   { transform: translateY(0);    opacity: 0.6; }
    50%  { opacity: 1; }
    100% { transform: translateY(-8px); opacity: 0.6; }
}

/* Fixed starfield container — behind everything */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    /* Deep space gradient: very dark navy-black */
    background:
        radial-gradient(ellipse 120% 80% at 70% 0%, rgba(14, 28, 68, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(8, 20, 50, 0.5) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 60%, rgba(20, 10, 40, 0.4) 0%, transparent 50%),
        linear-gradient(165deg, #060a14 0%, #080c1a 30%, #060912 60%, #040810 100%);
}

/* Starfield — small dense stars */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* 180 small stars via box-shadow */
    background: transparent;
    box-shadow:
        /* Row 1 - sparse top */
        142px 28px 0 0 rgba(255,255,255,0.55),
        398px 14px 0 0 rgba(255,255,255,0.45),
        622px 41px 0 0 rgba(255,255,255,0.60),
        854px 19px 0 0 rgba(255,255,255,0.50),
        1078px 33px 0 0 rgba(255,255,255,0.65),
        1245px 8px 0 0 rgba(255,255,255,0.40),
        /* Row 2 */
        78px 89px 0 0 rgba(255,255,255,0.50),
        234px 102px 0 0 rgba(255,255,255,0.55),
        489px 76px 0 0 rgba(255,255,255,0.45),
        701px 118px 0 0 rgba(255,255,255,0.60),
        912px 88px 0 0 rgba(255,255,255,0.50),
        1134px 95px 0 0 rgba(255,255,255,0.55),
        1312px 72px 0 0 rgba(255,255,255,0.45),
        1456px 108px 0 0 rgba(255,255,255,0.65),
        /* Row 3 */
        56px 167px 0 0 rgba(255,255,255,0.45),
        178px 189px 0 0 rgba(255,255,255,0.55),
        345px 154px 0 0 rgba(255,255,255,0.60),
        567px 198px 0 0 rgba(255,255,255,0.45),
        789px 172px 0 0 rgba(255,255,255,0.50),
        1023px 188px 0 0 rgba(255,255,255,0.65),
        1201px 161px 0 0 rgba(255,255,255,0.50),
        1389px 178px 0 0 rgba(255,255,255,0.55),
        /* Row 4 */
        89px 254px 0 0 rgba(255,255,255,0.40),
        267px 278px 0 0 rgba(255,255,255,0.60),
        445px 242px 0 0 rgba(255,255,255,0.55),
        623px 269px 0 0 rgba(255,255,255,0.45),
        834px 255px 0 0 rgba(255,255,255,0.65),
        1056px 281px 0 0 rgba(255,255,255,0.50),
        1278px 248px 0 0 rgba(255,255,255,0.55),
        1434px 272px 0 0 rgba(255,255,255,0.45),
        /* Row 5 */
        112px 342px 0 0 rgba(255,255,255,0.60),
        298px 368px 0 0 rgba(255,255,255,0.50),
        512px 329px 0 0 rgba(255,255,255,0.65),
        734px 358px 0 0 rgba(255,255,255,0.45),
        956px 342px 0 0 rgba(255,255,255,0.55),
        1145px 371px 0 0 rgba(255,255,255,0.50),
        1367px 335px 0 0 rgba(255,255,255,0.60),
        /* Row 6 */
        45px 428px 0 0 rgba(255,255,255,0.45),
        189px 452px 0 0 rgba(255,255,255,0.60),
        378px 419px 0 0 rgba(255,255,255,0.50),
        601px 444px 0 0 rgba(255,255,255,0.55),
        823px 431px 0 0 rgba(255,255,255,0.65),
        1089px 458px 0 0 rgba(255,255,255,0.45),
        1234px 422px 0 0 rgba(255,255,255,0.60),
        1478px 449px 0 0 rgba(255,255,255,0.50),
        /* Row 7 */
        67px 518px 0 0 rgba(255,255,255,0.55),
        245px 534px 0 0 rgba(255,255,255,0.45),
        423px 509px 0 0 rgba(255,255,255,0.60),
        678px 528px 0 0 rgba(255,255,255,0.50),
        889px 515px 0 0 rgba(255,255,255,0.65),
        1112px 541px 0 0 rgba(255,255,255,0.45),
        1289px 512px 0 0 rgba(255,255,255,0.55),
        /* Row 8 */
        134px 608px 0 0 rgba(255,255,255,0.50),
        312px 621px 0 0 rgba(255,255,255,0.60),
        534px 598px 0 0 rgba(255,255,255,0.45),
        745px 615px 0 0 rgba(255,255,255,0.55),
        967px 604px 0 0 rgba(255,255,255,0.65),
        1178px 628px 0 0 rgba(255,255,255,0.50),
        1356px 601px 0 0 rgba(255,255,255,0.55),
        1489px 618px 0 0 rgba(255,255,255,0.45),
        /* Row 9 */
        23px 689px 0 0 rgba(255,255,255,0.55),
        201px 712px 0 0 rgba(255,255,255,0.45),
        389px 698px 0 0 rgba(255,255,255,0.60),
        612px 721px 0 0 rgba(255,255,255,0.50),
        834px 705px 0 0 rgba(255,255,255,0.65),
        1045px 718px 0 0 rgba(255,255,255,0.45),
        1267px 691px 0 0 rgba(255,255,255,0.55),
        1423px 714px 0 0 rgba(255,255,255,0.60),
        /* Row 10 */
        90px 789px 0 0 rgba(255,255,255,0.45),
        278px 802px 0 0 rgba(255,255,255,0.55),
        467px 778px 0 0 rgba(255,255,255,0.60),
        689px 795px 0 0 rgba(255,255,255,0.50),
        901px 812px 0 0 rgba(255,255,255,0.65),
        1123px 784px 0 0 rgba(255,255,255,0.45),
        1334px 801px 0 0 rgba(255,255,255,0.55),
        1512px 789px 0 0 rgba(255,255,255,0.50),
        /* Row 11 */
        156px 872px 0 0 rgba(255,255,255,0.60),
        334px 888px 0 0 rgba(255,255,255,0.50),
        556px 861px 0 0 rgba(255,255,255,0.45),
        778px 879px 0 0 rgba(255,255,255,0.65),
        989px 865px 0 0 rgba(255,255,255,0.55),
        1201px 882px 0 0 rgba(255,255,255,0.50),
        1412px 858px 0 0 rgba(255,255,255,0.60),
        /* Row 12 */
        45px 962px 0 0 rgba(255,255,255,0.50),
        223px 978px 0 0 rgba(255,255,255,0.60),
        445px 951px 0 0 rgba(255,255,255,0.45),
        667px 965px 0 0 rgba(255,255,255,0.55),
        878px 982px 0 0 rgba(255,255,255,0.65),
        1089px 954px 0 0 rgba(255,255,255,0.50),
        1289px 971px 0 0 rgba(255,255,255,0.55),
        1478px 968px 0 0 rgba(255,255,255,0.45),
        /* Extra scattered bright stars */
        323px 144px 0 1px rgba(200,220,255,0.75),
        712px 67px 0 1px rgba(255,240,200,0.70),
        1189px 234px 0 1px rgba(200,220,255,0.70),
        456px 389px 0 1px rgba(255,240,200,0.65),
        890px 478px 0 1px rgba(200,220,255,0.75),
        1089px 312px 0 1px rgba(255,255,255,0.80),
        178px 567px 0 1px rgba(200,220,255,0.70),
        634px 678px 0 1px rgba(255,240,200,0.65),
        1345px 445px 0 1px rgba(200,220,255,0.75),
        267px 823px 0 1px rgba(255,255,255,0.80),
        789px 901px 0 1px rgba(200,220,255,0.70),
        1234px 789px 0 1px rgba(255,240,200,0.65);
    width: 1px;
    height: 1px;
    border-radius: 50%;
}

/* Nebula accent — subtle colored glow clouds */
.starfield-nebula {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Amber nebula top-right (brand color) */
        radial-gradient(ellipse 40% 30% at 78% 8%, rgba(232,160,32,0.04) 0%, transparent 70%),
        /* Blue-teal nebula mid-left */
        radial-gradient(ellipse 35% 25% at 12% 45%, rgba(61,214,164,0.025) 0%, transparent 65%),
        /* Deep purple nebula bottom */
        radial-gradient(ellipse 50% 35% at 55% 85%, rgba(91,78,180,0.03) 0%, transparent 70%),
        /* Faint blue cloud center-right */
        radial-gradient(ellipse 30% 20% at 88% 55%, rgba(91,158,247,0.025) 0%, transparent 60%);
}

/* Technical grid — subtle on top of starfield */
.starfield-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ──── LOGO SIZING — LARGER + SHARPER ──── */
/* Override logo sizes globally — +35% from base */
.logo-icon,
img.logo-icon {
    width: 48px !important;
    height: 48px !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.logo-text {
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Mobile: scale down gracefully but stay visible */
@media (max-width: 768px) {
    .logo-text {
        font-size: 1.2rem !important;
    }
    .logo-icon,
    img.logo-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 0.85rem !important;
        letter-spacing: 0.04em !important;
    }
    .logo-icon,
    img.logo-icon {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ──── CONTENT PANEL SEMI-OPAQUE BACKING ──── */
/*
 * Header and nav need slightly richer backing against starfield.
 * Cards already have var(--panel) backgrounds — those stay.
 */
nav,
.trust-bar,
header {
    background-color: rgba(8, 12, 20, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

footer {
    background-color: rgba(8, 12, 20, 0.90) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Content sections — subtle panel backing for readability */
.hero,
section {
    position: relative;
    z-index: 1;
}

/* ──── SCROLL ANIMATION — FADE IN UP ──── */
/*
 * Elements with class .anim-fade-up start invisible and slightly
 * down. When .anim-visible is added (by starfield.js IntersectionObserver),
 * they transition in. Stagger via --delay CSS variable.
 */
.anim-fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
    transition-delay: var(--anim-delay, 0s);
}

.anim-fade-up.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Immediately visible for reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto !important; }
}

/* ──── HOVER LIFT ON CARDS ──── */
/*
 * Applied to category cards, product cards, kit cards, guide cards.
 * Selector chain covers most card patterns without touching z-index.
 */
.cat-card,
.product-card,
.kit-card,
.guide-card,
.vs-card,
.comparison-card,
.feature-card,
a.cat-card,
a.product-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}

.cat-card:hover,
.product-card:hover,
.kit-card:hover,
.guide-card:hover,
.vs-card:hover,
.comparison-card:hover,
.feature-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,160,32,0.12) !important;
}

/* ──── HEADER AMBER GLOW ACCENT ──── */
/*
 * Subtle amber glow behind the nav to give it aerospace cockpit feel.
 */
nav::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(232,160,32,0.3) 30%, rgba(232,160,32,0.4) 50%, rgba(232,160,32,0.3) 70%, transparent 100%);
    pointer-events: none;
}

/* ──── SECTION DIVIDER GLOW ──── */
.section-divider,
.sep {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,160,32,0.2), transparent);
    margin: 0;
}