/* =========================================================
   THEME: Particle Cosmos  (slug: particle-cosmos)
   A living starfield for ကိန်းပညာ — Burmese numerology + astrology.
   Loads AFTER style.css and OVERRIDES it.

   Concept: deep space (#050816) with several LAYERED, parallax
   star/particle fields drifting at different speeds, occasional
   shooting-star streaks, number .orb spheres that float/orbit and
   glow-pulse in 3D, and cards/buttons that tilt on perspective.

   Palette: deep space + violet (#a78bfa) + cyan (#22d3ee) accents.

   PERFORMANCE: only transform / opacity / filter / background-position
   / box-shadow are animated (GPU-friendly). No width/height/top/left.
   ACCESSIBILITY: prefers-reduced-motion block at the bottom.
   ========================================================= */

/* ---------- 1. Palette override (re-skin :root) ---------- */
:root {
    --bg-0: #030611;
    --bg-1: #07091c;
    --bg-2: #0c1230;
    --panel: rgba(18, 22, 56, 0.62);
    --panel-solid: #0e1336;
    --line: rgba(167, 139, 250, 0.26);
    --line-strong: rgba(167, 139, 250, 0.60);
    /* "gold" tokens repurposed to violet/cyan so existing rules re-skin */
    --gold: #a78bfa;
    --gold-2: #7c5cf0;
    --gold-soft: #c9b8ff;
    --text: #eef0ff;
    --muted: #9aa3d6;
    --good: #5ef2c0;
    --warn: #ff8aa8;
    --mixed: #ffd479;
    --neutral: #7fd4ff;
    --radius: 18px;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    --font-mm: "Noto Sans Myanmar", "Padauk", system-ui, sans-serif;
    --font-display: "Cinzel", serif;

    /* theme-local accents */
    --cosmos-violet: #a78bfa;
    --cosmos-cyan: #22d3ee;
    --cosmos-magenta: #d27bff;
    --cosmos-deep: #050816;
}

/* ===================================================================
   2. BODY — layered parallax cosmos.
   Four background layers, each its own drift speed = parallax depth.
   We animate background-position only (GPU-safe).
   =================================================================== */
body {
    color: var(--text);
    background:
        /* nebula glows (slow breathing via ::after) */
        radial-gradient(1100px 620px at 50% -8%, rgba(124, 92, 240, 0.30) 0%, transparent 60%),
        radial-gradient(820px 520px at 88% 12%, rgba(34, 211, 238, 0.16) 0%, transparent 55%),
        radial-gradient(760px 520px at 8% 86%, rgba(210, 123, 255, 0.16) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0) 62%);
    background-attachment: fixed;
}

/* deep-field shimmer that slowly breathes behind everything */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 70% 20%, rgba(124, 92, 240, 0.18), transparent 70%),
        radial-gradient(55% 45% at 25% 75%, rgba(34, 211, 238, 0.12), transparent 70%);
    filter: blur(8px);
    opacity: 0.9;
    will-change: transform, opacity;
    animation: cosmosBreathe 22s ease-in-out infinite alternate;
}
@keyframes cosmosBreathe {
    0%   { transform: scale(1)    translateZ(0); opacity: 0.65; }
    100% { transform: scale(1.12) translateZ(0); opacity: 1; }
}

/* A roaming particle drift layer on the body (parallax layer A) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 18%, rgba(201, 184, 255, 0.9), transparent),
        radial-gradient(1.6px 1.6px at 62% 8%, rgba(127, 212, 255, 0.8), transparent),
        radial-gradient(1.8px 1.8px at 84% 42%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.4px 1.4px at 33% 64%, rgba(167, 139, 250, 0.85), transparent),
        radial-gradient(2.2px 2.2px at 50% 88%, rgba(210, 123, 255, 0.7), transparent);
    background-size: 540px 540px;
    opacity: 0.55;
    will-change: background-position;
    animation: drA 70s linear infinite;
}
@keyframes drA { to { background-position: 540px -540px; } }

/* ===================================================================
   3. .stars — turn the single static layer into THREE parallax fields
   stacked via box-shadow-free multi-gradients, each at its own pace.
   We also paint shooting stars with the ::before / ::after of .stars.
   =================================================================== */
.stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    /* near field (largest, brightest, fastest) */
    background-image:
        radial-gradient(1.8px 1.8px at 20% 30%, rgba(255,255,255,.95), transparent),
        radial-gradient(1.6px 1.6px at 70% 20%, rgba(201,184,255,.85), transparent),
        radial-gradient(2px 2px   at 40% 70%, rgba(127,212,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.75), transparent),
        radial-gradient(1.7px 1.7px at 10% 80%, rgba(167,139,250,.85), transparent),
        radial-gradient(1.6px 1.6px at 55% 45%, rgba(255,255,255,.7), transparent);
    background-size: 420px 420px;
    background-repeat: repeat;
    will-change: background-position, opacity;
    animation:
        starsNear 48s linear infinite,
        twinkleA 6.5s ease-in-out infinite alternate;
}
@keyframes starsNear { to { background-position: -420px 420px; } }
@keyframes twinkleA {
    0%   { opacity: .55; }
    50%  { opacity: 1; }
    100% { opacity: .7; }
}

/* mid + far fields, plus a shooting star, painted on pseudo-elements */
.stars::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* mid field (medium speed) */
    background-image:
        radial-gradient(1.3px 1.3px at 15% 55%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.1px 1.1px at 80% 35%, rgba(201,184,255,.6), transparent),
        radial-gradient(1.4px 1.4px at 48% 15%, rgba(127,212,255,.6), transparent),
        radial-gradient(1.2px 1.2px at 92% 78%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.3px 1.3px at 30% 90%, rgba(167,139,250,.6), transparent);
    background-size: 680px 680px;
    opacity: .6;
    will-change: background-position;
    animation: starsMid 96s linear infinite, twinkleB 9s ease-in-out infinite alternate;
}
@keyframes starsMid { to { background-position: 680px 0; } }
@keyframes twinkleB { 0%{opacity:.35} 50%{opacity:.8} 100%{opacity:.5} }

.stars::after {
    content: "";
    position: fixed;
    top: -6%;
    left: -20%;
    width: 46%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(127,212,255,0) 0%, rgba(201,184,255,.9) 70%, #fff 100%);
    filter: drop-shadow(0 0 6px rgba(167,139,250,.9));
    border-radius: 999px;
    opacity: 0;
    transform: translate3d(-30vw, -10vh, 0) rotate(18deg);
    will-change: transform, opacity;
    animation: shootingStar 11s ease-in infinite;
}
@keyframes shootingStar {
    0%, 72%   { opacity: 0; transform: translate3d(-30vw, -12vh, 0) rotate(18deg) scaleX(.4); }
    78%       { opacity: 1; }
    92%       { opacity: 1; }
    100%      { opacity: 0; transform: translate3d(150vw, 95vh, 0) rotate(18deg) scaleX(1); }
}

/* second, slower shooting star via a far-field star drift on .container backdrop is overkill;
   instead reuse .page-footer-less area — keep it CSS-only & cheap with one streak above. */

/* ===================================================================
   4. TOP BAR + BRAND
   =================================================================== */
.topbar {
    background: linear-gradient(180deg, rgba(5, 8, 22, 0.96), rgba(7, 9, 28, 0.74));
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.topbar::after {
    /* thin animated aurora line under the bar */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cosmos-violet), var(--cosmos-cyan), transparent);
    background-size: 220% 100%;
    will-change: background-position, opacity;
    animation: auroraSlide 7s linear infinite;
    opacity: .8;
}
.topbar { position: sticky; }
@keyframes auroraSlide { to { background-position: 220% 0; } }

.brand-mark {
    color: var(--cosmos-violet);
    text-shadow: 0 0 16px rgba(167,139,250,.75), 0 0 30px rgba(34,211,238,.35);
    display: inline-block;
    transform-style: preserve-3d;
    will-change: transform, text-shadow;
    animation: brandOrbit 9s ease-in-out infinite;
}
@keyframes brandOrbit {
    0%   { transform: perspective(400px) rotateY(0deg)   translateY(0); }
    25%  { transform: perspective(400px) rotateY(18deg)  translateY(-2px); }
    50%  { transform: perspective(400px) rotateY(0deg)   translateY(0); }
    75%  { transform: perspective(400px) rotateY(-18deg) translateY(-2px); }
    100% { transform: perspective(400px) rotateY(0deg)   translateY(0); }
}
.brand-text strong {
    color: var(--gold-soft);
    background: linear-gradient(90deg, #c9b8ff, #7fd4ff, #c9b8ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
    animation: brandShimmer 8s linear infinite;
}
@keyframes brandShimmer { to { background-position: 200% center; } }
.lang-toggle {
    border: 1px solid var(--line-strong);
    color: var(--cosmos-cyan);
    background: rgba(167,139,250,.08);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.lang-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(34,211,238,.35);
    border-color: var(--cosmos-cyan);
}

/* ===================================================================
   5. SECTION TITLES
   =================================================================== */
.section-title, .section-head h2 {
    color: var(--gold-soft);
    text-shadow: 0 0 18px rgba(167,139,250,.25);
}
.section-title::before {
    width: 26px; height: 2px;
    background: linear-gradient(90deg, var(--cosmos-cyan), var(--cosmos-violet), transparent);
    background-size: 200% 100%;
    border-radius: 2px;
    will-change: background-position, box-shadow;
    animation: titleLine 5s linear infinite;
    box-shadow: 0 0 10px rgba(167,139,250,.6);
}
@keyframes titleLine {
    0%   { background-position: 0 0;   box-shadow: 0 0 8px rgba(167,139,250,.5); }
    50%  { box-shadow: 0 0 16px rgba(34,211,238,.7); }
    100% { background-position: 200% 0; box-shadow: 0 0 8px rgba(167,139,250,.5); }
}

/* ===================================================================
   6. CARDS / PANELS — perspective tilt + entry glow
   =================================================================== */
.card, .num-tile, .comp-card, .list-link, .zcard, .rrow, .reading-card,
.quickfacts, .result-card, .star-hero {
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(9px) saturate(130%);
}
.card {
    box-shadow: var(--shadow);
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .3s;
    will-change: transform;
}
.card:hover {
    transform: perspective(900px) rotateX(2.2deg) rotateY(-2.2deg) translateZ(8px);
    box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 28px rgba(124,92,240,.28);
    border-color: var(--line-strong);
}
.card.glow {
    border-color: var(--line-strong);
    box-shadow: 0 0 34px rgba(124,92,240,.22), var(--shadow);
    position: relative;
    will-change: box-shadow;
    animation: cardGlowPulse 5.5s ease-in-out infinite;
}
@keyframes cardGlowPulse {
    0%, 100% { box-shadow: 0 0 26px rgba(124,92,240,.18), var(--shadow); }
    50%      { box-shadow: 0 0 44px rgba(34,211,238,.30), 0 0 22px rgba(167,139,250,.30), var(--shadow); }
}
.card h2, .card h3 { color: var(--gold-soft); }

/* ===================================================================
   7. HERO — animated nebula wash + lifted heading
   =================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(420px 220px at 50% 0%, rgba(124,92,240,.28), transparent 70%),
        var(--panel);
    border: 1px solid var(--line-strong);
}
.hero::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;
    background:
        radial-gradient(40% 40% at 30% 30%, rgba(34,211,238,.22), transparent 60%),
        radial-gradient(45% 45% at 75% 60%, rgba(210,123,255,.22), transparent 60%);
    filter: blur(14px);
    will-change: transform, opacity;
    animation: heroNebula 18s ease-in-out infinite alternate;
}
@keyframes heroNebula {
    0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);    opacity: .7; }
    100% { transform: translate3d(4%, 3%, 0)   rotate(8deg) scale(1.15); opacity: 1; }
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    color: var(--gold-soft);
    text-shadow: 0 0 22px rgba(167,139,250,.45), 0 2px 0 rgba(0,0,0,.3);
    will-change: transform, text-shadow;
    animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translateZ(0) translateY(0); text-shadow: 0 0 22px rgba(167,139,250,.4); }
    50%      { transform: translateZ(0) translateY(-3px); text-shadow: 0 0 30px rgba(34,211,238,.5); }
}
.hero p { color: var(--muted); }

/* ===================================================================
   8. FORMS
   =================================================================== */
.field label, .star-form .field > span { color: var(--gold-soft); }
.field .hint { color: var(--muted); }
input[type=text], input[type=date], input[type=number], select, .star-form select {
    background: rgba(5,8,22,.62);
    border: 1px solid var(--line);
    color: var(--text);
    transition: border-color .25s, box-shadow .3s, transform .15s;
}
input:focus, select:focus, .star-form select:focus {
    border-color: var(--cosmos-cyan);
    box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 22px rgba(167,139,250,.25);
}

/* ===================================================================
   9. BUTTONS — 3D press + glossy sheen sweep
   =================================================================== */
.btn {
    color: #0a0620;
    background: linear-gradient(135deg, #c9b8ff, #7c5cf0 70%, #22d3ee);
    background-size: 180% 180%;
    box-shadow: 0 10px 28px rgba(124,92,240,.40), inset 0 1px 0 rgba(255,255,255,.35);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background-position .6s;
    will-change: transform, background-position;
}
.btn::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    will-change: transform, opacity;
    animation: btnSheen 4.5s ease-in-out infinite;
    opacity: .8;
}
@keyframes btnSheen {
    0%, 60% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    70%     { opacity: .9; }
    100%    { transform: translateX(360%) skewX(-18deg); opacity: 0; }
}
.btn:hover {
    transform: perspective(600px) translateY(-2px) rotateX(6deg);
    background-position: 100% 50%;
    box-shadow: 0 16px 36px rgba(34,211,238,.40), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:active { transform: perspective(600px) translateY(1px) rotateX(0); }
.btn.secondary, .btn-ghost {
    color: var(--gold-soft);
    background: rgba(167,139,250,.06);
    border: 1px solid var(--line-strong);
    box-shadow: none;
}
.btn.secondary::after, .btn-ghost::after { display: none; }
.btn.secondary:hover, .btn-ghost:hover {
    border-color: var(--cosmos-cyan);
    box-shadow: 0 0 20px rgba(34,211,238,.30);
    transform: translateY(-2px);
}
.btn-gold {
    background: linear-gradient(135deg, var(--cosmos-violet), var(--cosmos-cyan));
    color: #0a0620;
}

/* ===================================================================
   10. NUMBER ORBS — THE PRIME 3D TARGET
   Each orb is a floating planet: it slowly orbits/floats, spins a
   highlight, and glow-pulses. A ::before ring spins in 3D around it.
   =================================================================== */
.orb {
    color: var(--gold-soft);
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.30), transparent 42%),
        radial-gradient(circle at 50% 50%, #3a2a78 0%, #1a1148 55%, #0a0828 100%);
    border: 1.5px solid var(--line-strong);
    box-shadow:
        0 0 30px rgba(124,92,240,.35),
        inset 0 0 22px rgba(0,0,0,.6),
        inset 6px -6px 16px rgba(34,211,238,.18);
    position: relative;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    animation:
        orbFloat 8s ease-in-out infinite,
        orbGlow  5s ease-in-out infinite;
}
@keyframes orbFloat {
    0%   { transform: translate3d(0,0,0)      rotateZ(0deg); }
    25%  { transform: translate3d(4px,-7px,0) rotateZ(2deg); }
    50%  { transform: translate3d(0,-11px,0)  rotateZ(0deg); }
    75%  { transform: translate3d(-4px,-7px,0) rotateZ(-2deg); }
    100% { transform: translate3d(0,0,0)      rotateZ(0deg); }
}
@keyframes orbGlow {
    0%, 100% { box-shadow: 0 0 26px rgba(124,92,240,.30), inset 0 0 22px rgba(0,0,0,.6), inset 6px -6px 16px rgba(34,211,238,.16); }
    50%      { box-shadow: 0 0 46px rgba(167,139,250,.55), 0 0 22px rgba(34,211,238,.35), inset 0 0 22px rgba(0,0,0,.6), inset 6px -6px 18px rgba(34,211,238,.28); }
}
/* spinning orbital ring (3D) */
.orb::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(34,211,238,.75);
    border-bottom-color: rgba(167,139,250,.6);
    filter: drop-shadow(0 0 6px rgba(34,211,238,.5));
    will-change: transform;
    animation: orbRing 7s linear infinite;
    pointer-events: none;
}
@keyframes orbRing {
    0%   { transform: rotateX(68deg) rotateZ(0deg); }
    100% { transform: rotateX(68deg) rotateZ(360deg); }
}
/* roaming specular highlight that drifts across the sphere */
.orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.5), transparent 38%);
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: orbShine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes orbShine {
    0%, 100% { transform: rotate(0deg) scale(1);    opacity: .55; }
    50%      { transform: rotate(20deg) scale(1.05); opacity: .9; }
}
.orb .num {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 14px rgba(201,184,255,.7);
}
/* size-specific tuning: smaller orbs float gentler & faster */
.orb.small { animation-duration: 6.5s, 4.2s; }
.orb.tiny  { animation-duration: 5.5s, 3.6s; }
.orb.tiny::before { inset: -6px; }
.orb.big   { animation-duration: 10s, 6s; }
/* stagger nearby orbs so a trio doesn't pulse in lockstep */
.trio .orb,
.num-tile .orb { animation-delay: 0s, 0s; }
.trio > div:nth-child(2) .orb { animation-delay: -2.6s, -1.7s; }
.trio > div:nth-child(3) .orb { animation-delay: -5.2s, -3.4s; }

/* result hero trio labels */
.trio .label { color: var(--muted); }
.trio .pname { color: var(--cosmos-cyan); }

/* big result numbers glow-pulse */
.rnum-v, .reading-bignum, .score-big {
    color: var(--gold-soft);
    text-shadow: 0 0 18px rgba(167,139,250,.5);
    will-change: text-shadow, transform;
    animation: bigNumPulse 4.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes bigNumPulse {
    0%, 100% { text-shadow: 0 0 16px rgba(167,139,250,.45); transform: scale(1); }
    50%      { text-shadow: 0 0 30px rgba(34,211,238,.65), 0 0 14px rgba(167,139,250,.6); transform: scale(1.03); }
}

/* ===================================================================
   11. NUM TILES / COMP CARDS / LIST LINKS — hover lift, auto shimmer
   =================================================================== */
.num-tile {
    transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
    will-change: transform;
}
.num-tile:hover {
    transform: perspective(700px) translateY(-4px) rotateX(6deg);
    border-color: var(--cosmos-violet);
    box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 20px rgba(124,92,240,.3);
}
.num-tile:active { transform: scale(.97); }
.num-tile .pn { color: var(--cosmos-cyan); }
.comp-card .cn { color: var(--gold-soft); }
.list-link {
    transition: transform .2s ease, border-color .25s, box-shadow .25s;
}
.list-link:hover {
    transform: translateX(4px);
    border-color: var(--cosmos-violet);
    box-shadow: 0 0 22px rgba(124,92,240,.25);
}
.list-link .arr, .rrow-arr, .intro-banner-arr { color: var(--cosmos-cyan); }
/* arrow nudges to invite the tap (touch users see motion too) */
.list-link .arr, .rrow-arr {
    display: inline-block;
    will-change: transform;
    animation: arrNudge 2.4s ease-in-out infinite;
}
@keyframes arrNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* ===================================================================
   12. KV / CHIPS / TAGS / SWATCH
   =================================================================== */
.kv dt { color: var(--gold-soft); }
.chip {
    border: 1px solid var(--line);
    background: rgba(167,139,250,.07);
    color: var(--text);
    transition: transform .2s, box-shadow .25s, border-color .2s;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(124,92,240,.3); border-color: var(--line-strong); }
.chip.gold, .chip-day { border-color: var(--line-strong); color: var(--gold-soft); }
.tag {
    transition: transform .2s, box-shadow .25s;
    will-change: box-shadow;
}
.tag:hover { transform: translateY(-1px); }
.tag-good    { color: var(--good);    animation: tagGlow 4s ease-in-out infinite; }
.tag-warn    { color: var(--warn); }
.tag-mixed   { color: var(--mixed); }
.tag-neutral { color: var(--neutral); }
@keyframes tagGlow {
    0%,100% { box-shadow: 0 0 0 rgba(94,242,192,0); }
    50%     { box-shadow: 0 0 14px rgba(94,242,192,.4); }
}
.swatch i {
    border: 1px solid rgba(255,255,255,.3);
    transition: transform .25s, box-shadow .25s;
}
.swatch:hover i { transform: scale(1.15); box-shadow: 0 0 12px currentColor; }

/* ===================================================================
   13. CALLOUT / DIVIDER / PROSE / BREADCRUMB / LETTERSTRIP
   =================================================================== */
.callout {
    border: 1px solid var(--line-strong);
    background: radial-gradient(320px 130px at 0% 0%, rgba(124,92,240,.16), transparent 70%), var(--panel);
    position: relative;
    overflow: hidden;
}
.callout::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cosmos-cyan), var(--cosmos-violet), var(--cosmos-magenta));
    background-size: 100% 220%;
    will-change: background-position;
    animation: calloutEdge 6s linear infinite;
}
@keyframes calloutEdge { to { background-position: 0 220%; } }
.callout .lead, .lead { color: var(--gold-soft); }

.divider {
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    background-size: 200% 100%;
    will-change: background-position;
    animation: dividerFlow 8s linear infinite;
}
@keyframes dividerFlow { to { background-position: 200% 0; } }

.prose h2, .prose h3 { color: var(--gold-soft); }
.prose-list li {
    border-left: 2px solid var(--line-strong);
    background: rgba(167,139,250,.06);
    transition: transform .2s, border-color .2s, background .2s;
}
.prose-list li:hover { transform: translateX(3px); border-color: var(--cosmos-cyan); }
.breadcrumb a { color: var(--cosmos-cyan); }
a { color: var(--cosmos-violet); }

.letterstrip .lt {
    background: rgba(5,8,22,.6);
    border: 1px solid var(--line);
    transition: transform .2s, border-color .2s, box-shadow .25s;
}
.letterstrip .lt:hover {
    transform: translateY(-3px) rotateX(8deg);
    border-color: var(--cosmos-violet);
    box-shadow: 0 8px 18px rgba(0,0,0,.4), 0 0 14px rgba(124,92,240,.3);
}
.letterstrip .lt b { color: var(--gold-soft); }

/* ===================================================================
   14. BOTTOM NAV + TO-TOP
   =================================================================== */
.bottom-nav {
    background: linear-gradient(180deg, rgba(5,8,22,.84), rgba(5,8,22,.98));
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid var(--line);
}
.nav-item {
    color: var(--muted);
    transition: transform .2s, color .2s;
}
.nav-item svg { transition: transform .25s, filter .25s; }
.nav-item:hover { color: var(--gold-soft); }
.nav-item:hover svg { transform: translateY(-2px) scale(1.08); }
.nav-item.is-active { color: var(--cosmos-violet); }
.nav-item.is-active svg {
    filter: drop-shadow(0 0 8px rgba(167,139,250,.8));
    will-change: filter, transform;
    animation: navPulse 3s ease-in-out infinite;
}
@keyframes navPulse {
    0%,100% { filter: drop-shadow(0 0 6px rgba(167,139,250,.6)); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 12px rgba(34,211,238,.8)); transform: scale(1.1); }
}
.to-top {
    background: var(--panel-solid);
    border: 1px solid var(--line-strong);
    color: var(--cosmos-cyan);
    transition: transform .25s, box-shadow .25s;
    will-change: transform;
    animation: toTopBob 3s ease-in-out infinite;
}
@keyframes toTopBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.to-top:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(34,211,238,.5); }

.page-footer { border-top: 1px solid var(--line); color: var(--muted); }

/* ===================================================================
   15. METERS / COMPATIBILITY
   =================================================================== */
.meter {
    background: rgba(5,8,22,.6);
    border: 1px solid var(--line);
}
.meter > i {
    background: linear-gradient(90deg, var(--cosmos-violet), var(--cosmos-cyan), var(--cosmos-magenta));
    background-size: 200% 100%;
    will-change: background-position;
    animation: meterFlow 3.5s linear infinite;
    box-shadow: 0 0 12px rgba(34,211,238,.5);
}
@keyframes meterFlow { to { background-position: 200% 0; } }
.pair .vs { color: var(--cosmos-cyan); }
.pair .pname { color: var(--cosmos-violet); }

/* ===================================================================
   16. "YOU & YOUR STAR" — zodiac blocks
   =================================================================== */
.star-hero {
    background:
        radial-gradient(120% 120% at 50% -20%, rgba(124,92,240,.42), transparent 60%),
        linear-gradient(180deg, rgba(18,22,56,.86), rgba(7,9,28,.72));
    border: 1px solid var(--line-strong);
    position: relative;
    overflow: hidden;
}
.star-hero::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: radial-gradient(40% 40% at 50% 50%, rgba(34,211,238,.18), transparent 60%);
    filter: blur(12px);
    will-change: transform, opacity;
    animation: heroNebula 20s ease-in-out infinite alternate;
}
.star-hero > * { position: relative; z-index: 1; }
.star-emblem {
    color: var(--cosmos-violet);
    text-shadow: 0 0 22px rgba(167,139,250,.7), 0 0 40px rgba(34,211,238,.3);
    /* keep original starSpin but layer a gentle float */
    animation: starSpin 26s linear infinite, heroFloat 7s ease-in-out infinite;
}
.hero-sub, .zcard-sign, .zdates, .reading-zmonth, .zhero-sign { color: var(--muted); }
.lookup-title, .qf-head, .card-title, .zname, .reading-zsign, .reading-title, .zcard-month { color: var(--gold-soft); }

/* quick-facts panel */
.quickfacts {
    border: 1px solid var(--line-strong);
    background: rgba(167,139,250,.06);
}
.qf-ico, .qf-label { color: var(--cosmos-cyan); }
.qf-item { border-top: 1px solid var(--line); }

/* zodiac cards */
.zcard {
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
    will-change: transform;
}
.zcard:hover {
    transform: perspective(700px) translateY(-5px) rotateX(7deg);
    border-color: var(--cosmos-violet);
    box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 22px rgba(124,92,240,.3);
}
.zcard-sym, .zsym, .zhero-sym, .reading-zsym {
    color: var(--cosmos-violet);
    text-shadow: 0 0 16px rgba(167,139,250,.55);
}
.zhero-sym {
    display: inline-block;
    will-change: transform, text-shadow;
    animation: heroFloat 7s ease-in-out infinite, orbGlowText 6s ease-in-out infinite;
}
@keyframes orbGlowText {
    0%,100% { text-shadow: 0 0 16px rgba(167,139,250,.5); }
    50%     { text-shadow: 0 0 28px rgba(34,211,238,.7); }
}

/* zmeta grid */
.zmeta { background: var(--line); border: 1px solid var(--line); }
.zmeta-item { background: var(--panel-solid); }
.zmeta-l { color: var(--muted); }
.zmeta-v { color: var(--gold-soft); }
.zhero-info h1 { color: var(--gold-soft); }

/* reading rows */
.rrow {
    transition: border-color .2s, transform .2s, box-shadow .25s;
    will-change: transform;
}
.rrow:hover {
    border-color: var(--cosmos-violet);
    transform: translateX(4px);
    box-shadow: 0 0 22px rgba(124,92,240,.25);
}
.rrow-num {
    color: var(--cosmos-cyan);
    background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.25), transparent);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 12px rgba(0,0,0,.4);
}
.rrow-dates { color: var(--gold-soft); }
.rrow-planets { color: var(--muted); }

.reading-card, .result-card {
    border-color: var(--line-strong);
    box-shadow: 0 0 30px rgba(124,92,240,.20), var(--shadow);
}
.reading-hero { border-bottom: 1px solid var(--line); }

/* intro banner */
.intro-banner {
    background: linear-gradient(135deg, rgba(124,92,240,.24), rgba(18,22,56,.5));
    border: 1px solid var(--line-strong);
    transition: transform .3s, box-shadow .3s;
}
.intro-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 22px rgba(124,92,240,.3); }
.intro-banner-ico { color: var(--cosmos-violet); }
.intro-banner-txt strong { color: var(--gold-soft); }

/* star prose subsection markers */
.star-prose .prose-sub { color: var(--cosmos-violet); border-bottom: 1px solid var(--line); }
.star-prose .prose-sub::before { color: var(--cosmos-cyan); }

/* alerts */
.alert-cusp { background: rgba(124,92,240,.16); border: 1px solid var(--line-strong); color: var(--gold-soft); }

/* ===================================================================
   17. MAHABOTE chart cells
   =================================================================== */
.mb-cell { border: 1px solid var(--line); transition: transform .2s, box-shadow .25s; }
.mb-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.mb-cell.is-birth {
    box-shadow: 0 0 0 2px var(--cosmos-violet);
    will-change: box-shadow;
    animation: birthPulse 3.5s ease-in-out infinite;
}
@keyframes birthPulse {
    0%,100% { box-shadow: 0 0 0 2px var(--cosmos-violet), 0 0 8px rgba(167,139,250,.3); }
    50%     { box-shadow: 0 0 0 2px var(--cosmos-cyan), 0 0 18px rgba(34,211,238,.5); }
}
.mb-house { color: var(--gold-soft); }
.mb-pos { color: var(--cosmos-cyan); }

/* ===================================================================
   18. ELEMENT CARDS / AFFINITY METER / TIERS  (triangle blocks)
   These selectors may not exist in base CSS but are themed for the
   triangle/affinity feature; harmless if absent.
   =================================================================== */
.el-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
    will-change: transform;
}
.el-card:hover {
    transform: perspective(700px) translateY(-4px) rotateX(6deg);
    border-color: var(--cosmos-violet);
    box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 22px rgba(124,92,240,.3);
}
.aff-meter {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(5,8,22,.6);
    border: 1px solid var(--line);
    position: relative;
}
.aff-meter > i, .aff-meter::before {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cosmos-violet), var(--cosmos-cyan), var(--cosmos-magenta));
    background-size: 220% 100%;
    will-change: background-position;
    animation: meterFlow 3.5s linear infinite;
    box-shadow: 0 0 12px rgba(34,211,238,.5);
}
.aff-meter::before { position: absolute; inset: 0; opacity: 0; } /* only used if no <i> */
.aff-meter:empty::before { opacity: 1; }

.tier-1, .tier-good, .tier-high { color: var(--good); }
.tier-2, .tier-mixed { color: var(--mixed); }
.tier-3, .tier-warn, .tier-low { color: var(--warn); }
[class*="tier-"] {
    transition: transform .2s, box-shadow .25s;
}
[class*="tier-"]:hover { transform: translateY(-1px); }

/* ===================================================================
   19. RESPONSIVE GUARDS — make sure animations never overflow
   =================================================================== */
/* clip any decorative overflow at the root so drifting layers/streaks
   never create a horizontal scrollbar on phones */
html, body { overflow-x: hidden; }

@media (max-width: 440px) {
    /* gentler orb travel on small screens to avoid crowding */
    @keyframes orbFloat {
        0%   { transform: translate3d(0,0,0)     rotateZ(0deg); }
        50%  { transform: translate3d(0,-7px,0)  rotateZ(0deg); }
        100% { transform: translate3d(0,0,0)     rotateZ(0deg); }
    }
}

/* ===================================================================
   20. ACCESSIBILITY — calm version for motion-sensitive users
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    /* keep the static beauty: shooting star + drifting fields simply
       rest in a pleasant position, nothing moves. */
    .stars::after { opacity: 0; }
    .btn::after { display: none; }
}