/* ============================================
   BACKGROUND SCROLL EFFECTS
   
   Purpose: Dynamic background image transformations based on scroll position
   
   Features:
   - Background image (num5.jpg) scales from 100% to 70% during hero section scroll
   - Image moves up as user scrolls through hero section
   - Progressive blur increases from 0px to 30px throughout entire page
   - Dark overlay opacity increases from 0 to 0.6 as user scrolls
   - All sections have transparent backgrounds to show effect
   
   Layer Order (z-index):
   1. Dark background (#232323) - Base layer
   2. num5.jpg image - Fixed position, transformed by JavaScript
   3. Progressive blur overlay - Covers image
   4. Content (sections, text, cards) - Above all effects
   
   JavaScript Integration:
   - CSS variables controlled by updateBackgroundEffects() in main.js
   - Variables: --bg-scale, --bg-translateY, --bg-blur, --overlay-opacity
   
   Note: This file was previously misnamed "style-chess-background.css"
   The name has been corrected to reflect its actual purpose.
   
   Updated: 2025-11-21
   ============================================ */

/* Base dark background for entire website */
html,
body {
    background-color: #232323;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
}

/* Override background variable */
:root {
    --bg-color: #232323 !important;
}

/* num5.jpg image - IN FRONT OF DARK BG, BEHIND CONTENT */
.hero-section::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../../images/num5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    /* Above dark background, below blur and content */

    /* Transform controlled by JavaScript CSS variables */
    transform: scale(var(--bg-scale, 1)) translateY(var(--bg-translateY, 0));
    transform-origin: center top;

    /* Smooth transitions */
    transition: transform 0.1s ease-out, filter 0.3s ease-out;

    /* Blur controlled by JavaScript */
    filter: blur(var(--bg-blur, 0px));
}

/* Progressive blur overlay - COVERS IMAGE, BEHIND CONTENT */
.hero-section::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300vh;
    /* Extra tall to cover entire scrollable area */
    background: rgba(35, 35, 35, var(--overlay-opacity, 0));
    /* #232323 with variable opacity */
    z-index: 1;
    /* Above image, below content */
    pointer-events: none;

    /* Smooth transition */
    transition: background 0.3s ease-out;
}

/* All sections elevated above image and blur */
section {
    background-color: transparent !important;
    transition: background-color 0s !important;
    position: relative;
    z-index: 2;
    /* Above image and blur */
}

.hero-section {
    background-color: transparent !important;
    transition: none !important;
    position: relative;
    min-height: 100vh;
    z-index: 2;
}

.about-section {
    background-color: transparent !important;
    transition: background-color 0s !important;
}

.education-section {
    background-color: transparent !important;
}

.volunteering-section {
    background-color: transparent !important;
}

.contact-section {
    background-color: transparent !important;
}

.skills-cards-section {
    background-color: transparent !important;
}

.film-strip-container {
    background-color: transparent !important;
}

.content-wrapper {
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

.main-footer {
    background-color: transparent !important;
}

/* Remove circuit pattern overlay */
.education-section::before {
    display: none !important;
}

/* Text - elevated above blur */
/* Text - elevated above blur */
.hero-headline,
.hero-subtext {
    /* color: var(--text-color) !important; REMOVED to allow white color */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
}

.section-title {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 4px 8px rgba(0, 0, 0, 0.4);
    color: var(--text-color);
    position: relative;
    z-index: 3;
}

.about-headline,
.about-text,
.contact-text,
.section-list li {
    color: var(--text-color) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.skills-quote {
    color: var(--text-color) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Cards - elevated above blur */
.work-card,
.education-item,
.about-button,
.contact-button,
.volunteering-section .section-list li {
    position: relative;
    z-index: 3;
    box-shadow:
        0 12px 60px rgba(0, 0, 0, 0.7),
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Header - topmost content layer */
.main-header {
    z-index: 100 !important;
    position: fixed;
    box-shadow:
        0 12px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Mobile bottom nav - above header */
.mobile-bottom-nav {
    z-index: 101 !important;
    position: fixed;
    box-shadow:
        0 12px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Custom cursor - topmost */
.custom-cursor {
    z-index: 999 !important;
}

/* Keep gradient animations active */
.hero-section.is-headline-scrolled-out .hero-subtext {
    background: linear-gradient(to right,
            var(--gradient-color-1),
            var(--gradient-color-2),
            var(--gradient-color-3),
            var(--gradient-color-4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 1;
    transition: opacity 0.8s ease-in-out !important;
}

.about-section.is-scrolled-in .about-headline {
    background: linear-gradient(to right,
            var(--gradient-color-1),
            var(--gradient-color-2),
            var(--gradient-color-3),
            var(--gradient-color-4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 1;
    transition: opacity 0.8s ease-in-out !important;
}

/* Disable background color transitions globally */
*,
*::before,
*::after {
    transition-property: transform, opacity, box-shadow, border-color, color, filter, width, height, padding, margin !important;
}

/* Text always light */
.main-header .logo,
.main-nav a {
    color: var(--text-color) !important;
}

.mobile-bottom-nav nav a {
    color: var(--text-color) !important;
}

.education-item strong,
.education-item span {
    color: var(--text-color) !important;
}

/* Education card slide-in animation */
.education-item {
    opacity: 0;
    transform: perspective(1000px) translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.education-item.is-visible {
    opacity: 1;
    transform: perspective(1000px) translateY(0);
}

.build-version {
    color: var(--text-color) !important;
    opacity: 0.6;
}

.main-footer p {
    color: var(--text-color) !important;
}