* {
    cursor: none !important;
}

body {
    background-color: #05070A;
    color: #e1e2e7;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

/* Multi-Layered Background System */
.bg-layer { position: fixed; inset: 0; pointer-events: none; }

#layer1 { /* Aurora */
    background: 
        radial-gradient(circle at 20% 30%, rgba(30, 136, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(38, 217, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(91, 95, 248, 0.1) 0%, transparent 60%);
    filter: blur(80px);
    z-index: 1;
    transition: transform 0.2s ease-out;
}

#layer2 { /* Energy Currents */
    background-image: linear-gradient(rgba(38, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 217, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    z-index: 2;
    transition: transform 0.2s ease-out;
}

#layer5 { /* Architectural Grid */
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 5;
    transition: transform 0.2s ease-out;
}

/* Custom Cursor */
#custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: #26D9FF;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    /* Velocity-based stretching will be handled via JS */
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.2s ease-out;
    box-shadow: 0 0 20px #26D9FF, 0 0 40px rgba(38, 217, 255, 0.4);
    transform-origin: center;
}

#custom-cursor.hovering {
    background: transparent !important;
    border: 2px solid #26D9FF;
    box-shadow: 0 0 10px #26D9FF, inset 0 0 10px rgba(38, 217, 255, 0.5) !important;
}

#cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(38, 217, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease;
}

.cursor-trail {
    position: fixed;
    width: 8px;
    height: 8px;
    background: rgba(38, 217, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* Aurora Gradient Text/Buttons */
.aurora-text {
    background: linear-gradient(135deg, #1E88FF 0%, #26D9FF 33%, #5B5FF8 66%, #8A63FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.aurora-btn {
    background: linear-gradient(135deg, #1E88FF 0%, #26D9FF 33%, #5B5FF8 66%, #8A63FF 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.aurora-btn:hover {
    box-shadow: 0 0 30px rgba(38, 217, 255, 0.4);
    transform: scale(1.02);
}

/* Magnetic Interaction */
.magnetic { display: inline-block; transition: transform 0.2s ease-out; }

/* Glass Cards */
.glass-card {
    background: rgba(18, 27, 40, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    border-color: #26D9FF;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(38, 217, 255, 0.05);
}

/* Energy Core Animation */
@keyframes rotate-core {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.core-orbit {
    animation: rotate-core 20s linear infinite;
}
.core-orbit-reverse {
    animation: rotate-core 15s linear infinite reverse;
}

/* Velocity Streaks */
.streak {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(38, 217, 255, 0.4), transparent);
    width: 200px;
    animation: streak-move 3s linear infinite;
}
@keyframes streak-move {
    0% { transform: translateX(-200px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

/* Scrolling appearance */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Signature Visualization Network */
.node-line {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    fill: none;
}
.node-line.active {
    stroke: rgba(38, 217, 255, 0.5);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px #26D9FF);
    animation: dash 2s linear forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}