:root {
    --ink: #0d0f13;
    --paper: #ffffff;
    --paper-glass: rgba(255, 255, 255, 0.85);
    --brand: #ff764d;
    --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-nav: 'Inter', system-ui, sans-serif;
    --nav-height: 80px;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hide native scrollbar for Chrome/Safari */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: var(--font-display);
}

/* ============================================================
   ANIMATION & INTERACTIVITY ENGINE (ROBUST SCROLL REVEALS)
   ============================================================ */

/* Scroll Reveal Base */
.reveal, 
.reveal-up, 
.reveal-down, 
.reveal-left, 
.reveal-right, 
.reveal-zoom {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Directional Starts */
.reveal-up { transform: translateY(60px); }
.reveal-down { transform: translateY(-60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-zoom { transform: scale(0.85); }

/* Stagger Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Active State Overrides - Extremely High Specificity to prevent overrides */
body .reveal.active,
body .reveal.reveal-active,
body .reveal-up.active,
body .reveal-up.reveal-active,
body .reveal-left.active,
body .reveal-left.reveal-active,
body .reveal-right.active,
body .reveal-right.reveal-active,
body .is-revealed {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Fail-safe fallback: If JS is disabled or fails, show all reveals after a brief delay */
@keyframes auto-reveal {
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Apply fallback animation after 2.5s if active class hasn't been added */
.reveal:not(.active):not(.reveal-active) {
    animation: auto-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
}

/* Hover Physics */
.hover-lift {
    transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-out-expo), border-color 0.5s ease;
}

.hover-lift:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    z-index: 10;
}

.img-zoom-wrapper {
    overflow: hidden;
}

.img-zoom-target {
    transition: transform 0.7s var(--ease-out-expo);
}

.hover-lift:hover .img-zoom-target,
.group:hover .img-zoom-target {
    transform: scale(1.08);
}

/* Continuous Animations */
@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: subtle-float 6s ease-in-out infinite;
}

.principles-wrapper {
    background: #f5f5f5;
    padding: 0 4% 80px 4%;
    box-sizing: border-box;
    width: 100%;
}

.principles-container {
    background: #444444;
    padding: 45px 40px;
    border-radius: 30px;
    box-sizing: border-box;
    width: 100%;
}