/* ============================================
   Pollos Asados El Rey Mty — Custom Styles
   ============================================ */

/* Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    min-height: 100vh;
}

/* ============================================
   Geometric Background Shapes
   ============================================ */
.geometric-shapes {
    z-index: 0;
}

.geo-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
}

.geo-circle--1 {
    width: 400px;
    height: 400px;
    background: #3d6629;
    top: 10%;
    right: -100px;
}

.geo-circle--2 {
    width: 250px;
    height: 250px;
    background: #facc15;
    bottom: 20%;
    left: -60px;
}

.geo-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 60px 100px 60px;
    border-color: transparent transparent #3d6629 transparent;
    top: 30%;
    left: 5%;
    opacity: 0.05;
    transform: rotate(-15deg);
}

.geo-diamond {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #facc15;
    top: 60%;
    right: 8%;
    opacity: 0.06;
    transform: rotate(45deg);
}

.geo-arc {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 4px solid #3d6629;
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    bottom: 10%;
    right: 15%;
    opacity: 0.08;
    transform: rotate(-45deg);
}

/* ============================================
   Hero Shapes
   ============================================ */
.hero-shape {
    position: absolute;
    opacity: 0.12;
}

.hero-shape--circle-1 {
    width: 500px;
    height: 500px;
    background: #facc15;
    border-radius: 50%;
    top: -150px;
    right: -100px;
}

.hero-shape--circle-2 {
    width: 300px;
    height: 300px;
    background: #86efac;
    border-radius: 50%;
    bottom: 10%;
    left: -80px;
}

.hero-shape--triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 140px 80px;
    border-color: transparent transparent rgba(250, 204, 21, 0.5) transparent;
    top: 20%;
    left: 10%;
    transform: rotate(-20deg);
    opacity: 0.3;
}

.hero-shape--diamond {
    width: 100px;
    height: 100px;
    background: rgba(250, 204, 21, 0.4);
    top: 60%;
    right: 15%;
    transform: rotate(45deg);
}

.hero-shape--stripe {
    width: 300px;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        rgba(250, 204, 21, 0.4) 0px,
        rgba(250, 204, 21, 0.4) 20px,
        transparent 20px,
        transparent 40px
    );
    bottom: 25%;
    left: -50px;
    transform: rotate(-30deg);
}

.hero-shape--dot-grid {
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle, rgba(250, 204, 21, 0.5) 2px, transparent 2px);
    background-size: 16px 16px;
    top: 40%;
    right: 5%;
    opacity: 0.6;
}

/* ============================================
   Navigation
   ============================================ */
.nav-link {
    position: relative;
}

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

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

.mobile-nav-link {
    position: relative;
    padding-left: 0;
    border-bottom: 1px solid #e3edd8;
}

.mobile-nav-link:last-child {
    border-bottom: none;
}

/* ============================================
   Feature Cards
   ============================================ */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
}

/* ============================================
   Menu Cards
   ============================================ */
.menu-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-6px);
}

/* ============================================
   Scroll Reveal Animations
   ============================================ */
.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .menu-card:hover,
    .feature-card:hover {
        transform: none;
    }
    
    .hero-shape,
    .geo-circle,
    .geo-triangle,
    .geo-diamond,
    .geo-arc {
        animation: none;
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 767px) {
    .geo-circle--1 {
        width: 200px;
        height: 200px;
    }
    
    .geo-circle--2 {
        width: 120px;
        height: 120px;
    }
    
    .geo-triangle {
        border-width: 0 40px 70px 40px;
    }
    
    .geo-diamond {
        width: 50px;
        height: 50px;
    }
    
    .geo-arc {
        width: 120px;
        height: 120px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-shape--circle-1 {
        width: 350px;
        height: 350px;
    }
    
    .hero-shape--circle-2 {
        width: 200px;
        height: 200px;
    }
}

/* ============================================
   Focus Styles (Accessibility)
   ============================================ */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   Selection Color
   ============================================ */
::selection {
    background: #3d6629;
    color: #fdfcf7;
}