/* ==========================================================================
   Base Styles
   Reset, global variables, and foundational styles
   ========================================================================== */

/* Theme CSS Custom Properties
   ========================================================================== */

:root {
    /* Light theme (default) */
    color-scheme: light;
    --color-bg: #f5f5f7;                    /* background/inverse used as light bg */
    --color-bg-rgb: 245, 245, 247;
    --color-bg-secondary: #fafafc;          /* background/surface for experience section */
    --color-bg-detail: #e2e2e4;             /* background/detail for buttons */
    --color-bg-inverse: #0e0e0e;            /* dark bg for contact button */
    --color-text-primary: #29292c;          /* text/inverse */
    --color-text-secondary: #636f7e;        /* text/primary - muted */
    --color-text-inverse: #ffffff;          /* text for dark backgrounds */
    --color-border: rgba(255, 255, 255, 0.75);
    --color-glass-bg: rgba(255, 255, 255, 0.75);
    --color-glass-bg-alt: rgba(255, 255, 255, 0.75);
    --color-tag-bg: #ffffff;
    --color-tag-border: rgba(255, 255, 255, 0.8);
    --color-separator: #e2e2e4;
    --color-thumbnail-bg: #d9d9d9;
    --color-scrollbar-track: #c0c0c0;

    /* Navigation positioning */
    --nav-top: 56px;
    --nav-side: 65px;
    --nav-bottom: 40px;
}

[data-theme="dark"] {
    color-scheme: dark;
    /* Figma variables */
    --color-bg: #000000;                    /* background/default */
    --color-bg-rgb: 0, 0, 0;
    --color-bg-secondary: #0e0e0e;          /* background/surface */
    --color-bg-elevated: #1f1f22;           /* background/elevated */
    --color-bg-detail: #202023;             /* background/detail */
    --color-bg-inverse: #f5f5f7;            /* background/inverse */
    --color-text-primary: #ffffff;          /* text/secondary (main visible text) */
    --color-text-secondary: #a4a3a8;        /* text/primary (muted text) */
    --color-text-inverse: #29292c;          /* text/inverse */
    --color-border: rgba(31, 31, 34, 0.75); /* background/elevated bg blur */
    --color-glass-bg: rgba(31, 31, 34, 0.75); /* background/elevated bg blur #1f1f22bf */
    --color-glass-bg-alt: rgba(31, 31, 34, 0.75);
    --color-tag-bg: #1f1f22;
    --color-tag-border: rgba(255, 255, 255, 0.2);
    --color-separator: rgba(255, 255, 255, 0.1);
    --color-thumbnail-bg: #1a1a1a;
    --color-scrollbar-track: #1a1a1a;
}

/* ==========================================================================
   Reset and Base
   ========================================================================== */

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

html {
    background-color: var(--color-bg);
    transition: background-color 0.3s ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}

/* ==========================================================================
   Global Scrollbar Styling
   ========================================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-secondary) var(--color-scrollbar-track);
}

/* Webkit (Chrome, Edge) - Safari uses native scrollbars via color-scheme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-text-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-primary);
}

/* ==========================================================================
   Page Transition - Fade In
   CSS-only fade in on page load (safe fallback: instant appearance)
   ========================================================================== */

@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Main content and UI elements fade in on load (except nav pill) */
/* Note: view containers (about, list, project) excluded — handled by view-enter */
#gallery-root,
.view-toggle-btn,
.contact-btn,
.theme-toggle-btn {
    animation: page-fade-in 250ms ease-out;
}

/* Page transition fade out class */
.page-fade-out {
    opacity: 0 !important;
    transition: opacity 150ms ease-out !important;
    animation: none !important;
}

/* ==========================================================================
   View Transition Animations
   Entrance/exit animations for SPA view switching
   ========================================================================== */

@keyframes view-enter-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes view-enter-slide {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

@keyframes view-exit {
    from { opacity: 1; }
    to { opacity: 0; }
}

.view-enter {
    animation: view-enter-fade 250ms ease-out;
    overflow: hidden;
}

.view-enter > * {
    animation: view-enter-slide 250ms ease-out;
}

.view-exit {
    animation: view-exit 250ms linear forwards;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .view-enter,
    .view-enter > *,
    .view-exit {
        animation: none !important;
    }
}

/* ==========================================================================
   Fade Overlay — shared top-edge gradient
   Mobile-only by default; specific overlays can opt out of the media query
   ========================================================================== */

.fade-overlay {
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background-color: var(--color-bg);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.92) 12%, rgba(0,0,0,0.78) 28%, rgba(0,0,0,0.60) 44%, rgba(0,0,0,0.40) 58%, rgba(0,0,0,0.24) 72%, rgba(0,0,0,0.10) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.92) 12%, rgba(0,0,0,0.78) 28%, rgba(0,0,0,0.60) 44%, rgba(0,0,0,0.40) 58%, rgba(0,0,0,0.24) 72%, rgba(0,0,0,0.10) 86%, transparent 100%);
    transition: background-color 0.3s ease;
}

@media (min-width: 481px) {
    .fade-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive Breakpoints
   - 768px: Tablet
   - 480px: Mobile
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --nav-top: 46px;
        --nav-side: 55px;
        --nav-bottom: 25px;
    }
}

@media (max-width: 480px) {
    :root {
        --nav-top: 15px;
        --nav-side: 15px;
        --nav-bottom: 15px;
    }
}