/* ============================================================
   NatalSky COSMOS HERO (Tetka, 2026-07-22)
   Dark svemirski hero sa rotirajucim zodijackim prstenovima.
   SCOPE: iskljucivo body.page-home .av-hero, ostatak sajta (Observatory
   svetla tema) se NE dira. Ucitava se posle webb.css, samo na home.
   ============================================================ */

body.page-home .av-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(130% 130% at 50% 42%, #16161d 0%, #101015 55%, #0a0a0e 100%);
    border-bottom: 0;
}

/* ---------- pozadinski slojevi (markup: .ns-cosmos u home.php) ---------- */
body.page-home .ns-cosmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* tri sloja zvezda, razlicite gustine i treperenje razlicitim ritmom */
body.page-home .ns-stars {
    position: absolute;
    inset: -60px;
    background-repeat: repeat;
}
body.page-home .ns-stars.s1 {
    background-image:
        radial-gradient(1px 1px at 24px 36px, rgba(255,255,255,0.9), transparent 55%),
        radial-gradient(1px 1px at 120px 88px, rgba(255,255,255,0.7), transparent 55%),
        radial-gradient(1.5px 1.5px at 190px 30px, rgba(255,255,255,0.85), transparent 55%),
        radial-gradient(1px 1px at 68px 150px, rgba(255,255,255,0.6), transparent 55%),
        radial-gradient(1px 1px at 160px 178px, rgba(255,255,255,0.75), transparent 55%);
    background-size: 230px 210px;
    animation: ns-twinkle 5.5s ease-in-out infinite alternate;
}
body.page-home .ns-stars.s2 {
    background-image:
        radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,0.8), transparent 55%),
        radial-gradient(2px 2px at 210px 140px, rgba(214,222,255,0.9), transparent 55%),
        radial-gradient(1px 1px at 130px 20px, rgba(255,255,255,0.55), transparent 55%),
        radial-gradient(1.5px 1.5px at 300px 200px, rgba(255,240,214,0.8), transparent 55%);
    background-size: 340px 260px;
    animation: ns-twinkle 7.5s ease-in-out 1.2s infinite alternate;
}
body.page-home .ns-stars.s3 {
    background-image:
        radial-gradient(2px 2px at 80px 120px, rgba(255,255,255,0.95), transparent 55%),
        radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,0.5), transparent 55%),
        radial-gradient(2.5px 2.5px at 420px 190px, rgba(255,246,220,0.9), transparent 55%);
    background-size: 480px 300px;
    animation: ns-twinkle 9s ease-in-out 2.4s infinite alternate;
}
@keyframes ns-twinkle {
    0%   { opacity: 0.45; }
    100% { opacity: 1; }
}

/* ---------- rotirajuci zodijacki prstenovi ---------- */
body.page-home .ns-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
body.page-home .ns-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}
body.page-home .ns-ring.r1 {
    width: 620px;
    height: 620px;
    animation: ns-spin 90s linear infinite;
}
body.page-home .ns-ring.r2 {
    width: 880px;
    height: 880px;
    border-color: rgba(255, 255, 255, 0.08);
    animation: ns-spin 140s linear infinite reverse;
}
body.page-home .ns-ring.r3 {
    width: 1180px;
    height: 1180px;
    border-color: rgba(255, 255, 255, 0.06);
    animation: ns-spin 200s linear infinite;
}
@keyframes ns-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* znakovi na prstenu: <i> pokriva ceo prsten i rotira se za svoj ugao,
   <b> je glif na vrhu prstena */
body.page-home .ns-ring i {
    position: absolute;
    inset: -1px;
    font-style: normal;
}
body.page-home .ns-ring i b {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -9px;
    width: 18px;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    color: rgba(214, 186, 132, 0.6);
    text-shadow: 0 0 12px rgba(214, 186, 132, 0.35);
}
body.page-home .ns-ring.r2 i b { font-size: 13px; color: rgba(255, 255, 255, 0.35); }
body.page-home .ns-ring.r3 i b { font-size: 12px; color: rgba(255, 255, 255, 0.22); }

/* ---------- tekst na tamnom ---------- */
body.page-home .av-hero-inner { position: relative; z-index: 1; }

body.page-home .av-hero-badge { color: #d6ba84; }
body.page-home .av-hero-badge::before { background: #d6ba84; }
body.page-home .av-hero h1 { color: #f6f4ee; }
body.page-home .av-hero h1 em { color: #d6ba84; }
body.page-home .av-hero-sub { color: #b8bacd; }

body.page-home .hero-system-selector .hss-label { color: #9fa1b8; }
body.page-home .hero-system-selector .hss-radio { color: #e6e6f0; }
body.page-home .hero-system-selector .hss-radio input { accent-color: #d6ba84; }

body.page-home .av-hero .btn-outline {
    color: #f2f0ea;
    border-color: rgba(255, 255, 255, 0.38);
    background: transparent;
}
body.page-home .av-hero .btn-outline:hover {
    border-color: #d6ba84;
    color: #d6ba84;
    background: rgba(214, 186, 132, 0.08);
}

/* ---------- ukrasni zodijacki tocak ---------- */
body.page-home #nsZodiacWheel {
    width: 100%;
    max-width: 660px;
}
body.page-home #nsZodiacWheel svg {
    display: block;
    width: 100%;
    height: auto;
    animation: ns-spin-wheel 30s linear infinite;
}
@keyframes ns-spin-wheel {
    to { transform: rotate(360deg); }
}

/* ---------- sazvezdja u pozadini hero-a ---------- */
body.page-home .ns-constel {
    position: absolute;
    opacity: 0.35;
}
body.page-home .ns-constel polyline { stroke: rgba(240, 238, 228, 0.5); stroke-width: 1; fill: none; }
body.page-home .ns-constel circle { fill: rgba(250, 248, 240, 0.85); }
body.page-home .ns-constel.c1 { top: 8%; left: 4%; width: 150px; }
body.page-home .ns-constel.c2 { bottom: 12%; left: 12%; width: 130px; }
body.page-home .ns-constel.c3 { top: 14%; right: 6%; width: 140px; }

/* ---------- mobilni ---------- */
@media (max-width: 900px) {
    body.page-home .ns-ring.r3 { display: none; }
    body.page-home .ns-ring.r1 { width: 420px; height: 420px; }
    body.page-home .ns-ring.r2 { width: 620px; height: 620px; }
}