/* S3 Agency — Custom CSS */

html {
    scroll-behavior: smooth;
    background-color: #0A0A0A;
}

body {
    background-color: #0A0A0A;
    color: #FFFFFF;
    overflow-x: hidden;
}

/* Starfield */
.starfield-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #0A0A0A;
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,0.25) 1px, transparent 1px);
    background-size: 80px 80px, 40px 40px;
    background-position: 0 0, 20px 20px;
    pointer-events: none;
    z-index: 0;
    animation: stars-move 120s linear infinite;
}

@keyframes stars-move {
    from { background-position: 0 0, 20px 20px; }
    to   { background-position: -800px -800px, -380px -380px; }
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, #6366F1 0%, #a78bfa 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typing cursor */
.typing-cursor::after {
    content: '|';
    animation: blink 0.7s step-end infinite;
    color: #6366F1;
    font-weight: 300;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Hero badge fade in */
.fade-in-badge {
    animation: fadeInDown 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.scroll-indicator {
    animation: fadeInUp 1s cubic-bezier(0.4,0,0.2,1) 1.5s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Marquee */
.marquee-track {
    animation: marquee 30s linear infinite;
    width: max-content;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Nav glass scroll effect handled in JS */
.nav-glass {
    transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-scrolled {
    background: rgba(10,10,10,0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Logo glow */
nav img[alt="S3 Agency"] {
    filter: drop-shadow(0 0 8px rgba(99,102,241,0.5)) drop-shadow(0 0 20px rgba(99,102,241,0.25));
    transition: filter 0.3s ease;
}
nav img[alt="S3 Agency"]:hover {
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.7)) drop-shadow(0 0 30px rgba(99,102,241,0.35));
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #27272A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525B; }

/* Fade up elements — base state */
.fade-up-element {
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}