/* ================================================
   Nunik Co. | Theming & Core Styles
   ================================================ */

/* --- Light Mode (default root) --- */
:root {
    --bg: #F8F6F3;
    --text: #1B1E22;
    --text-muted: rgba(27, 30, 34, 0.65);
    --text-faint: rgba(27, 30, 34, 0.52);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-hover: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(27, 30, 34, 0.06);
    --glass-border-hover: rgba(27, 30, 34, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.06);
    --glass-shadow-hover: rgba(0, 0, 0, 0.12);
    --nav-glass: rgba(255, 255, 255, 0.7);
    --nav-border: rgba(27, 30, 34, 0.06);
    --accent: #B35D44;
    --accent-light: #974730;
    --accent-glow: rgba(179, 93, 68, 0.15);
    --accent-glow-strong: rgba(179, 93, 68, 0.3);
    --teal: #5A8A8A;
    --heading-sub: #8B5E3C;
    --cursor-color: #1B1E22;
    --select-bg: #F0EDE8;
    --footer-muted: rgba(27, 30, 34, 0.58);
    --divider: rgba(27, 30, 34, 0.08);
    --terminal-green: #2d8a4e;
    --frosted-bg: rgba(248, 246, 243, 0.725);
    --frosted-border: rgba(27, 30, 34, 0.08);
}

/* --- Dark Mode --- */
.dark {
    --bg: #111417;
    --text: #E1E4E7;
    --text-muted: rgba(225, 228, 231, 0.6);
    --text-faint: rgba(225, 228, 231, 0.15);
    --glass-bg: rgba(44, 49, 54, 0.4);
    --glass-bg-hover: rgba(44, 49, 54, 0.3);
    --glass-border: rgba(225, 228, 231, 0.05);
    --glass-border-hover: rgba(225, 228, 231, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.2);
    --glass-shadow-hover: rgba(0, 0, 0, 0.4);
    --nav-glass: rgba(44, 49, 54, 0.35);
    --nav-border: rgba(225, 228, 231, 0.05);
    --accent: #B35D44;
    --accent-light: #ffb5a0;
    --accent-glow: rgba(179, 93, 68, 0.2);
    --accent-glow-strong: rgba(179, 93, 68, 0.45);
    --teal: #2c4c4c;
    --heading-sub: #E8C9A0;
    --cursor-color: #E1E4E7;
    --select-bg: #1B1E22;
    --footer-muted: rgba(225, 228, 231, 0.35);
    --divider: rgba(225, 228, 231, 0.06);
    --terminal-green: #4ade80;
    --frosted-bg: rgba(17, 20, 23, 0.725);
    --frosted-border: rgba(225, 228, 231, 0.06);
}

/* ================================================
   Base
   ================================================ */
html {
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background-color 0.6s ease, color 0.6s ease;
}

/* ================================================
   Full-width frosted navbar (kept for mobile drawer)
   ================================================ */
.glass-nav-bar {
    background: var(--nav-glass);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

/* ================================================
   Glass nav pill (centered floating pill)
   ================================================ */
.glass-nav-pill {
    background: var(--nav-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--nav-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255,255,255,0.05) inset;
    transition: background 0.6s ease, border-color 0.6s ease;
}

/* ================================================
   Frosted section (full-section backdrop, no margin)
   ================================================ */
.frosted-section {
    background: var(--frosted-bg);
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    border-top: 1px solid var(--frosted-border);
    border-bottom: 1px solid var(--frosted-border);
}

/* ================================================
   Mobile nav drawer
   ================================================ */
#mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    padding: 5rem 2rem 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#mobile-nav.open {
    transform: translateY(0);
}

/* ================================================
   Glass Card
   ================================================ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.7s ease,
                background 0.7s ease,
                border-color 0.7s ease;
}
.glass-card:hover {
    transform: translateY(-4px) scale(1.02);
    background: var(--glass-bg-hover);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    border-color: var(--glass-border-hover);
}

/* ================================================
   Contact expansion (hidden by default for GSAP)
   ================================================ */
#contact-expansion {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

/* ================================================
   Editorial clip mask
   ================================================ */
.editorial-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ================================================
   Custom Cursor
   ================================================ */
.custom-cursor-active, .custom-cursor-active * {
    cursor: none !important;
}
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: var(--cursor-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
#custom-cursor.hovering {
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 1px solid var(--cursor-color);
}
#custom-cursor.view-project {
    width: 100px;
    height: 100px;
    background-color: var(--accent);
    border: none;
    mix-blend-mode: normal;
}
#custom-cursor.view-project::after {
    content: "VIEW";
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: white;
}

/* ================================================
   Initiate Protocol pulsing glow
   ================================================ */
.initiate-pulse {
    animation: protocolPulse 3s ease-in-out infinite;
}
@keyframes protocolPulse {
    0%, 100% { box-shadow: 0 4px 20px var(--accent-glow); }
    50% { box-shadow: 0 4px 40px var(--accent-glow-strong); }
}
.initiate-pulse:hover {
    transform: scale(1.05) rotate(-2deg) !important;
}

/* ================================================
   WebGL Fluid Background (bottom layer)
   ================================================ */
#webgl-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* ================================================
   3D Chakra Canvas (subtle overlay above fluid)
   ================================================ */
#chakra-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    transition: opacity 0.6s ease;
}

/* ================================================
   Frosted Glass Section Band
   ================================================ */
.frosted-band {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background: var(--frosted-bg);
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    border-top: 1px solid var(--frosted-border);
    border-bottom: 1px solid var(--frosted-border);
    margin: 4rem 0;
}

/* ================================================
   Hero Title Pulse & 3D
   ================================================ */
@keyframes heroPulse {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.02) translateY(-2px); }
}
#hero-title {
    perspective: 1000px;
    animation: heroPulse 4s ease-in-out infinite;
    transform-style: preserve-3d;
    font-size: 3.5rem;
}
@media (min-width: 768px) {
    #hero-title { font-size: 12rem; }
}

/* ================================================
   Global smooth transitions
   ================================================ */
a, button, .glass-card, .nav-link, input, textarea, select {
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================
   Terminal form inputs
   ================================================ */
.terminal-input {
    font-size: 13px;
    letter-spacing: 0.02em;
}
.terminal-input:focus {
    border-color: var(--accent) !important;
}
select.terminal-input option {
    background: var(--select-bg);
    color: var(--text);
}

/* ================================================
   Theme-aware utility classes
   ================================================ */
.t-text       { color: var(--text); }
.t-muted      { color: var(--text-muted); }
.t-faint      { color: var(--text-faint); }
.t-accent     { color: var(--accent); }
.t-accent-lt  { color: var(--accent-light); }
.t-heading    { color: var(--heading-sub); }
.t-teal       { color: var(--teal); }
.t-footer     { color: var(--footer-muted); }
.t-divider    { border-color: var(--divider); }
.t-bg         { background-color: var(--bg); }

/* Nav link hover states */
a.nav-link.t-muted:hover {
    color: var(--text) !important;
}
a.nav-link.t-accent:hover {
    color: var(--accent-light) !important;
}

/* ================================================
   Lenis
   ================================================ */
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-smooth iframe {
    pointer-events: none;
}

/* ================================================
   Touch/mobile: hide custom cursor, show normal
   ================================================ */
@media (pointer: coarse) {
    .custom-cursor-active, .custom-cursor-active * { cursor: auto !important; }
    #custom-cursor { display: none !important; }
}

/* ================================================
   Initiate protocol: visible on all screen sizes
   ================================================ */
#initiate-btn {
    display: flex !important;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
#initiate-btn.footer-visible {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(12px);
}

/* Reduce pill size on small screens */
@media (max-width: 767px) {
    .glass-nav-pill { display: none !important; }
    #initiate-btn .initiate-inner { padding: 0.75rem 1rem; }
    #initiate-btn .initiate-label { display: none; }
}

/* ================================================
   Footer glass bar (social + copyright row)
   ================================================ */
.footer-glass-bar {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.5rem;
}