/* ==========================================
   styles.css
   Server Charge - Premium UI Styles
========================================== */

/* Hide Default Cursor Globally */
body, a, button, input, select, textarea, .cursor-pointer, .interactive-element {
    cursor: none !important;
}

/* Update this block at the very top of styles.css */
html, body {
    background-color: #040613; /* Forces the root to be dark, preventing white flashes */
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

#app {
    min-height: 100vh; /* Prevents the layout from collapsing during page swaps */
}
/* Ambient lavender background glow */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Scrollbar Customization */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #040613; }
::-webkit-scrollbar-thumb { background: #161b33; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #38BDF8; }

::selection { background-color: #A78BFA; color: #fff; }

/* Utility to hide scrollbar for horizontal scrolling elements */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================
   CUSTOM CURSOR
========================================== */
#cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background-color: #38BDF8; 
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

#cursor-outline {
    position: fixed;
    top: 0; left: 0;
    width: 32px; height: 32px;
    border: 1px solid #A78BFA; 
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}

/* Cursor Hover State */
body.cursor-hovering #cursor-outline {
    width: 50px;
    height: 50px;
    background-color: rgba(56, 189, 248, 0.1);
    border-color: #38BDF8;
}

/* ==========================================
   GLOBAL 3D CANVAS & TRANSITIONS
========================================== */
#three-canvas {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Full screen overlay for seamless initial loading */
#page-transition-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #040613;
    z-index: 99999;
    pointer-events: none;
}

/* ==========================================
   NAVIGATION
========================================== */
@keyframes navFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

.floating-nav {
    animation: navFloat 4s ease-in-out infinite;
}

/* ==========================================
   LAYOUT & SCROLL SNAP SYSTEM
========================================== */
.page-view {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    opacity: 0; /* JS will fade this in smoothly */
}

.page-view:not(.snap-container) {
    padding-top: 40px; 
    padding-bottom: 140px; 
}

.snap-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.snap-slide {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    padding-top: 80px; 
    padding-bottom: 120px; 
}

.internal-scroll {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    padding: 10px 5px;
}

/* ==========================================
   UI COMPONENTS & EFFECTS
========================================== */
.technical-panel {
    background-color: rgba(10, 14, 32, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid #161b33;
    position: relative;
    transition: all 0.4s ease;
}

.glow-hover:hover {
    box-shadow: 0 0 40px rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.5);
    transform: translateY(-2px);
}

.btn-gradient {
    position: relative;
    background: #0a0e20;
    border: 1px solid #161b33;
    color: #fff;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 1;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #38BDF8, #A78BFA, #93C5FD);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.btn-gradient:hover {
    border-color: transparent;
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.4);
    transform: scale(1.02);
}

.btn-gradient:hover::before {
    opacity: 1;
}

.text-gradient {
    background: linear-gradient(to right, #ffffff, #c7c7d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-bold {
    background: linear-gradient(to right, #38BDF8, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Feature List Typography */
.data-list li {
    position: relative;
    padding-left: 20px;
    border-left: 1px solid #161b33;
    transition: all 0.3s ease;
}

.data-list li::before {
    content: '>';
    position: absolute;
    left: -5px; 
    color: #556;
    transition: all 0.3s ease;
}

.data-list li:hover { 
    border-left-color: #38BDF8; 
}

.data-list li:hover::before { 
    color: #38BDF8; 
}