/* Custom Animations and Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at top, rgba(255, 79, 163, 0.12), transparent 32%),
        linear-gradient(180deg, #110209 0%, #070204 55%, #040102 100%);
    color: #fff7fb;
    opacity: 0;
    animation: page-load-fade 3.8s ease-in-out forwards;
}

@keyframes page-load-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        opacity: 1;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    background-color: #070204;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #14050b;
}

::-webkit-scrollbar-thumb {
    background: #ff4fa3;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff77b8;
}

/* Glow Effects */
.glow-pink {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.text-glow {
    text-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

/* Animation Classes */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

/* Grid Background Animation */
.grid-bg {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(236, 72, 153, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(236, 72, 153, 0.1) 1px, transparent 1px);
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(40px, 40px);
    }
}

/* Card Hover Effects */
.bot-card {
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(28, 10, 18, 0.96), rgba(8, 3, 6, 0.98));
    border-color: rgba(255, 79, 163, 0.16);
}

.bot-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 79, 163, 0.32);
}

/* Filter Button Active State */
.filter-btn.active {
    background-color: #ff4fa3;
    border-color: #ff4fa3;
    color: white;
    box-shadow: 0 0 20px rgba(255, 79, 163, 0.32);
}

/* Modal Animation */
#video-modal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#video-modal:not(.hidden) {
    opacity: 1;
}

/* Responsive Typography */
@media (max-width: 640px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

/* Tech Card Hover */
.tech-card {
    transition: all 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(255, 79, 163, 0.22);
}

/* Neon Border Pulse */
@keyframes border-pulse {
    0%, 100% {
        border-color: rgba(236, 72, 153, 0.2);
    }
    50% {
        border-color: rgba(236, 72, 153, 0.5);
    }
}

.neon-border {
    animation: border-pulse 2s ease-in-out infinite;
}

#home::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 12rem;
    background: linear-gradient(180deg, transparent, #050103 88%);
    pointer-events: none;
}

/* Selection Color */
::selection {
    background: rgba(236, 72, 153, 0.3);
    color: white;
}

/* Gradient Text Animation */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}