/* ==========================================================
   vStudio — Component Styles
   Colors reference variables.css — edit values there.
   Fallback hex values are included so the page renders
   correctly even if variables.css fails to load (e.g. in
   Pinegrow preview or other editors).
   ========================================================== */

/* --- Base --- */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-page-bg, #262626);
    color: var(--color-text, #F8FAFC);
}

::-webkit-scrollbar {
    display: none;
}

/* --- Glass card --- */
.glass-card {
    background: var(--color-glass-bg, rgba(30, 41, 59, 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Text gradient (hero "Coming Soon") --- */
.text-gradient {
    background: linear-gradient(
        135deg,
        var(--gradient-text-from, #A855F7) 0%,
        var(--gradient-text-to, #3B82F6) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Icon glow --- */
.glow-effect {
    box-shadow: 0 0 40px var(--glow-accent, rgba(168, 85, 247, 0.2));
}

/* --- Logo icon gradient --- */
.icon-gradient {
    background: linear-gradient(
        135deg,
        var(--color-icon-grad-from, #141415),
        var(--color-icon-grad-to, #2A2A2A)
    );
}

/* --- Footer --- */
#footer {
    background-color: var(--color-footer-bg, #0B1120);
}

/* --- Background blobs --- */
.blob {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.blob.active {
    opacity: 0.18;
}

#blob-0 { background: var(--color-blob-0, #08F2FF); }
#blob-1 { background: var(--color-blob-1, #FFDF59); }
#blob-2 { background: var(--color-blob-2, #AA77F8); }
#blob-3 { background: var(--color-blob-3, #00D265); }
#blob-4 { background: var(--color-blob-4, #9B160D); }
#blob-5 { background: var(--color-blob-5, #FF7C2C); }
#blob-6 { background: var(--color-blob-6, #FC4B6C); }
#blob-7 { background: var(--color-blob-7, #A855F7); }
#blob-8 { background: var(--color-blob-8, #89293B); }

/* --- Tailwind brand-* class overrides ---
   Ensures Tailwind utility classes like text-brand-accent
   pick up variable values (with hex fallbacks).          */
.text-brand-accent   { color: var(--color-accent, #A855F7) !important; }
.text-brand-muted    { color: var(--color-muted, #94A3B8) !important; }
.bg-brand-accent     { background-color: var(--color-accent, #A855F7) !important; }
.bg-brand-surface    { background-color: var(--color-surface, #1E293B) !important; }
.border-brand-accent { border-color: var(--color-accent, #A855F7) !important; }
.border-brand-border { border-color: var(--color-border, #334155) !important; }
.hover\:border-brand-accent:hover { border-color: var(--color-accent, #A855F7) !important; }
.hover\:text-brand-accent:hover   { color: var(--color-accent, #A855F7) !important; }

/* --- Phase 1 timeline dot glow --- */
.phase-dot-complete {
    box-shadow: 0 0 15px var(--glow-accent-strong, rgba(168, 85, 247, 0.5));
}