/* ===========================================
   THEME: CLEAR (Transparent/Glass)
   Used on: index.html (full-page fluid effect)
   Nav and footer blend with fluid background
   =========================================== */

:root {
    /* Use purple as base accent color for buttons/links */
    --theme: #6C5CE7;
    --theme-dark: #5B4BD5;
    --theme-light: #A29BFE;
    --theme-glow: rgba(108, 92, 231, 0.25);
    --theme-pale: rgba(108, 92, 231, 0.08);
    --theme-rgb: 108, 92, 231;
    --theme-nav-rgb: 0, 0, 0; /* Dark glass effect */
}

/* Navigation - Dark glass effect, blends with fluid */
.nav--transparent {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Navigation CTA Button - White text on purple for visibility */
.nav-cta {
    background: var(--theme) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px var(--theme-glow) !important;
}
.nav-cta:hover {
    background: var(--theme-light) !important;
    color: #1a1a2e !important;
    box-shadow: 0 6px 20px rgba(var(--theme-rgb), 0.4) !important;
}

/* Typewriter Effect - White/subtle gradient */
.typewriter-text {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.9) 25%,
        #ffffff 50%,
        rgba(255, 255, 255, 0.9) 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}
.typewriter-cursor {
    background: #fff !important;
}

/* Footer - Dark glass effect, blends with fluid */
.footer {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.footer__bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Theme Accents - Keep purple for interactive elements */
.theme-accent {
    color: var(--theme);
}
.theme-accent-bg {
    background: var(--theme);
}
.theme-gradient-bg {
    background: linear-gradient(135deg, var(--theme) 0%, var(--theme-light) 100%);
}
.theme-border {
    border-color: var(--theme);
}
.theme-glow {
    box-shadow: 0 4px 20px var(--theme-glow);
}