/* Base Setup */
body {
    background-color: #050505;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #E2B007; }

/* Glitch Effect */
.glitch-wrapper { position: relative; display: inline-block; }
.glitch-text:hover {
    text-shadow: 2px 0 #E2B007, -2px 0 #004972;
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}

/* Tactical Borders & Clip Paths */
.tactical-notch {
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%
    );
}

/* 3D Tilt Card Base */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease;
}
.tilt-content {
    transform: translateZ(20px);
}

/* Grid Overlay for Tech Feel */
.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Scroll Reveal Class */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Modal Transitions */
.modal-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal-content { transform: scale(0.95) translateY(20px); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-backdrop.open .modal-content { transform: scale(1) translateY(0); }

/* Text Stroke */
.text-stroke-thin {
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
    color: transparent;
}

/* Mask Gradient */
.mask-gradient {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Animation Utilities */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}