/**
 * VISIONS OF KHAOS - CSS STRUCTURE & ARCHITECTURE
 * 
 * This file demonstrates the BEM (Block Element Modifier) naming convention
 * and establishes the modular structure for all components.
 * 
 * CSS Variables, animations, and specific styling are managed separately
 * in component-specific files. This structure ensures:
 * - Clear class hierarchy
 * - Scalability and maintainability
 * - Animation scaffolding for lamp swing and tree growth
 * - Responsive design readiness
 */

/* ================================================================
   ROOT LEVEL: CSS VARIABLES & GLOBAL SETTINGS
   ================================================================ */



:root {
    /* Color Palette - Dark, Atmospheric Theme */
    --color-bg-primary: #000000;
    --color-bg-secondary: #1a1a1a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-accent-warm: #d4714f;
    --color-accent-cool: #4f7db3;
    --color-accent-dream: #9b7ebd;
    --color-accent-nightmare: #8b4513;
    
    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Typography */
    --font-family-display: 'Display Font', serif;
    --font-family-body: 'Body Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4rem;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Animation & Motion */
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 600ms;
    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    
    /* Lamp Animation Specific */
    --lamp-swing-duration: 4s;
    --lamp-swing-angle: 15deg;
    
    /* Tree Growth Specific */
    --tree-growth-max-height: 400px;
    --tree-growth-stages: 6;
    
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ================================================================
   BODY & PAGE STRUCTURE
   ================================================================ */

.body {
    /* Base styles will be applied in theme file */
    font-family: var(--font-family-body);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}
.hero__tagline-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
    padding-top: 120px;
}
.hero__container{
    position: relative;
    z-index: 0;
}
h1{
    font-size: 50px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    color: var(--color-text-primary);
}
.hero{
    /* background-image: url(../images/hero-screen.jpg); */
    background-size: cover;
    background-position: center;
    width: 100%;
    overflow: hidden;    
    max-height: 1200px;
}
.hero__lamp-wrapper {
    position: relative;
    /* height: 500px; */
    perspective: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    transform: scale(0.9);
}
.hero__tagline-line--emphasis{
    font-size: 24px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: normal;
    color: var(--color-text-primary);
}
.lamp-image {
    margin-top: 0;
}
.scroll-down-content{
    max-width: 64px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--spacing-lg);
}
.scroll-down-text{
    font-size: 16px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: normal;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-text-primary);
    margin-bottom: 1rem;
    display: block;
    transition: all 0.3s ease;
}
.hero__lamp {
    /* SVG lamp element */
    transform-origin: top center;
    animation-name: lampSwing;
    animation-duration: var(--lamp-swing-duration);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform;
    position: relative;
    z-index: 5;
}
/* .lamp-glow{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.8;
    animation-name: lampSwing;
    animation-duration: var(--lamp-swing-duration);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
} */

/* .lamp-light {
    position: absolute;
    top: -140%;
    left: -30%;
    transform: translate(-50%, -50%);
    width: 3000px;
    pointer-events: none;
    z-index: 0;
    min-height: 2000px;
    background-image: url(../images/lamp-glow.png);
} */

.lamp-light{
    background-image: url(../images/lamp-glow.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1000px;
    width: 1600px;
    margin: 0 auto;
    z-index: 1;   
    opacity: 0.8;
}

.lamp-light-second{
    background-image: url(../images/lamp-glow-02.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1000px;
    width: 1600px;
    margin: 0 auto;
    z-index: 2;   
}
.color-burn-image-wrapper{
    position: absolute;
    top:260px;
    z-index: 3; 
}
.color-burn-image-wrapper img{
    opacity: 0.5;
}
.lamp-light-third{
    background-image: url(../images/lamp-glow-03.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1000px;
    width: 1600px;
    margin: 0 auto;
    z-index: 4;   
}


.hero__content, .scroll-down-content{
    position: relative;
    z-index: 3;
}

/**
 * LAMP SWING ANIMATION
 * Creates a pendulum swinging motion
 * Pivot point: top center
 * Swing angle: ±15 degrees
 * Duration: 4 seconds
 */
@keyframes lampSwing {
    0% {
        transform: rotateZ(var(--lamp-swing-angle));
    }
    50% {
        transform: rotateZ(calc(var(--lamp-swing-angle) * -1));
    }
    100% {
        transform: rotateZ(var(--lamp-swing-angle));
    }
}

.scroll-down-arrow{
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer__nav-list{
    display: flex;
    gap: var(--spacing-lg);
}
.footer{
    padding: var(--spacing-lg);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    left:0;
    right:0;
    max-width: 1920px;
    margin: 0 auto;
}
.footer__content_left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}
.footer__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}
.footer__link, .footer__copyright{
    font-size: 16px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 400;
    
}
.footer__link:hover{
    color: #EF7C01;
}
.social-media-list{
    gap: var(--spacing-sm);
}
.social-media-list .footer__link svg path, .scroll-down-content a svg path{
    transition: all 0.3s ease;
}

.social-media-list .footer__link:hover svg path{
    fill: #EF7C01;
}
.scroll-down-content a:hover .scroll-down-text{
    color: #EF7C01;
    border-bottom: 1px solid #EF7C01;
}
.scroll-down-content a:hover svg path{
    fill: #EF7C01;
}
/* ================================================================
   
   ================================================================ */