/* ===== Custom Styles for Broad St. and Main ===== */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0c;
}

::-webkit-scrollbar-thumb {
    background: #2e2e38;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d4a843;
}

/* ===== Hero Gradient ===== */
.hero-gradient {
    background: radial-gradient(ellipse at 30% 50%, 
        rgba(161, 21, 51, 0.4) 0%, 
        rgba(61, 6, 19, 0.6) 40%, 
        rgba(10, 10, 12, 0.95) 70%,
        #0a0a0c 100%);
}

/* ===== Hero Orbs Animation ===== */
.hero-orb {
    animation: float 8s ease-in-out infinite;
}

.orb-burgundy {
    background: radial-gradient(circle, rgba(161, 21, 51, 0.5) 0%, transparent 70%);
    animation-delay: 0s;
}

.orb-blush {
    background: radial-gradient(circle, rgba(255, 77, 115, 0.4) 0%, transparent 70%);
    animation-delay: -3s;
}

.orb-gold {
    background: radial-gradient(circle, rgba(212, 168, 67, 0.3) 0%, transparent 70%);
    animation-delay: -5s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

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

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

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

.nav-link:hover {
    color: #e8c46a !important;
}

/* Navbar scroll state */
.navbar-scrolled {
    background: rgba(10, 10, 12, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 168, 67, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ===== Mobile Menu ===== */
.mobile-menu-open {
    opacity: 1 !important;
    pointer-events: all !important;
}

.mobile-link {
    position: relative;
}

.mobile-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: #d4a843;
    transition: width 0.3s ease;
}

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

/* Menu button active state */
.menu-btn-active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn-active .menu-line:nth-child(2) {
    opacity: 0;
}

.menu-btn-active .menu-line:nth-child(3) {
    width: 1.25rem;
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== Reveal Animations ===== */
.reveal-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion - ensure content is always visible */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}

/* ===== Gold shimmer on hover for cards ===== */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

/* ===== Button hover glow ===== */
button:hover,
a:hover {
    box-shadow: 0 0 30px rgba(212, 168, 67, 0.15);
}

/* ===== Input focus glow ===== */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 1px rgba(212, 168, 67, 0.2);
}

/* ===== Image hover overlay ===== */
.group:hover .group-hover\:opacity-90 {
    opacity: 0.95;
}

/* ===== Decorative gold line animations ===== */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ===== Responsive adjustments ===== */
@media (max-width: 768px) {
    .hero-gradient {
        background: radial-gradient(ellipse at 50% 50%, 
            rgba(161, 21, 51, 0.5) 0%, 
            rgba(61, 6, 19, 0.7) 50%, 
            rgba(10, 10, 12, 0.98) 80%,
            #0a0a0c 100%);
    }
}

/* ===== Selection color ===== */
::selection {
    background: rgba(212, 168, 67, 0.3);
    color: #fff;
}