:root {
    --neon-pink: #ff00ff;
    --neon-green: #39ff14;
    --neon-blue: #00e5ff;
    --rich-black: #050505;
    --gold-primary: #d4af37;
    --gold-bright: #fcf6ba;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--rich-black);
    cursor: crosshair;
}

.bg-rich-black { background-color: var(--rich-black); }
.font-marker { font-family: 'Permanent Marker', cursive; }
.text-neon-pink { color: var(--neon-pink); }
.text-neon-green { color: var(--neon-green); }
.text-neon-blue { color: var(--neon-blue); }
.text-gold { color: var(--gold-primary); }

.drop-shadow-neon-pink { filter: drop-shadow(0 0 15px var(--neon-pink)); }
.drop-shadow-neon-green { filter: drop-shadow(0 0 15px var(--neon-green)); }

.shadow-neon-green { box-shadow: 0 0 10px var(--neon-green); }
.shadow-neon-pink { box-shadow: 0 0 10px var(--neon-pink); }
.shadow-neon-blue { box-shadow: 0 0 10px var(--neon-blue); }

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 999;
}

/* Nav Blur */
#main-nav.scrolled {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Buttons - Large touch targets for mobile */
.btn-gold {
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 45%, #b38728 50%, #fbf5b7 55%, #aa771c 100%);
    color: black;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    touch-action: manipulation;
}

.btn-gold::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
    pointer-events: none;
}

.btn-gold:hover::before {
    left: 100%;
}

/* Spray Paint Mask Effects */
.spray-mask {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.spray-pink { background: var(--neon-pink); }
.spray-green { background: var(--neon-green); }

/* Typography */
h1, h2, h3 {
    text-shadow: 4px 4px 0px rgba(0,0,0,1);
}

@media (min-width: 768px) {
    h1, h2, h3 {
        text-shadow: 6px 6px 0px rgba(0,0,0,1);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--rich-black);
}
::-webkit-scrollbar-thumb {
    background: var(--gold-primary);
}

/* Image Shapes - Circular Treatment */
.image-container-circle {
    width: 280px;
    height: 280px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

@media (max-width: 480px) {
    .image-container-circle {
        width: 200px;
        height: 200px;
    }
}

.image-container-wide {
    mask-image: none;
    border-radius: 12px;
}

@media (min-width: 1024px) {
    .image-container-wide {
        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-46.2C87.4,-33.3,90.1,-17.7,89.1,-2.5C88.1,12.7,83.4,27.5,75.4,40.4C67.4,53.3,56.1,64.2,42.8,71.7C29.5,79.2,14.2,83.3,-0.6,84.4C-15.5,85.5,-31,83.5,-44.4,76.1C-57.8,68.7,-69,55.9,-77.3,41.9C-85.6,27.9,-91,12.7,-91.1,-2.6C-91.1,-17.8,-85.9,-33.1,-76.8,-46.1C-67.8,-59.1,-54.9,-69.8,-41.1,-77.2C-27.3,-84.6,-13.6,-88.7,0.3,-89.2C14.3,-89.8,28.6,-86.8,42.7,-81.2L44.7,-76.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
        mask-size: 140%;
        mask-position: center;
        mask-repeat: no-repeat;
    }
}

/* Mobile Nav Link Styles */
.mobile-nav-link {
    transition: all 0.3s ease;
    letter-spacing: -0.02em;
}
.mobile-nav-link:hover {
    color: var(--neon-pink);
    transform: scale(1.1) rotate(-2deg);
}