/* ============================================
   LibertyX Bitcoin ATM — Custom Styles
   ============================================ */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #3b0711;
}
::-webkit-scrollbar-thumb {
    background: #9c1c37;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b92645;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background: rgba(212, 63, 97, 0.3);
    color: #fff;
}

/* ============================================
   Reveal Animations (progressive enhancement)
   Only applied when JS is active + prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up {
        opacity: 1;
        transform: none;
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* When JS is blocked or prefers-reduced-motion, content is already visible */
.reveal-up {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Mobile Menu Transitions
   ============================================ */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    opacity: 0;
}

#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* ============================================
   Navbar scroll state
   ============================================ */
.navbar-scrolled #navbar {
    background: rgba(59, 7, 17, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Button ripple effect
   ============================================ */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   Image lazy-load placeholder
   ============================================ */
img {
    background: linear-gradient(135deg, #3b0711 0%, #6c1930 100%);
}

/* ============================================
   Focus styles for accessibility
   ============================================ */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #ff8a74;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================
   Mobile menu link hover
   ============================================ */
.mobile-link {
    position: relative;
}

.mobile-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #b92645, #ff5c40);
    transition: width 0.3s ease;
}

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

/* ============================================
   Map container responsive
   ============================================ */
#location iframe {
    border-radius: 0 0 16px 16px;
}

/* ============================================
   Hero text shadow for contrast
   ============================================ */
.hero-gradient-text {
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Subtle card hover glow
   ============================================ */
.group:hover .group-hover\:shadow-burgundy-500\/30 {
    box-shadow: 0 20px 60px -15px rgba(185, 38, 69, 0.25);
}

/* ============================================
   Print styles
   ============================================ */
@media print {
    nav, #mobile-menu, .reveal-up { display: none !important; }
    body { background: white !important; color: black !important; }
    section { padding: 20px 0 !important; }
}