/* ============================================================
   GLASS DISPLAY MODE — Apple Liquid / Glassmorphism Overrides
   ============================================================
   Activated by adding .glass-mode to <html>.
   Works independently of dark mode.
   Background: Stars Galaxy canvas (starfield.js)
   ============================================================ */

/* --- Body: Transparent to reveal starfield --- */
.glass-mode body {
    background: transparent !important;
    color: #f0f0f5 !important;
}

/* --- Starfield Container --- */
#starfield-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* --- Glass Panel Base --- */
.glass-mode .glass-panel,
.glass-mode header,
.glass-mode .mobile-menu {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Header --- */
.glass-mode header {
    background: rgba(10, 6, 25, 0.3) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.glass-mode header a,
.glass-mode header button,
.glass-mode header span {
    color: rgba(255, 255, 255, 0.85) !important;
}

.glass-mode header a:hover,
.glass-mode header button:hover {
    color: #fff !important;
}


/* --- Hero Section --- */
.glass-mode section:first-of-type,
.glass-mode section {
    background: transparent !important;
}

.glass-mode .echo-stack span {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 0 40px rgba(180, 160, 255, 0.15);
}

.glass-mode .echo-layer.echo-1 { color: rgba(180, 160, 255, 0.25) !important; text-shadow: 0 0 30px rgba(160, 140, 255, 0.1); }
.glass-mode .echo-layer.echo-2 { color: rgba(140, 120, 255, 0.15) !important; }
.glass-mode .echo-layer.echo-3 { color: rgba(100, 80, 255, 0.08) !important; }
.glass-mode .echo-layer.echo-4 { color: rgba(80, 60, 255, 0.04) !important; }


/* --- Text Colors --- */
.glass-mode .text-gray-mid {
    color: rgba(255, 255, 255, 0.4) !important;
}

.glass-mode h2,
.glass-mode h3,
.glass-mode h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

.glass-mode p {
    color: rgba(255, 255, 255, 0.6) !important;
}

.glass-mode .font-serif {
    color: rgba(180, 160, 255, 0.7) !important;
}

/* --- Dividers --- */
.glass-mode .w-px {
    background: rgba(255, 255, 255, 0.06) !important;
}

.glass-mode .border-t,
.glass-mode .border-b {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* --- Portfolio Cards --- */
.glass-mode .group.cursor-pointer {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Expertise Grid — Ultra Transparent --- */
.glass-mode .grid.gap-px {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.glass-mode .grid.gap-px > div {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.glass-mode .grid.gap-px > div:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.glass-mode .grid.gap-px .material-icons {
    color: rgba(180, 160, 255, 0.6) !important;
}

.glass-mode .grid.gap-px .w-16 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Footer — Transparent Glass --- */
.glass-mode footer {
    background: rgba(6, 4, 16, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top-color: rgba(255, 255, 255, 0.04) !important;
}

.glass-mode footer h2,
.glass-mode footer h4,
.glass-mode footer a,
.glass-mode footer p,
.glass-mode footer span,
.glass-mode footer li {
    color: rgba(255, 255, 255, 0.6) !important;
}

.glass-mode footer h2 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* --- Contact Page — Left Panel Ultra Transparent --- */
.glass-mode aside {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.glass-mode aside h1 {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
}

.glass-mode aside a {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* --- Contact Page — Form Panel --- */
.glass-mode main {
    background: transparent !important;
}

.glass-mode input,
.glass-mode textarea {
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.glass-mode label {
    color: rgba(255, 255, 255, 0.3) !important;
}

.glass-mode .input-border {
    background: rgba(180, 160, 255, 0.4) !important;
}

/* --- Service / Budget Chips (Glass) --- */
.glass-mode .service-radio:checked + div,
.glass-mode .service-radio:checked ~ div {
    background: rgba(140, 120, 255, 0.12) !important;
    border-color: rgba(140, 120, 255, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(140, 120, 255, 0.1);
}

.glass-mode .rounded-full[class*="border"],
.glass-mode .rounded-lg[class*="border"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.glass-mode .rounded-full[class*="border"]:hover,
.glass-mode .rounded-lg[class*="border"]:hover {
    border-color: rgba(180, 160, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* --- Submit Button --- */
.glass-mode .magnetic-btn {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.glass-mode .btn-fill {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.7), rgba(165, 94, 234, 0.7)) !important;
}

/* --- Placeholder Pages --- */
.glass-mode .placeholder-section {
    background: transparent !important;
}

/* --- btn-prime in Glass Mode — Purple Wave Preserved --- */
.glass-mode .btn-prime {
    color: #a78bfa !important;
    border: 1px solid rgba(139, 61, 255, 0.5) !important;
    background-color: transparent !important;
    box-shadow: 0 0 15px rgba(139, 61, 255, 0.1);
}

.glass-mode .btn-prime * {
    color: #a78bfa !important;
}

.glass-mode .btn-prime:hover {
    background-color: #8b3dff !important;
    color: #ffffff !important;
    border-color: #8b3dff !important;
    box-shadow: 0 0 25px rgba(139, 61, 255, 0.35);
}

.glass-mode .btn-prime:hover * {
    color: #ffffff !important;
}

/* --- Hero CTA in Glass Mode --- */
.glass-mode .hero-float .btn-prime {
    border-color: rgba(139, 61, 255, 0.4) !important;
    background: rgba(139, 61, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
    color: #a78bfa !important;
    box-shadow: 0 4px 30px rgba(120, 80, 255, 0.1);
}

.glass-mode .hero-float .btn-prime:hover {
    background: #8b3dff !important;
    color: #fff !important;
    box-shadow: 0 8px 40px rgba(120, 80, 255, 0.3);
}

.glass-mode .hero-float .btn-prime:hover * {
    color: #fff !important;
}

/* --- Mobile Menu (Glass) --- */
.glass-mode .mobile-menu {
    background: rgba(8, 5, 20, 0.7) !important;
    backdrop-filter: blur(40px) !important;
}

.glass-mode .mobile-menu a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Toggle Button Styling --- */
.glass-mode .toggle-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Glass Toggle Button --- */
#glass-toggle {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(165, 94, 234, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    transition: all 0.3s ease;
}

#glass-toggle:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.35), rgba(165, 94, 234, 0.35));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}

#glass-toggle.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4), rgba(165, 94, 234, 0.4));
    border-color: rgba(180, 160, 255, 0.35);
    box-shadow: 0 0 24px rgba(108, 92, 231, 0.25);
}

/* --- Boids in Glass Mode --- */
.glass-mode #boids-container canvas {
    opacity: 0.35;
}

/* --- Smooth Transition for Mode Switch --- */
html.glass-transitioning * {
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

/* --- Scrollbar Glass Mode --- */
.glass-mode ::-webkit-scrollbar-track {
    background: rgba(8, 5, 20, 0.3);
}

.glass-mode ::-webkit-scrollbar-thumb {
    background: rgba(140, 120, 255, 0.2);
    border-radius: 10px;
}

.glass-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 120, 255, 0.35);
}

/* --- Tagline/Pillars Section Glass --- */
.glass-mode [class*="border-black"],
.glass-mode [class*="border-white"] {
    border-color: rgba(255, 255, 255, 0.04) !important;
}