/* =========================================
   EXPLOSION 3000 FULL ENRICHED AWWWARDS CSS
   ========================================= */

/* Eliminate default scrollbar since we use Lenis */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* Base State - Pure Obsidian without grain */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0A0A0A;
    transition: background-color 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: none; /* Hide native cursor globally for custom implementation */
}

/* Fallback for native interaction elements if JS is slow */
a, button, input {
    cursor: none; 
}

/* Ambient Lighting Overrides for Edition Toggle */
body.edition-argent {
    background-color: #0b0d0f; /* Slight steel tint */
}
body.edition-argent .ambient-light-1 {
    background: #E5E7EB;
}
body.edition-argent .ambient-light-2 {
    background: #9ca3af;
}
body.edition-noir .ambient-light-1 {
    background: #C6A87C; /* Brass */
}
body.edition-noir .ambient-light-2 {
    background: #A34A61; /* Subtle rose sub-glow */
}

/* ───────────────────────────────────────
   Toggle Configurator (The Explorer)
   ─────────────────────────────────────── */
.toggle-indicator {
    will-change: transform;
}
.edition-argent .toggle-indicator {
    transform: translateX(100%);
    background: rgba(255,255,255,0.2); 
    box-shadow: 0 0 30px rgba(229, 231, 235, 0.4);
}

/* Buttons color states */
.explorer-btn {
    will-change: color, opacity;
}
.edition-argent #btn-argent {
    color: #fff;
    opacity: 1;
}
.edition-argent #btn-noir {
    color: rgba(255,255,255,1);
    opacity: 0.3;
}
.edition-noir #btn-noir {
    color: #fff;
    opacity: 1;
}
.edition-noir #btn-argent {
    color: rgba(255,255,255,1);
    opacity: 0.3;
}

/* ───────────────────────────────────────
   Custom Context-Aware Cursor
   ─────────────────────────────────────── */
#cursor-follower {
    will-change: width, height, transform;
}
#cursor-text {
    will-change: opacity;
}
/* Helper class added dynamically */
body.cursor-active #cursor-follower {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.1);
    border-color: transparent;
}
body.cursor-active #cursor-text {
    opacity: 1;
}

/* Magnetic Utility */
.magnetic-btn {
    display: inline-block;
    will-change: transform;
}

/* ───────────────────────────────────────
   Curtain Reveals & 3D Tilt
   ─────────────────────────────────────── */
.curtain-wrapper {
    position: relative;
    overflow: hidden;
}
.curtain-mask {
    will-change: transform;
    /* Transformation handled via JS ScrollTrigger */
}
.gallery-tilt {
    will-change: transform;
    transform-style: preserve-3d;
}

/* ───────────────────────────────────────
   Typography & Reveal Utilities
   ─────────────────────────────────────── */

/* Philosophy highlight span */
.philo-hl {
    color: #C6A87C;
    font-style: italic;
    opacity: 0.5;
    transition: opacity 0.5s ease, filter 0.5s ease;
    filter: blur(2px);
    will-change: opacity, filter;
}
.philo-hl.active {
    opacity: 1;
    filter: blur(0px);
}

/* ───────────────────────────────────────
   Anatomy Section (Sticky Pinned)
   ─────────────────────────────────────── */
.anatomy-text {
    will-change: transform, opacity;
}

/* ───────────────────────────────────────
   Tech Specs Grid
   ─────────────────────────────────────── */
.tech-card {
    transition: background-color 0.4s ease;
    will-change: background-color;
}
.tech-card:hover {
    background-color: rgba(255,255,255,0.02);
}