/* Flipped the shared variables to a white/light theme */
:root {
    --primary-background: #FFFFFF;
    --primary-headings: #1A1A1A;
    --primary-paragraphs: #333333;
    --primary-details: #555555;
}

body {
    background-color: var(--primary-background);
    color: var(--primary-paragraphs);
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    min-height: 100dvh; 
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* --- fonts/ typography --- */
.font-heading { font-family: Helvetica, Arial, sans-serif; } 
.font-body    { font-family: Helvetica, Arial, sans-serif; }
.cinematic-text {
    animation: cinematicReveal 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: opacity, filter, letter-spacing;
}

@keyframes cinematicReveal {
    0% { opacity: 0; letter-spacing: 0.1em; filter: blur(12px); }
    100% { opacity: 0.9; letter-spacing: 0.4em; filter: blur(0.6px); }
}

/* --- The Seamless Slider --- */
#slider-container {
    background: var(--primary-background);
    position: fixed;
    inset: 0;
}

.bg-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    
    /* --- gpu stuff helps rendering images --- */

    transform: scale(1.1) translateZ(0);
    backface-visibility: hidden;
    
    /* Sync transform (5s) to match your JS setInterval (5000ms) */
    transition: opacity 2s ease-in-out, transform 10s linear;
    z-index: 0;
}

.bg-slider.active {
    opacity: 0.35; /* Lowered opacity so the white background bleeds through, keeping the aesthetic bright */
    transform: scale(1) translateZ(0);
    z-index: 1;
}

/* Reset scale only after the image is completely hidden */
.bg-slider:not(.active) {
    transition: opacity 2s ease-in-out, transform 0s 2s;
    transform: scale(1.1);
}

.nav-link { transition: color 0.4s ease; }