/* ============================================
   PATRIOT BARBER SHOP — Custom Styles
   ============================================ */

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF5E6; }
::-webkit-scrollbar-thumb { background: #C0603A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #964A2D; }

/* --- Navigation --- */
.nav { background: rgba(253, 245, 230, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(245, 217, 160, 0.3); }
.nav.scrolled { background: rgba(255, 251, 245, 0.97); box-shadow: 0 4px 30px rgba(28, 21, 16, 0.08); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #C0603A; transition: all 0.3s ease; transform: translateX(-50%); }
.nav-link:hover::after { width: 60%; }
.nav-logo-text { transition: color 0.3s ease; }

/* --- Mobile Menu --- */
.mobile-link { border-radius: 12px; }
#mobileMenu { animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Hero Geometric Shapes --- */
.geo-shape { position: absolute; opacity: 0.12; pointer-events: none; }
.geo-circle-1 { width: 500px; height: 500px; border-radius: 50%; background: #F5D9A0; top: -150px; right: -100px; animation: float1 8s ease-in-out infinite; }
.geo-circle-2 { width: 300px; height: 300px; border-radius: 50%; background: #FFFBF5; bottom: 10%; left: -50px; animation: float2 10s ease-in-out infinite; }
.geo-circle-3 { width: 150px; height: 150px; border-radius: 50%; background: #FDE4D4; top: 30%; left: 10%; animation: float3 6s ease-in-out infinite; }
.geo-rect-1 { width: 200px; height: 200px; background: #FFFBF5; top: 20%; right: 5%; transform: rotate(45deg); border-radius: 24px; animation: float4 12s ease-in-out infinite; }
.geo-rect-2 { width: 120px; height: 120px; background: #F5D9A0; bottom: 20%; right: 15%; transform: rotate(20deg); border-radius: 16px; animation: float1 9s ease-in-out infinite reverse; }
.geo-tri-1 { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid #FFFBF5; top: 60%; left: 5%; animation: float3 7s ease-in-out infinite; opacity: 0.08; }
.geo-dots { background-image: radial-gradient(circle, #FFFBF5 1.5px, transparent 1.5px); background-size: 24px 24px; width: 300px; height: 300px; bottom: 5%; right: 10%; opacity: 0.2; }
.geo-circle-4 { width: 600px; height: 600px; border-radius: 50%; background: #F5D9A0; bottom: -300px; right: -200px; animation: float1 11s ease-in-out infinite; }
.geo-rect-3 { width: 180px; height: 180px; background: #FFFBF5; top: 10%; left: 5%; transform: rotate(30deg); border-radius: 20px; animation: float2 8s ease-in-out infinite reverse; }

@keyframes float1 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(5deg); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(25px) rotate(-5deg); } }
@keyframes float3 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } }
@keyframes float4 { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(-20px); } }

/* --- Scroll Indicator --- */
.scroll-dot { animation: scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } }

/* --- Service Cards --- */
.service-card { perspective: 1000px; }
.service-card > div { transform-style: preserve-3d; }

/* --- Reveal Animations (Progressive Enhancement) --- */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }
}
.reveal { opacity: 1; transform: translateY(0); }
.reveal.is-hidden { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }

/* --- Button Focus States --- */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #C0603A; outline-offset: 2px; border-radius: 8px; }

/* --- Responsive --- */
@media (max-width: 767px) {
    .geo-circle-1 { width: 250px; height: 250px; }
    .geo-circle-2 { width: 150px; height: 150px; }
    .geo-rect-1 { width: 100px; height: 100px; }
    .geo-rect-2 { display: none; }
    .geo-tri-1 { display: none; }
    .geo-dots { width: 150px; height: 150px; }
    .geo-circle-4 { width: 300px; height: 300px; }
    .geo-rect-3 { width: 90px; height: 90px; }
}

/* --- Selection --- */
::selection { background: #FAC9AB; color: #472215; }