/* --- ARCHITECTURAL PALETTE HARDWARE STYLING --- */
:root {
    --chrysolite: #3D2612;          /* Grounded Bronze / Primary Text Accent */
    --crispwhite: #FAF9F6;          /* Clean parchment canvas whitespace */
    --emeraldaccent: #10B981;       /* Operational high-visibility emerald green */
    --emeraldaccent-hover: #0ea571; /* Accent interaction state modification */
}

/* Explicit Structural Base Extensions */
.bg-crispwhite { background-color: var(--crispwhite); }
.text-chrysolite { color: var(--chrysolite); }
.text-emeraldaccent { color: var(--emeraldaccent); }
.bg-chrysolite { background-color: var(--chrysolite); }
.bg-emeraldaccent { background-color: var(--emeraldaccent); }
.hover\:bg-emeraldaccent:hover { background-color: var(--emeraldaccent); }
.hover\:bg-emeraldaccent-hover:hover { background-color: var(--emeraldaccent-hover); }

/* Interface Blur & Opacity Matrix Configurations */
.bg-navbar { background-color: rgba(250, 249, 246, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bg-badge { background-color: rgba(16, 185, 129, 0.08); }
.text-chrysolite-muted { color: rgba(61, 38, 18, 0.7); }
.border-chrysolite-fade { border-color: rgba(61, 38, 18, 0.08); }
.border-chrysolite-fade-deep { border-color: rgba(61, 38, 18, 0.15); }
.border-chrysolite-faint { border-color: rgba(61, 38, 18, 0.12); }

.accent-text { color: var(--emeraldaccent); }
.italic-serif { font-style: italic; font-family: Georgia, Cambria, serif; }

.selection-accent::selection {
    background-color: var(--emeraldaccent);
    color: #ffffff;
}

html {
    scroll-behavior: smooth;
}

/* --- IPHONE-STYLE AMBIENT MOTION CANVAS ENGINE --- */
.ambient-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none; /* Allows pointer actions to bypass down to input modules */
}

/* The fluid moving wallpaper. Scaled outwards to handle coordinate bleed without clipping edges */
.ambient-bg-layer {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at 85% 25%, rgba(16, 185, 129, 0.06) 0%, transparent 45%),
                radial-gradient(circle at 15% 75%, rgba(61, 38, 18, 0.04) 0%, transparent 50%);
    filter: blur(65px);
    will-change: transform;
    /* Forces GPU level execution pipeline maps directly over raw values */
    transform: translate3d(0, 0, 0);
    transition: transform 0.25s cubic-bezier(0.25, 0.61, 0.35, 1);
}

/* --- SYSTEM INTERACTION TIMING CURVES --- */
/* Smooth mechanical transition for interactive elements */
.mechanical-ease {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dot-grid {
    background-image: radial-gradient(var(--emeraldaccent) 1px, transparent 1px);
    background-size: 24px 24px;
}

@keyframes continuousRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotate-clockwise {
    animation: continuousRotate 45s linear infinite;
}

/* Cascading Screen Entry Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    animation: revealUpEffect 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-200 {
    animation-delay: 0.1s;
}

@keyframes revealUpEffect {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}