/*
 * TABAIX Glassmorphic Aurora Theme
 * Dark gold glassmorphic style overrides.
 */

/* ── Glassmorphic theme: enforce dark background over any cached CSS ── */
body { background: #05050F !important; color: #F0F0FF !important; }
html { background: #05050F !important; }
#site-main { background: #05050F !important; }
.hero, #hero { background: transparent !important; }

/* ── Animated Aurora Background — desktop only ── */
.aurora {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--glass-bg, #05050F);
}

/* Disable GPU-heavy blobs on mobile — big perf win */
@media (max-width: 768px) {
    .aurora div { display: none !important; }
}

.aurora div {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: aurora-drift 25s infinite alternate ease-in-out;
    will-change: transform;
}

/* Top-left — deep gold glow */
.aurora .a1 {
    width: 70vw; height: 70vw;
    top: -20vw; left: -20vw;
    background: radial-gradient(circle,
        rgba(201,168,76,0.12) 0%,
        rgba(139,105,20,0.06) 40%,
        transparent 70%
    );
    animation-duration: 28s;
}

/* Bottom-right — amber accent */
.aurora .a2 {
    width: 55vw; height: 55vw;
    bottom: -15vw; right: -15vw;
    background: radial-gradient(circle,
        rgba(201,168,76,0.08) 0%,
        rgba(245,217,139,0.04) 40%,
        transparent 70%
    );
    animation-delay: -8s;
    animation-duration: 22s;
}

/* Center — subtle deep navy shimmer */
.aurora .a3 {
    width: 45vw; height: 45vw;
    top: 30vh; left: 25vw;
    background: radial-gradient(circle,
        rgba(30,20,80,0.18) 0%,
        rgba(10,5,30,0.08) 50%,
        transparent 70%
    );
    animation-delay: -14s;
    animation-duration: 18s;
}

@keyframes aurora-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(4vw, -4vh) scale(1.08); }
    66%  { transform: translate(-3vw, 6vh) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ── Glass effect on nav & cards ── */
.theme-glassmorphic .site-header {
    background: rgba(5,5,15,0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(201,168,76,0.12) !important;
}

.theme-glassmorphic .tc,
.theme-glassmorphic .blog-card,
.theme-glassmorphic .card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Gold glow on hover ── */
.theme-glassmorphic .tc:hover,
.theme-glassmorphic .blog-card:hover,
.theme-glassmorphic .card:hover {
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6),
                0 0 24px -4px rgba(201,168,76,0.18) !important;
    border-color: rgba(201,168,76,0.45) !important;
}

/* ── Hero title gradients ── */
.theme-glassmorphic .l2,
.theme-glassmorphic .gold-text {
    background: linear-gradient(135deg, #C9A84C 0%, #F5D98B 50%, #C9A84C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-glassmorphic .l3 {
    -webkit-text-stroke: 2px #C9A84C;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Section pills ── */
.theme-glassmorphic .section-pill,
.theme-glassmorphic .hero-badge {
    background: rgba(201,168,76,0.1) !important;
    border-color: rgba(201,168,76,0.25) !important;
    color: #C9A84C !important;
    backdrop-filter: blur(6px);
}

/* ── Stat numbers gold gradient ── */
.theme-glassmorphic .stat-n {
    background: linear-gradient(135deg, #C9A84C, #F5D98B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Footer ── */
.theme-glassmorphic .site-footer {
    background: rgba(3,3,10,0.95) !important;
    border-top: 1px solid rgba(201,168,76,0.1) !important;
    backdrop-filter: blur(12px);
}

/* ── Respect prefers-reduced-motion (accessibility + perf) ── */
@media (prefers-reduced-motion: reduce) {
    .aurora div { animation: none !important; }
    .rv { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ── Mobile performance — comprehensive ────────────────────
   Removes ALL expensive GPU operations on phones/tablets
────────────────────────────────────────────────────────── */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* Remove ALL backdrop-filter — most expensive mobile op */
    *,*::before,*::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Simplify glass cards to solid bg instead */
    .card,.tc,.hero-badge,.section-pill,.post-meta-badge,
    .tbl-card,.tf-footer,.site-header,#site-nav {
        background: rgba(20,20,35,0.95) !important;
    }
    body.theme-magazine .card,
    body.theme-magazine .tc,
    body.theme-magazine .tbl-card {
        background: #FFFFFF !important;
    }
    /* Stop aurora blobs (PHP already doesn't render them, but safety net) */
    .aurora,.aurora div { display: none !important; animation: none !important; }
    /* Simplify scroll reveal on mobile — faster */
    .rv { transition-duration: 0.3s !important; }
    /* No box-shadow on mobile — compositing cost */
    .card:hover,.tc:hover,.tbl-card:hover { box-shadow: none !important; transform: none !important; }
}