@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@layer utilities {
    .animate-scroll {
        animation: scroll 30s linear infinite;
        display: flex;
        width: max-content;
    }
}

/* Scrollbar Styles */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a2342; }
::-webkit-scrollbar-thumb { background: #ff9933; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #e68a00; }

/* SVG Animations */
.svg-path { transition: stroke 0.5s ease, stroke-width 0.5s ease; }
.svg-circle { transition: fill 0.5s ease, r 0.5s ease; }

/* Form Styles */
.peer:placeholder-shown ~ .peer-label { top: 1rem; font-size: 1.125rem; color: #9ca3af; }
.peer:focus ~ .peer-label, .peer:not(:placeholder-shown) ~ .peer-label { top: -0.75rem; font-size: 0.875rem; color: #ff9933; background-color: #051121; padding: 0 0.5rem; }

/* Horizontal Scroll Section */
.sticky-wrapper { position: relative; height: 300vh; }
.sticky-container { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.horizontal-track { display: flex; gap: 3rem; padding-left: 15vw; will-change: transform; }

/* Logo Scroll Keyframe */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hover-pause-wrapper:hover .animate-scroll {
    animation-play-state: paused;
}

.tech-logo {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.tech-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}