/* BASE SETTINGS */
body {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    padding-bottom: 120px;
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #00c48c; }

::selection { background: #00c48c; color: #000; }

/* DEPLOYMENT: LOCKED TABS STYLE */
.kb-tab-locked {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(100%);
    position: relative;
}
.kb-tab-locked:hover {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: inherit !important;
}

/* --- THE "SMOOTH FIX" (CSS COMPOSITOR ANIMATION) --- */

/* 1. Initial State (Hidden & Down) */
.kb-animate-card {
    opacity: 0;
    transform: translateY(40px);
    /* GPU Acceleration Hint */
    will-change: opacity, transform;
    /* The transition happens on the GPU */
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. Final State (Visible & Up) - Triggered by JS Class */
.kb-animate-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. The "One-by-One" Stagger (Manual Delays) */
.kb-animate-card:nth-child(1) { transition-delay: 0.05s; }
.kb-animate-card:nth-child(2) { transition-delay: 0.15s; }
.kb-animate-card:nth-child(3) { transition-delay: 0.25s; }
.kb-animate-card:nth-child(4) { transition-delay: 0.35s; }

/* GSAP Reveal for Text elements (Kept separate as text is light) */
.gsap-reveal {
    opacity: 0;
    visibility: hidden;
}

/* AURORA ANIMATION */
.kb-aurora-1 { animation: kbAurora1 15s ease-in-out infinite; }
.kb-aurora-2 { animation: kbAurora2 18s ease-in-out infinite; }
.kb-aurora-3 { animation: kbAurora3 10s ease-in-out infinite; }

@keyframes kbAurora1 { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; } 50% { transform: scale(1.2) rotate(10deg); opacity: 0.5; } }
@keyframes kbAurora2 { 0%, 100% { transform: scale(1) translateX(0); opacity: 0.2; } 50% { transform: scale(1.1) translateX(-30px); opacity: 0.4; } }
@keyframes kbAurora3 { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.2; } }

/* UTILITIES */
.kb-hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.kb-hide-scrollbar::-webkit-scrollbar { display: none; }

/* NAVBAR */
#kb-navbar[data-scrolled='true'] { background-color: rgba(5, 5, 5, 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1rem; padding-bottom: 1rem; }
.kb-nav-link-active { color: #00c48c !important; }
.kb-nav-link-active::after { width: 100%; }
.kb-nav-link::after { content: ''; position: absolute; left: 0; bottom: -0.25rem; height: 2px; width: 0; background-color: #00c48c; transition: width 0.3s ease; }
.kb-nav-link:hover::after { width: 100%; }

/* HERO TEXT */
.kb-stroke-text { -webkit-text-stroke: 1px #ffffff; color: transparent; }
.kb-char { display: inline-block; opacity: 0; transform: translateY(16px); }
.kb-word { display: inline-block; }
.kb-hero-nowrap { white-space: nowrap; }

/* PROJECT DRAWER */
#kb-project-sheet { opacity: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0); backdrop-filter: none; }
#kb-project-sheet[data-open='true'] { opacity: 1; pointer-events: auto; background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); }
#kb-project-sheet-panel { transform: translateY(24px) scale(0.97); opacity: 0; }
#kb-project-sheet[data-open='true'] #kb-project-sheet-panel { transform: translateY(0) scale(1); opacity: 1; }

/* GLASS CARDS */
.kb-service-card { background: rgba(255, 255, 255, 0.015); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease, border-color 0.3s ease; }
.kb-service-card:hover { border-color: rgba(255, 255, 255, 0.1); }
.kb-button-glow { position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(0, 196, 140, 0.4); }
.kb-glow-point { position: absolute; pointer-events: none; mix-blend-mode: screen; }