@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

@import "header.css";
@import "hero.css";

:root {
    --bg-dark: #050409;
    --text-light: #FFF8EA;
    --accent-gold: #FDC667;
    
    --font-main: 'Noto Sans', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-number: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-main);
    line-height: 1.6;
}

.container {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

/* Gold Buttons Shimmer Effect */
.btn-primary, .btn-secondary, .about-btn, .footer-cta-btn, .btn-results, .shop-footer-btn {
    position: relative;
    overflow: hidden;
    border: none;
    outline: none;
}

.btn-primary::after, .btn-secondary::after, .about-btn::after, .footer-cta-btn::after, .btn-results::after, .shop-footer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: gold-shimmer 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes gold-shimmer {
    0% {
        left: -100%;
    }
    50% {
        left: 200%;
    }
    100% {
        left: -100%;
    }
}