/* ============================================================
   SneakySpin Homepage — Custom Styles
   Stack: Vanilla JS + Tailwind CDN
   ============================================================ */

/* Base */
html {
    background-color: #0f172a;
    min-height: 100vh;
    scroll-behavior: smooth;
}

body {
    background-color: #0f172a;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Outfit', -apple-system, system-ui, sans-serif;
    overflow-x: hidden;
    color: #ffffff;
}

/* Typography */
.graffiti-text {
    font-family: 'Permanent Marker', cursive;
}

/* Urban Shadows */
.urban-shadow {
    box-shadow: 6px 6px 0px 0px #000000;
}

.urban-shadow-sm {
    box-shadow: 3px 3px 0px 0px #000000;
}

/* Header */
.header-inner {
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#siteHeader.scrolled .header-inner {
    border-bottom: 4px solid #1e293b;
}

/* Hero background pattern */
.hero-bg-pattern {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(43, 99, 225, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(244, 192, 37, 0.04) 0%, transparent 50%);
}

/* Animations */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 35s linear infinite;
}

@keyframes bounceSlow {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(-8px) translateX(-50%); }
}

.animate-bounce-slow {
    animation: bounceSlow 2.5s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Section reveal */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Touch optimization for iOS */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button, a, input, textarea {
    touch-action: manipulation;
}

/* Smooth scroll offset for fixed header */
[id] {
    scroll-margin-top: 90px;
}