/* 
 * Main CSS File - The Foundation Upon Which Our Empire is Built
 * Where we establish the fundamental rules that govern this digital realm
 * Like the Magna Carta, but with more gradients and fewer angry barons
 */

/* Global Reset - Because browsers have opinions and we don't care */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* The most sensible box model since sliced bread */
}

/* Body - The canvas upon which we paint our masterpiece */
body {
    font-family: 'Bodoni Moda', serif; /* Elegant as a Victorian gentleman */
    line-height: 1.6; /* Breathing room for our words */
    color: #ffffff; /* White as fresh snow, or the director's face during my presentation */
    
    /* Background gradient that moves like a lazy lava lamp */
    background: 
        linear-gradient(45deg, 
            #0a0a0a 0%, 
            #1a1a1a 20%, 
            #2d2d2d 40%, 
            #404040 50%, 
            #2d2d2d 60%, 
            #1a1a1a 80%, 
            #0a0a0a 100%);
    background-size: 400% 400%;
    animation: subtleGradientMove 25s ease-in-out infinite;
    
    font-weight: 400;
    min-height: 100vh; /* At least as tall as your expectations */
    font-size: calc(0.8rem + 0.4vw); /* Responsive sizing because we're considerate */
    overflow-x: hidden; /* No horizontal scrolling shenanigans */
    width: 100vw;
    max-width: 100vw;
    position: relative;
    
    /* Prevent FOUC while JavaScript loads - because blank screens are unprofessional */
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Loading state - for when JavaScript is still getting its act together */
body.loading {
    /* Show a subtle loading state instead of blank nothingness */
    background: #1a1a1a; /* Simplified background while we wait for the fancy stuff */
}

/* Hide content until JavaScript is ready - preventing the ugly flash of unstyled content */
body.loading .container {
    opacity: 0.3; /* Subtle preview instead of complete hiding - I'm not completely heartless */
}

/* Once loaded, show everything properly */
body.loaded .container {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Vignette effect overlay - For that cinematic "I'm about to reveal something profound" look */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Look but don't touch */
    z-index: 10;
    background: radial-gradient(circle at center, 
        transparent 0%, 
        transparent 60%, 
        rgba(0, 0, 0, calc(0.1 + var(--global-transition-progress, 0) * 0.3)) 100%);
    transition: all 0.3s ease-out;
}

/* Container - The sensible parent keeping everything in line */
.container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Like a British queue - orderly and polite */
}

/* Typography Hierarchy - Because chaos is for JavaScript, not design */

h1 {
    font-family: 'Fredericka the Great', serif; /* As dramatic as our reveal */
    font-size: clamp(1.8rem, 4vw, 3.5rem); /* Scales like British politeness - appropriately */
    font-weight: 400;
    margin-bottom: calc(0.5vw + 8px);
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    /* Because every good story needs a strong opening */
}

h2 {
    font-family: 'Fredericka the Great', serif;
    color: #ffffff;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    margin-bottom: calc(1vw + 12px);
    font-weight: 400;
    padding-bottom: calc(0.5vw + 8px);
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* A hint of mystery */
}

h3 {
    font-family: 'Fredericka the Great', serif;
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    margin-bottom: calc(0.8vw + 10px);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    letter-spacing: 0.3px;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

h4 {
    font-family: 'Fredericka the Great', serif;
    color: #ffffff;
    font-size: clamp(0.9rem, 2vw, 1.4rem);
    margin-bottom: calc(0.6vw + 8px);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
}

p {
    margin-bottom: calc(0.6vw + 8px);
    font-weight: 400;
    font-size: calc(0.7rem + 0.25vw);
    line-height: 1.7; /* Generous spacing for comfortable reading */
    color: #ffffff;
    letter-spacing: 0.3px;
    text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.3);
}

/* Enhanced paragraph styling for dramatic content - Because drama deserves special treatment */
.warning-tile p, .reveal-tile p, .method-tile p {
    line-height: 1.8; /* Extra breathing room for important revelations */
    margin-bottom: calc(0.8vw + 12px);
    transition: all 0.3s ease;
}

.warning-tile p em {
    opacity: 0.95;
    font-weight: 450; /* Slightly bolder for emphasis */
    transition: opacity 0.15s ease;
}

.warning-tile p:hover em {
    opacity: 1; /* Full intensity on hover, like realization dawning */
}

/* Presenter styling - For the credits */
.presenter {
    font-size: clamp(1rem, 2vw, 1.4rem);
    opacity: 0.9;
    font-weight: 400;
    text-align: center;
}

/* Lists - Because sometimes we need to be organized */
ul, ol {
    margin-left: calc(1.2vw + 15px);
    margin-bottom: calc(0.6vw + 8px);
}

li {
    margin-bottom: calc(0.3vw + 3px);
    font-weight: 400;
    font-size: calc(0.65rem + 0.25vw);
    line-height: 1.5;
    color: #ffffff;
}

/* Page transition system - The mechanism for our grand reveal */
.page-transition-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Keep the magic contained */
}

.main-content, .calculator-content {
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); /* Smooth as British diplomacy */
}

.calculator-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%); /* Hidden off-stage right */
    min-height: 100vh;
    background: inherit; /* Inherits the same dramatic backdrop */
    overflow-y: auto;
    z-index: 100; /* Above everything else, like British superiority complex */
}

.calculator-content.active {
    transform: translateX(0); /* Enter stage left */
}

.main-content.shifted {
    transform: translateX(-100%); /* Exit stage right */
}