html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
}

.font-mono {
    font-family: 'DM Mono', monospace;
}

#logo {
    --slide-distance: 0px;
}

#arrow-left,
#arrow-right {
    transform: translateX(-50%);
}

#logo.loaded #arrow-left {
    transform: translateX(calc(-50% - var(--slide-distance)));
}

#logo.loaded #arrow-right {
    transform: translateX(calc(-50% + var(--slide-distance)));
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: #f5c518;
    transition: width .25s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 100%);
}

.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-hint span {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #6366f1);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0;
        transform: scaleY(.5) translateY(-10px)
    }

    50% {
        opacity: 1;
        transform: scaleY(1) translateY(0)
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .opacity-0 {
        opacity: 1 !important;
    }

    .translate-y-8 {
        transform: none !important;
    }

    .scroll-hint {
        display: none;
    }
}

.no-js .opacity-0 {
    opacity: 1 !important;
}

.no-js .translate-y-8 {
    transform: none !important;
}

#services::before,
#clients::before,
#contact::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

#services::before {
    background:
        radial-gradient(800px circle at 20% 30%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(600px circle at 80% 70%, rgba(168, 85, 247, 0.06), transparent 60%);
}

#clients::before {
    background:
        radial-gradient(700px circle at 30% 20%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(500px circle at 70% 80%, rgba(99, 102, 241, 0.05), transparent 60%);
}

#contact::before {
    background:
        radial-gradient(700px circle at 50% 30%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(500px circle at 20% 80%, rgba(245, 197, 24, 0.06), transparent 60%);
}

#services>*,
#clients>*,
#contact>* {
    position: relative;
    z-index: 1;
}


.hero-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(900px circle at 50% 40%, rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(600px circle at 20% 70%, rgba(168, 85, 247, 0.08), transparent 60%),
        radial-gradient(500px circle at 80% 20%, rgba(245, 197, 24, 0.06), transparent 60%);
}

#home::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background: radial-gradient(ellipse at center,
            transparent 40%,
            rgba(0, 0, 0, 0.5) 100%);
}

#logo-text {
    text-shadow:
        0 0 10px rgba(245, 197, 24, 0.15),
        0 0 20px rgba(245, 197, 24, 0.1);
}

#arrow-left,
#arrow-right {
    text-shadow:
        0 0 8px rgba(245, 197, 24, 0.4),
        0 0 16px rgba(245, 197, 24, 0.2);
}

@keyframes heroFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

#logo.loaded {
    animation: heroFloat 6s ease-in-out infinite;
}