/* 
 * SebaBaez.com - 80s Retro-Futurist Grid Editorial CSS
 * Highly cohesive design integrating:
 * - Playfair Display & Inter typography
 * - Roboto Mono technical bridge
 * - Low-opacity blueprint graph background
 * - Structured grid lines and glassmorphic rounded-xl floating header
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500&display=swap');

:root {
    --bg-obsidian: #0E0E0E;
    --bg-slate: #121214;
    --text-primary: #E8E8E8;
    --text-muted: rgba(232, 232, 232, 0.45);
    --border-color: rgba(255, 255, 255, 0.08);
    
    /* 
     * Accent Colors (Coral, Magenta & Violet)
     * EDIT THESE hex values to change the color scheme everywhere on the page!
     */
    --color-coral: #FF8257;
    --color-magenta: #E2165F;
    --color-violet: #8455EF;

    
    /* Radial glow colors matched to accents for retroambient backgrounds */
    --color-coral-glow: rgba(255, 130, 87, 0.08);
    --color-magenta-glow: rgba(226, 22, 95, 0.05);
    --color-violet-glow: rgba(132, 85, 239, 0.01);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px; /* Fixed header offset so hash navigation never occludes content */
    background-color: var(--bg-obsidian);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

body {
    overflow-x: hidden;
}

/* 80s Retroblueprint graph-paper grid pattern */
.bg-blueprint-grid {
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, rgba(232, 232, 232, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 232, 232, 0.02) 1px, transparent 1px);
    background-position: center top;
}

/* Typographic fonts */
.font-serif-editorial {
    font-family: 'Playfair Display', serif;
}

.font-sans-clean {
    font-family: 'Inter', sans-serif;
}

.font-mono-tech {
    font-family: 'Roboto Mono', monospace;
}

/* Subtle CRT-monitor back-glow container behind Hero */
.crt-glow-container {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 10%;
    background: radial-gradient(
        circle,
        var(--color-coral-glow) 0%,
        var(--color-magenta-glow) 50%,
        var(--color-violet-glow) 100%
    );
    filter: blur(120px);
    z-index: 1;
    pointer-events: none;
}

/* Opaque floating header top bar so scrolling text isn't seen behind it */
.floating-header-glass {
    background-color: var(--bg-obsidian);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.floating-header-glass.scrolled {
    background-color: var(--bg-obsidian);
    border-color: rgba(255, 255, 255, 0.15);
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

/* Clean modular grid borders */
.structural-border {
    border-color: var(--border-color);
}

/* Projects interactive row hover highlights */
.project-row {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.project-row:hover {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Custom technical arrow pointer cursor follower */
.custom-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    top: 0;
    left: 0;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.custom-cursor svg {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease, scale 0.25s ease;
}

/* Rotate and scale slightly on hover */
.custom-cursor.hovering-link svg {
    transform: rotate(15deg) scale(1.2);
}

/* Hide native browser pointer globally on fine input systems (desktops) */
@media (pointer: fine) {
    *, html, body, a, button, input, textarea, select, [onclick], .cursor-link {
        cursor: none !important;
    }
}

/* Smooth fading scroll reveal items */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Case study deep-dive modal glassmorphism */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(6, 6, 6, 0.85);
    backdrop-filter: blur(12px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.95);
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    background-color: #121214;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    z-index: 101;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.modal-content-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Monochromatic custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0E0E0E;
}

::-webkit-scrollbar-thumb {
    background: #2a2a2c;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #404044;
}

/* Custom CSS layout helpers */
.gradient-text-figma {
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-magenta) 50%, var(--color-violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-btn-figma {
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-magenta) 100%);
    transition: all 0.3s ease;
}

.gradient-btn-figma:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(255, 130, 87, 0.6);
}

.gradient-btn-magenta-violet {
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-violet) 100%);
    transition: all 0.3s ease;
}

.gradient-btn-magenta-violet:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(226, 22, 95, 0.6);
}

/* ==========================================
 * CAROUSEL GALLERY STYLING
 * ========================================== */
.carousel-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #0b0b0c;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-cover: cover;
}

/* Glassmorphic controllers */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(14, 14, 14, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-btn:hover {
    background-color: var(--color-coral);
    border-color: var(--color-coral);
    color: #000000;
}

.carousel-btn.prev {
    left: 16px;
}

.carousel-btn.next {
    right: 16px;
}

.carousel-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background-color: var(--color-coral);
    transform: scale(1.3);
}

/* ==========================================
 * VISUAL REFINEMENT ADDITIONS & OVERRIDES
 * ========================================== */

/* Nav Logo Gradient Hover effect */
#nav-logo {
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

#nav-logo:hover {
    transform: scale(1.05); /* Make it pop and expand slightly on hover */
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-magenta) 50%, var(--color-violet) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Section Links Hover/Active Accents (Dark obsidian default) */
#desktop-nav a {
    transition: color 0.3s ease;
}
#desktop-nav a:hover,
#desktop-nav a.active {
    color: var(--color-coral) !important;
}

#mobile-nav-menu a {
    transition: color 0.3s ease;
}
#mobile-nav-menu a:hover,
#mobile-nav-menu a.active {
    color: var(--color-coral) !important;
}

/* Standalone Borderless Triggers (Contrast Palette & Mobile Menu) */
#accessibility-trigger,
#mobile-menu-trigger {
    background-color: transparent !important;
    border: none !important;
    padding: 0.25rem !important;
    transition: color 0.3s ease !important;
}
#accessibility-trigger:hover,
#mobile-menu-trigger:hover {
    color: var(--color-coral) !important;
}

/* Merged Dropdown Menus (Accessibility & Mobile Navigation) */
#accessibility-dropdown,
#mobile-nav-menu {
    top: 100% !important;
    right: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    border-radius: 0px 0px 12px 12px !important; /* Straight top, beautifully rounded bottom */
    overflow: hidden !important; /* Clip children hover backgrounds to rounded bottom corners */
    background-color: #0E0E0E !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
}

#accessibility-dropdown button,
#mobile-nav-menu a {
    border-radius: 0 !important; /* Straight retro-futurist corners for nested option backgrounds */
}

/* ==========================================
 * SECTION-ADAPTIVE HEADER BAR THEMES
 * ========================================== */

/* Light Theme (Over #about section) */
#main-header.header-light {
    background-color: #F4F3F0 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

#main-header.header-light #nav-logo {
    color: #0A0A0A !important;
}

#main-header.header-light #desktop-nav a {
    color: rgba(10, 10, 10, 0.65) !important;
}

#main-header.header-light #desktop-nav a:hover,
#main-header.header-light #desktop-nav a.active {
    color: var(--color-magenta) !important;
}

#main-header.header-light #accessibility-trigger,
#main-header.header-light #mobile-menu-trigger {
    background-color: transparent !important;
    border: none !important;
    color: rgba(10, 10, 10, 0.7) !important;
    transition: color 0.3s ease !important;
}

#main-header.header-light #accessibility-trigger:hover,
#main-header.header-light #mobile-menu-trigger:hover {
    color: var(--color-magenta) !important;
}

/* Dropdown color matching inside light theme */
#main-header.header-light #accessibility-dropdown,
#main-header.header-light #mobile-nav-menu,
#mobile-nav-menu.header-light {
    background-color: #F4F3F0 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    border-top: none !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1) !important;
}

#main-header.header-light #accessibility-dropdown span {
    color: rgba(10, 10, 10, 0.45) !important;
}

#main-header.header-light #accessibility-dropdown span.border-b {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

#main-header.header-light #accessibility-dropdown button,
#main-header.header-light #mobile-nav-menu a,
#mobile-nav-menu.header-light a {
    color: rgba(10, 10, 10, 0.7) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

#main-header.header-light #accessibility-dropdown button:hover,
#main-header.header-light #accessibility-dropdown button[aria-selected="true"],
#main-header.header-light #mobile-nav-menu a:hover,
#main-header.header-light #mobile-nav-menu a.active,
#mobile-nav-menu.header-light a:hover,
#mobile-nav-menu.header-light a.active {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

#main-header.header-light #mobile-nav-menu a:hover,
#main-header.header-light #mobile-nav-menu a.active,
#mobile-nav-menu.header-light a:hover,
#mobile-nav-menu.header-light a.active {
    color: var(--color-magenta) !important;
}

/* Slate Dark Theme (Over #lab section) */
#main-header.header-lab {
    background-color: #121214 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#main-header.header-lab #desktop-nav a:hover,
#main-header.header-lab #desktop-nav a.active {
    color: var(--color-magenta) !important;
}

#main-header.header-lab #accessibility-trigger:hover,
#main-header.header-lab #mobile-menu-trigger:hover {
    color: var(--color-magenta) !important;
}

/* Dropdown color matching inside slate theme */
#main-header.header-lab #accessibility-dropdown,
#main-header.header-lab #mobile-nav-menu,
#mobile-nav-menu.header-lab {
    background-color: #121214 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
}

#main-header.header-lab #mobile-nav-menu a:hover,
#main-header.header-lab #mobile-nav-menu a.active,
#mobile-nav-menu.header-lab a:hover,
#mobile-nav-menu.header-lab a.active {
    color: var(--color-magenta) !important;
}