/* --- 01. CORE SYSTEM VARIABLES --- */
:root {
    --void-bg: #050505;
    --surface: #0a0a0a;
    --gold-accent: #d97706; /* Samurai Gold */
    --zinc-muted: #52525b;
    --zinc-text: #d4d4d8;
    --font-main: 'Inter', sans-serif;
}

/* --- 02. GLOBAL RESETS & SCROLLBAR --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--void-bg);
    color: var(--zinc-text);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background-color: var(--gold-accent); color: #000; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--void-bg); }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-accent); }

/* --- 03. ASYMMETRIC NAVIGATION --- */
.nav-panel {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- 04. HOME SECTION & HUD FRAME (FIXED) --- */
/* We define the keyframes globally, but we only apply the 
   animation if the browser supports 'animation-timeline'.
   This prevents the "invisible on mobile" bug.
*/

@keyframes fadeOutAndScale {
    to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); filter: blur(15px); }
}

@keyframes contentShrink {
    to { opacity: 0; transform: scale(0.95) translateY(-60px); }
}

/* Default state: No animation, ensuring visibility on mobile */
.home-frame {
    opacity: 1;
}

.home-content {
    opacity: 1;
}

/* Progressive Enhancement: Only apply if browser supports Scroll-Driven Animations */
@supports (animation-timeline: view()) {
    .home-frame {
        animation: fadeOutAndScale linear forwards;
        animation-timeline: view();
        animation-range: exit;
    }

    .home-content {
        animation: contentShrink linear forwards;
        animation-timeline: view();
        animation-range: exit;
    }
}

/* --- 05. PROJECT SPOTLIGHT (SCROLL EFFECTS) --- */
.project-spotlight {
    opacity: 0.1;
    filter: blur(8px);
    transform: scale(0.96);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 25vh; /* Large focused spacing */
}

.project-spotlight.in-view {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* --- 06. TECHNICAL SPEC SHEET (SKILLS) --- */
.spec-item {
    transition: all 0.3s ease;
    border-bottom: 1px solid #111;
}

.spec-item:hover {
    background: rgba(255, 255, 255, 0.02);
    padding-left: 8px;
}

/* --- 07. ART SHOWCASE (SCANLINES) --- */
.scanlines {
    background: linear-gradient(
        rgba(18, 18, 18, 0) 50%,
        rgba(0, 0, 0, 0.1) 50%
    ),
    linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.03),
        rgba(0, 255, 0, 0.01),
        rgba(0, 0, 255, 0.03)
    );
    background-size: 100% 2px, 3px 100%;
}

/* --- 08. MODAL ANIMATION --- */
#project-modal { transition: opacity 0.4s ease, visibility 0.4s; }
#project-modal.open { opacity: 1; visibility: visible; }
#project-modal.closed { opacity: 0; visibility: hidden; }

#modal-content { 
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    transform: scale(0.9) translateY(30px); 
}

#project-modal.open #modal-content { transform: scale(1) translateY(0); }

/* --- 09. UTILITY ANIMATIONS & TEXT REVEAL --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal-text {
    opacity: 0; 
    animation: fadeInUp 1s ease-out forwards;
}

/* SAFETY FALLBACK: Force visibility on very small screens if animations fail */
@media (max-width: 480px) {
    .reveal-text {
        opacity: 1 !important;
        animation: none;
    }
}