/* Vignette Effect */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50; /* Above background, below interactive elements */
    background: radial-gradient(
        circle at center,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.9) 100%
    );
    opacity: 0;
    animation: vignetteFadeIn 1.5s ease-out forwards;
}

/* Global Text Selection Highlighting (White Background, Black Text) */
::selection {
    background-color: #ffffff;
    color: #000000;
}

::-moz-selection {
    background-color: #ffffff;
    color: #000000;
}

@keyframes vignetteFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Booting Animations */
@keyframes bootUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.boot-element {
    opacity: 0; /* Start hidden */
    animation: bootUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays */
.delay-0 { animation-delay: 0.1s; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.6s; }
.delay-6 { animation-delay: 0.7s; }

/* Enhanced Shadows & Depth */
.depth-layer {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.depth-input {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.depth-button {
    box-shadow: 
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}