@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:wght@100..900&display=swap');

:root {
    --midnight: #FFFFFF;
    --gold: #6B21A8;
    --offwhite: #111111;
    --teal: #A855F7;
    --muted: #6B7280;
}

body {
    background-color: var(--midnight);
    color: var(--offwhite);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
}

/* Premium Card and Surface Glassmorphism */
.glass-panel {
    background: rgba(107, 33, 168, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(107, 33, 168, 0.08);
}

.glass-panel-heavy {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(107, 33, 168, 0.15);
}

/* Micro-Animations & Glow Effects */
.gold-glow {
    box-shadow: 0 4px 20px rgba(107, 33, 168, 0.06);
}

.gold-glow-hover:hover {
    box-shadow: 0 10px 30px rgba(107, 33, 168, 0.12);
    transition: all 0.3s ease;
}

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

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideRight {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.animate-slide-right {
    transform-origin: left;
    animation: slideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--midnight);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* Page Layout Fixes for Shared Layout Injection */
#site-header {
    min-height: 80px; /* Reserve header space to prevent layout shifts */
}

/* Active Nav Indicator styling */
.nav-link-active {
    color: var(--gold) !important;
    border-bottom: 2px solid var(--gold);
}


/* Elegant italic secondary heading font */
.font-accent {
    font-family: 'Fraunces', serif;
    font-style: italic;
}


/* 3D Glassmorphism Cards & Scroll Shadows */
.card-3d {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg);
    box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.04), -2px -2px 12px rgba(255, 255, 255, 0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.card-3d:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(8px);
    box-shadow: 12px 12px 30px rgba(107, 33, 168, 0.08);
}

/* Hamburger animations classes */
.burger-active #burger-line1 {
    transform: rotate(45deg) translateY(5px) translateX(5px);
}
.burger-active #burger-line2 {
    opacity: 0;
    transform: scaleX(0);
}
.burger-active #burger-line3 {
    transform: rotate(-45deg) translateY(-5px) translateX(5px);
}

/* Scroll Reveal Cinematic Effects */
.cinematic-slide-up {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(5px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}
.cinematic-slide-up.active-reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.cinematic-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(5px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}
.cinematic-reveal-left.active-reveal {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.cinematic-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    filter: blur(5px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}
.cinematic-reveal-right.active-reveal {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.cinematic-fade-scale {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(5px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}
.cinematic-fade-scale.active-reveal {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.delay-100 { transition-delay: 150ms; }
.delay-200 { transition-delay: 300ms; }
.delay-300 { transition-delay: 450ms; }

/* Mobile strict center alignment override */
@media (max-width: 768px) {
    main h1, main h2, main h3, main h4, main h5, main h6, main p, main span, main blockquote, main q, main cite {
        text-align: center !important;
    }
    
    /* Center text grids and flexes inside main */
    main .flex, main .grid {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    main .flex-col, main .grid-cols-1 {
        align-items: center !important;
        text-align: center !important;
    }

    /* Stretched blocks should also align center internally inside main */
    main div, main section, main article {
        text-align: center !important;
    }

    /* Buttons row adjustment for mobile center centering inside main */
    main .flex-row, main .sm\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    main .flex-row > a, main .flex-row > button,
    main .sm\:flex-row > a, main .sm\:flex-row > button {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
    }
    
    /* Ensure forms inside main are centered too */
    main form {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    main form input, main form select, main form textarea, main form button {
        text-align: center !important;
        margin: 0.5rem auto !important;
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile touch target size and spacing enhancements */
@media (max-width: 768px) {
    .glass-panel {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    main button, main a.inline-block, main a.w-full {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
    }
    .grid {
        gap: 1.25rem !important;
    }
}