/* --- VARIABLES --- */
:root {
    --bg-color: #F4F1EE; /* Default: Light (Beige/White) */
    --text-color: #0F1423;
    --card-bg: rgba(255, 255, 255, 0.4);
    --card-border: #0F1423;
    --accent-red: #732E33;

    --header-bg: rgba(244, 241, 238, 0.8);
    --albert-btn-bg: #EAE1DA;
    --albert-btn-hover: #dacfc4;
    --banner-text-color: #F4F1EE;

    --service-inactive: rgba(15, 20, 35, 0.2);
    --service-dim: rgba(15, 20, 35, 0.5);
    --service-active: var(--text-color);

    /* Fonts */
    --font-main: 'Helvetica', Helvetica, serif;
    --font-heading: 'Helvetica', Helvetica, sans-serif;
    --font-display: 'Helvetica', Helvetica, sans-serif;
    --font-script: 'Times New Roman', Times, serif;
    --font-body: 'Times New Roman', Times, serif;
}

[data-theme="dark"] {
    --bg-color: #0D0F14; /* Darker Navy */
    --text-color: #F4F1EE;
    --card-bg: rgba(244, 241, 238, 0.05);
    --card-border: #F4F1EE;

    --header-bg: rgba(13, 15, 20, 0.85);
    --albert-btn-bg: #1a233d;
    --albert-btn-hover: #242c4d;
    --banner-text-color: #1a233d;

    --service-inactive: rgba(244, 241, 238, 0.2);
    --service-dim: rgba(244, 241, 238, 0.4);
    --service-active: rgba(244, 241, 238, 0.6);
}

[data-theme="dark"] .nav-logo,
[data-theme="dark"] .nav-logo-mobile,
[data-theme="dark"] .main-logo,
[data-theme="dark"] .projects-logo,
[data-theme="dark"] .header-center,
[data-theme="dark"] .nav-logo--visible,
[data-theme="dark"] .footer-logo img,
[data-theme="dark"] .albert-icon {
    filter: brightness(0) invert(1) sepia(0.08) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
    /* Soft noise texture overlay strategy (optional) */
}

/* --- LENIS SMOOTH SCROLLING --- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* --- VANTA BACKGROUND --- */
#vanta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    /* Ensure it stays behind everything, even the blurred clouds */
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

/* Typography Classes */
.italic {
    font-style: italic;
}

.bold {
    font-weight: 700;
}

/* Layout Utilities */
.container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 100px 50px 0;
    /* 50px side margin (was 30px) */
    position: relative;
    overflow-x: clip;
}

/* Grid 5 */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 35px;
    /* 35px gutter from Figma */
    width: 100%;
}

.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-5 {
    grid-column: span 5;
}

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.grid {
    display: grid;
}

.max-w-sm {
    max-width: 300px;
}

/* --- SCROLL ANIMATIONS --- */

/* 1. Scroll-triggered elements (added by JS via IntersectionObserver) */
.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.fade-in-element.in-view {
    opacity: 1;
    transform: translateY(0px);
}

/* Cards need compound transforms (base-y + hover-y stacking) */
.card.fade-in-element {
    transform: translateY(calc(var(--base-y) + 30px));
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease, background 0.3s ease;
}

.card.fade-in-element.in-view {
    opacity: 1;
    transform: translateY(var(--base-y));
}

.card.fade-in-element.in-view:hover {
    transform: translateY(calc(var(--base-y) - 10px));
}

/* 2. Fixed elements (page-load, not scroll-triggered) */
.fade-in-fixed {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.fade-in-fixed--visible {
    opacity: 1;
    transform: translateY(0px);
}

/* 3. Stagger delays for list items and polaroids */
.service-list li:nth-child(1) {
    transition-delay: 0.05s;
}

.service-list li:nth-child(2) {
    transition-delay: 0.10s;
}

.service-list li:nth-child(3) {
    transition-delay: 0.15s;
}

.service-list li:nth-child(4) {
    transition-delay: 0.20s;
}

.service-list li:nth-child(5) {
    transition-delay: 0.25s;
}

.service-list li:nth-child(6) {
    transition-delay: 0.30s;
}

.service-list li:nth-child(7) {
    transition-delay: 0.35s;
}

.polaroid:nth-child(1) {
    transition-delay: 0.1s;
}

.polaroid:nth-child(2) {
    transition-delay: 0.2s;
}

.polaroid:nth-child(3) {
    transition-delay: 0.3s;
}

.polaroid:nth-child(4) {
    transition-delay: 0.4s;
}