/* Root Variables */
:root {
    --bg-main: #0f172a;
    --bg-darker: #020617;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.08);
    --nav-bg: rgba(15, 23, 42, 0.95);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    position: relative;
}

/* Noise Texture Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Below content but provides texture */
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

nav, main, footer {
    position: relative;
    z-index: 10;
}

/* Home Page - Dark & Grainy */
.page-home {
    --bg-main: #0a0a0c;
    --bg-darker: #050505;
    background-attachment: fixed;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(245, 158, 11, 0.05) 0%, transparent 50%);
}

.page-home::before {
    opacity: 0.08; /* Slightly more visible grain on dark home page */
}

/* Sub-pages - Off-white & Paper */
.page-sub {
    --bg-main: #fdfcf8; /* Light off-white/cream */
    --bg-darker: #f5f4ef;
    --text-main: #1a1a1a;
    --text-muted: #555555;
    --card-bg: rgba(0, 0, 0, 0.02);
    --card-border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(253, 252, 248, 0.95);
}

.page-sub::before {
    opacity: 0.04; /* Very subtle texture on light pages */
    filter: contrast(120%) brightness(110%);
}

/* Home Page - Dark Blue */
.page-home {
    --bg-main: #0f172a;
    --bg-darker: #020617;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.08);
    --nav-bg: rgba(15, 23, 42, 0.95);
    background-color: #0f172a;
}

/* Sub-pages - Plain White */
.page-sub {
    --bg-main: #ffffff;
    --bg-darker: #f1f5f9;
    --text-main: #000000;
    --text-muted: #333333;
    --card-bg: rgba(0, 0, 0, 0.05);
    --card-border: rgba(0, 0, 0, 0.15);
    --nav-bg: rgba(255, 255, 255, 0.95);
    background-color: #ffffff;
    color: #000000;
}

/* Page Sub Overrides for Readability */
.page-sub .text-slate-300,
.page-sub .text-slate-400,
.page-sub .text-slate-500 {
    color: #444444;
}

.page-sub .text-slate-500,
.page-sub .text-indigo-200,
.page-sub .text-amber-200 {
    color: #000000 !important;
}

.page-sub .text-slate-400 {
    color: #333333 !important;
}

/* Only target text-white that is likely on the light background, excluding buttons and specific containers */
.page-sub :not(.bg-indigo-600):not(.bg-indigo-700):not(.bg-slate-900):not(.bg-indigo-600/20).text-white,
.page-sub h1.text-white,
.page-sub h2.text-white,
.page-sub h3.text-white,
.page-sub p.text-white {
    color: #000000;
}

.page-sub h1:not(.text-indigo-600),
.page-sub h2:not(.text-indigo-600),
.page-sub h3:not(.text-indigo-600),
.page-sub h4:not(.text-indigo-600),
.page-sub p:not(.text-indigo-600),
.page-sub span:not(.bg-indigo-600):not(.bg-amber-600):not(.bg-emerald-600):not(.bg-purple-600):not(.bg-cyan-600):not(.bg-rose-600):not(.text-indigo-600) {
    color: #000000 !important;
}

.page-sub .bg-slate-950,
.page-sub .bg-slate-950\/50,
.page-sub .bg-slate-950\/30 {
    background-color: rgba(0, 0, 0, 0.03);
}

.page-sub nav .nav-link {
    color: #444444;
    color: #333333;
}

.page-sub nav .nav-link:hover,
.page-sub nav .nav-link.text-white {
    color: #000000;
}

.page-sub footer {
    background-color: #f5f4ef;
    color: #000000 !important;
}

.page-sub footer {
    background-color: #f8fafc;
    border-top-color: rgba(0, 0, 0, 0.1);
}

.page-sub footer .text-slate-500 {
    color: #666666;
    color: #333333;
}

.page-sub footer .bg-white\/5 {
    background-color: rgba(0,0,0,0.05);
}

.page-sub footer .border-white\/10 {
    border-color: rgba(0,0,0,0.1);
}

.page-sub footer .text-slate-400 {
    color: #555555;
}

.page-sub #navbar .text-slate-400 {
    color: #555555;
    color: #333333;
}

.page-sub #navbar .text-slate-400 {
    color: #333333;
}

.page-sub #navbar .text-slate-400:hover {
    color: #000000;
}

/* Navbar Indigo Overrides - Force all content to Indigo-600 */
#navbar,
#navbar a,
#navbar button,
#navbar i,
#navbar span,
#navbar div:not(.glass-card) {
    color: #4f46e5 !important;
}

#navbar a:hover,
#navbar button:hover {
    color: #4338ca !important;
}

/* Fix for buttons that should have white text on hover to maintain contrast */
#navbar a.hover\:text-white:hover,
#navbar button.hover\:text-white:hover {
    color: #ffffff !important;
}

/* Ensure borders also use the indigo color where appropriate */
#navbar .border-indigo-600 {
    border-color: #4f46e5 !important;
}

#navbar {
    z-index: 50;
}

.backdrop-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.page-sub .glass-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Glass Card Effect */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Selection */
::selection {
    background: #4f46e5;
    color: white;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Navbar scrolled state */
.navbar-scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}


/* Form focus styles */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}


/* Model Viewer Custom Styling */
model-viewer {
    width: 100%;
    height: 100%;
    background-color: transparent;
    --progress-bar-color: #4f46e5;
}

model-viewer::part(default-progress-bar) {
    background-color: #4f46e5;
}

#ar-button {
    background-image: none;
    background-color: #4f46e5;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    bottom: 16px;
    padding: 0px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color:#ffffff;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    border: 1px solid #4f46e5;
}

#ar-button:active {
    background-color: #4338ca;
}

#ar-button:focus {
    outline: none;
}

#ar-button:focus-visible {
    outline: 1px solid #4f46e5;
}

/* Ensure the dark glass card in projects page keeps its white text for contrast */
.dark-glass-card h3,
.dark-glass-card p,
.dark-glass-card span,
.dark-glass-card strong {
    color: #ffffff !important;
}

.dark-glass-card .text-slate-300,
.dark-glass-card .text-indigo-100\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Cinematic XR Experience Styles */
.cinematic-container {
    position: relative;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    overflow: hidden;
    border-radius: 1.5rem;
}

.film-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 16;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.7) 100%);
}

.subtitle-overlay {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    z-index: 30;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.subtitle-text {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    line-height: 1.5;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.1);
}

.hotspot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: none;
    background-color: #4f46e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.3s;
}

.hotspot:not([data-visible]) {
    opacity: 0;
    pointer-events: none;
}

.hotspot.active {
    background-color: #f59e0b;
    transform: scale(1.5);
    box-shadow: 0 0 15px #f59e0b;
}

.hotspot-annotation {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: white;
    display: block;
    font-size: 12px;
    font-weight: 500;
    left: calc(100% + 1em);
    max-width: 200px;
    padding: 0.5rem 0.75rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.hotspot.active .hotspot-annotation {
    opacity: 1;
}

.btn-glowing-indigo {
    background: #4f46e5;
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    animation: pulse-indigo 2s infinite;
}

@keyframes pulse-indigo {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(79, 70, 229, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

/* Orality Lab Earthy Tones & Feedback */
:root {
    --orality-terracotta: #B85C38;
    --orality-ochre: #E0AC49;
    --orality-mudcloth: #5C3D2E;
    --orality-bg: #2D2424;
}

.orality-lab-container,
.orality-lab-container h3,
.orality-lab-container h4,
.orality-lab-container h5,
.orality-lab-container p,
.orality-lab-container span,
.orality-lab-container button:not(.bg-white):not(.bg-emerald-600) {
    color: white !important;
}

.orality-lab-container .text-[#E0AC49],
.orality-lab-container span.text-[#E0AC49] {
    color: var(--orality-ochre) !important;
}

.orality-lab-container .text-slate-400 {
    color: #94a3b8 !important;
}

.orality-lab-container .bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.orality-lab-container .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.orality-vibrant {
    background-image: radial-gradient(circle at center, var(--orality-terracotta) 40%, var(--orality-bg) 100%);
    box-shadow: 0 0 80px rgba(184, 92, 56, 0.4);
}

.orality-vibrant::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

.orality-distorted {
    filter: grayscale(1) contrast(1.2) brightness(0.8);
}

.orality-distorted::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15;
    pointer-events: none;
    z-index: 5;
    animation: orality-noise 0.2s infinite;
}

@keyframes orality-noise {
    0% { transform: translate(0,0) }
    10% { transform: translate(-1%,-1%) }
    20% { transform: translate(-2%,1%) }
    30% { transform: translate(1%,-2%) }
    40% { transform: translate(-1%,2%) }
    50% { transform: translate(-2%,-2%) }
    60% { transform: translate(2%,1%) }
    70% { transform: translate(1%,1%) }
    80% { transform: translate(-2%,1%) }
    90% { transform: translate(1%,-2%) }
    100% { transform: translate(0,0) }
}

/* Cinematic XR Container - Ngwu Masquerade */
.cinematic-card {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
    position: relative;
    overflow: hidden;
}

.cinematic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}

.xr-subtitle {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    font-size: 0.95rem;
    line-height: 1.4;
}

.hotspot-panel {
    animation: fadeInUp 0.4s ease forwards;
}

/* ML Project Tour Styles */
#ml-canvas-container {
    cursor: grab;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

#ml-canvas-container:active {
    cursor: grabbing;
}

.ml-subtitle-overlay {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ml-subtitle-overlay:not(.opacity-0) {
    transform: translateX(-50%) translateY(0);
}

#ml-description-panel::-webkit-scrollbar {
    width: 4px;
}

#ml-description-panel::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 2px;
}

#ml-description-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}