/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }

/* ─── Grain Overlay ─── */
.grain-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
}

/* ─── Gold Line ─── */
.gold-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #d4880e, #f5d68a);
    border-radius: 2px;
    flex-shrink: 0;
}

.gold-line-inline {
    display: inline-block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4880e, transparent);
    border-radius: 2px;
}

/* ─── Navbar ─── */
#navbar {
    background: transparent;
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
#navbar.scrolled {
    background: rgba(22, 22, 31, 0.85);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(212, 136, 14, 0.1);
}

.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #d4880e, #f5d68a);
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ─── Mobile Menu ─── */
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.closed { opacity: 0; pointer-events: none; }
.mobile-link { transition: opacity 0.3s ease; }
.mobile-link:hover { opacity: 0.7; }

.menu-line { transition: all 0.3s ease; }
#menu-toggle.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menu-toggle.active .menu-line:nth-child(2) { opacity: 0; }
#menu-toggle.active .menu-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); width: 24px; }

/* ─── Hero ─── */
.hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(147, 24, 64, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(184, 110, 9, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 70% 40% at 50% 50%, rgba(74, 14, 28, 0.8) 0%, transparent 70%),
        linear-gradient(160deg, #1a0a10 0%, #2a1020 30%, #1a0f0a 60%, #0d0808 100%);
}

.hero-blob {
    animation: blob-float 8s ease-in-out infinite;
}
.hero-blob-1 { animation-delay: 0s; }
.hero-blob-2 { animation-delay: -3s; }
.hero-blob-3 { animation-delay: -5s; }

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

.gold-particle {
    animation: particle-float 6s ease-in-out infinite;
}
@keyframes particle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-20px) scale(1.3); opacity: 0.8; }
}

/* ─── Scroll Line ─── */
.animate-scroll-line {
    animation: scroll-line-anim 2s ease-in-out infinite;
}
@keyframes scroll-line-anim {
    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* ─── Hero Badge ─── */
.hero-badge {
    animation: badge-in 0.8s ease-out both;
}
@keyframes badge-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Content ─── */
.hero-content {
    animation: hero-in 1s ease-out 0.2s both;
}
@keyframes hero-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Reveal Animations ─── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ─── Visit Section Gradient ─── */
.visit-gradient {
    background:
        radial-gradient(ellipse 60% 50% at 0% 50%, rgba(147, 24, 64, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 50%, rgba(184, 110, 9, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, #16161f 0%, #1e1018 50%, #16161f 100%);
}

/* ─── Product Card Hover ─── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #16161f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4880e, #93520c); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f5d68a, #d4880e); }

/* ─── Selection ─── */
::selection { background: rgba(184, 110, 9, 0.3); color: #f5d68a; }

/* ─── Focus ─── */
:focus-visible { outline: 2px solid #d4880e; outline-offset: 2px; }

/* ─── Input autofill ─── */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #1e1e2e inset !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}