@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap');

/* Animations and Custom Utilities */

/* Drift Animation */
@keyframes drift {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-40%, -60%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-60%, -40%) scale(1); opacity: 0.5; }
}

/* Glitch Effect */
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8;
}
.glitch-text::before { color: #ff00ff; z-index: -1; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch-text::after { color: #00ffff; z-index: -2; animation: glitch-anim-2 3s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 2px); }
    20% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -2px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(2px, 2px); }
    60% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, -2px); }
    80% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -2px); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 2px); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -2px); }
    20% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 2px); }
    40% { clip-path: inset(80% 0 10% 0); transform: translate(2px, 2px); }
    60% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, -2px); }
    80% { clip-path: inset(60% 0 30% 0); transform: translate(2px, -2px); }
    100% { clip-path: inset(40% 0 20% 0); transform: translate(-2px, 2px); }
}

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

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}
.mobile-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #FFFFFF;
    transition: 0.3s;
}
@media (max-width: 768px) {
    .mobile-toggle { display: flex; }
    .mobile-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}