*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--charcoal:#1a1a1a;--amber:#d4853a;--dark-red:#8b2500;--cream:#f5e6d3;--deep-brown:#2a1810;--charcoal-light:#2a2a2a;--charcoal-mid:#333}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;font-weight:300;color:var(--cream);background:var(--charcoal);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Italiana',serif;font-weight:400;line-height:1.2}
a{color:var(--amber);text-decoration:none;transition:color .3s}
a:hover{color:var(--cream)}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Buttons ── */
.btn-primary{display:inline-block;padding:16px 48px;border:1px solid var(--amber);color:var(--amber);font-family:'Jost',sans-serif;font-size:0.9rem;font-weight:500;letter-spacing:3px;text-transform:uppercase;background:transparent;cursor:pointer;transition:all .4s;position:relative;overflow:hidden}
.btn-primary:hover{background:var(--amber);color:var(--charcoal)}
.btn-primary:disabled{opacity:0.3;cursor:not-allowed}
.btn-primary:disabled:hover{background:transparent;color:var(--amber)}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:20px 0;transition:all .4s}
nav.scrolled{background:rgba(26,26,26,0.95);backdrop-filter:blur(10px);padding:12px 0}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.nav-logo{font-family:'Italiana',serif;font-size:1.4rem;color:var(--cream);letter-spacing:2px}
.nav-links{list-style:none;display:flex;gap:32px}
.nav-links a{color:var(--cream);font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;opacity:0.7;transition:opacity .3s}
.nav-links a:hover{opacity:1;color:var(--cream)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;transition:all .3s}

/* ── Fog Canvas ── */
#fog-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;pointer-events:none;opacity:0.4}

/* ── Hero ── */
#hero{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#ember-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;padding:0 24px}
.hero-tagline{font-size:0.85rem;letter-spacing:6px;text-transform:uppercase;color:var(--amber);margin-bottom:16px;opacity:0.8}
#hero h1{font-size:clamp(3rem,8vw,7rem);letter-spacing:4px;margin-bottom:16px;background:linear-gradient(135deg,var(--cream),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(1rem,2.5vw,1.4rem);font-weight:300;letter-spacing:4px;margin-bottom:48px;opacity:0.8}

/* ── Neon Flicker ── */
.neon-flicker{opacity:0;transition:none}
.neon-flicker.neon-on{animation:neonFlickerIn 1.8s forwards}
@keyframes neonFlickerIn{
0%{opacity:0;text-shadow:none}
3%{opacity:0.9;text-shadow:0 0 10px rgba(212,133,58,0.6),0 0 30px rgba(212,133,58,0.3)}
6%{opacity:0.2;text-shadow:none}
9%{opacity:0.85;text-shadow:0 0 10px rgba(212,133,58,0.5),0 0 25px rgba(212,133,58,0.2)}
12%{opacity:0.1;text-shadow:none}
16%{opacity:0;text-shadow:none}
22%{opacity:0.95;text-shadow:0 0 12px rgba(212,133,58,0.7),0 0 35px rgba(212,133,58,0.35)}
24%{opacity:0.4;text-shadow:0 0 4px rgba(212,133,58,0.2)}
28%{opacity:1;text-shadow:0 0 15px rgba(212,133,58,0.8),0 0 40px rgba(212,133,58,0.4),0 0 80px rgba(139,37,0,0.2)}
32%{opacity:0.85;text-shadow:0 0 10px rgba(212,133,58,0.5)}
40%{opacity:1;text-shadow:0 0 15px rgba(212,133,58,0.8),0 0 40px rgba(212,133,58,0.4),0 0 80px rgba(139,37,0,0.2)}
100%{opacity:1;text-shadow:0 0 15px rgba(212,133,58,0.6),0 0 40px rgba(212,133,58,0.3),0 0 80px rgba(139,37,0,0.15)}
}
.neon-flicker.neon-on.neon-idle{animation:neonIdle 4s infinite ease-in-out}
@keyframes neonIdle{
0%,100%{text-shadow:0 0 15px rgba(212,133,58,0.6),0 0 40px rgba(212,133,58,0.3),0 0 80px rgba(139,37,0,0.15)}
50%{text-shadow:0 0 10px rgba(212,133,58,0.4),0 0 25px rgba(212,133,58,0.2),0 0 50px rgba(139,37,0,0.1)}
}

/* ── Firelit Ambiance ── */
.firelit-border{box-shadow:0 0 0 1px rgba(212,133,58,0.15);transition:box-shadow .3s}
.firelit-border.firelit-active{animation:firelitGlow 2s infinite ease-in-out}
@keyframes firelitGlow{
0%,100%{box-shadow:0 0 8px rgba(212,133,58,0.3),0 0 20px rgba(139,37,0,0.15),inset 0 0 8px rgba(212,133,58,0.05)}
25%{box-shadow:0 0 12px rgba(212,133,58,0.45),0 0 30px rgba(139,37,0,0.2),inset 0 0 12px rgba(212,133,58,0.08)}
50%{box-shadow:0 0 6px rgba(212,133,58,0.2),0 0 15px rgba(139,37,0,0.1),inset 0 0 6px rgba(212,133,58,0.03)}
75%{box-shadow:0 0 14px rgba(212,133,58,0.5),0 0 35px rgba(139,37,0,0.25),inset 0 0 14px rgba(212,133,58,0.1)}
}
.firelit-text{transition:text-shadow .3s}
.firelit-text.firelit-active{animation:firelitTextGlow 3s infinite ease-in-out}
@keyframes firelitTextGlow{
0%,100%{text-shadow:0 0 8px rgba(212,133,58,0.5),0 0 20px rgba(139,37,0,0.2)}
33%{text-shadow:0 0 14px rgba(212,133,58,0.7),0 0 30px rgba(139,37,0,0.35)}
66%{text-shadow:0 0 5px rgba(212,133,58,0.3),0 0 12px rgba(139,37,0,0.12)}
}

/* ── Sections ── */
section{padding:120px 0}
.section-title{font-size:clamp(2rem,4vw,3.2rem);text-align:center;margin-bottom:12px;letter-spacing:2px}
.section-subtitle{text-align:center;color:var(--amber);font-size:0.9rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:64px;opacity:0.8}

/* ── About ── */
#about{background:var(--charcoal)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-image{overflow:hidden;border-radius:4px}
.about-img{width:100%;height:100%;min-height:500px;object-fit:cover;border-radius:4px;display:block}
.about-text h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:24px;color:var(--cream)}
.about-text p{margin-bottom:20px;opacity:0.8;font-size:1.05rem}
.counters{display:flex;gap:48px;margin-top:40px}
.counter{text-align:center}
.counter-num{display:block;font-family:'Italiana',serif;font-size:2.8rem;color:var(--amber)}
.counter-label{font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;opacity:0.6}

/* ── Cocktails ── */
#cocktails{background:var(--charcoal-light)}
.cocktail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cocktail-card{position:relative;overflow:hidden;border-radius:4px;cursor:pointer;aspect-ratio:3/4}
.cocktail-card .cocktail-image{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;transition:transform .6s}
.cocktail-card:hover .cocktail-image{transform:scale(1.05)}
.cocktail-info{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,rgba(26,26,26,0.9));z-index:2}
.cocktail-info h3{font-size:1.3rem;margin-bottom:4px}
.cocktail-price{color:var(--amber);font-size:0.9rem}
.cocktail-price::before{content:"\00A3"}
.cocktail-overlay{position:absolute;inset:0;background:rgba(139,37,0,0.92);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px;text-align:center;opacity:0;transition:opacity .4s;z-index:3}
.cocktail-overlay h3{font-size:1.5rem;margin-bottom:16px;color:var(--cream)}
.cocktail-overlay p{font-size:0.95rem;opacity:0.9;line-height:1.8}
.cocktail-card:hover .cocktail-overlay{opacity:1}

/* ── Cocktail Mixer ── */
#mixer{background:var(--deep-brown);position:relative;overflow:hidden}
#mixer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
#mixer::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.mixer-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.mixer-heading{font-size:0.75rem;letter-spacing:4px;text-transform:uppercase;color:var(--amber);margin:24px 0 12px;opacity:0.7}
.mixer-heading:first-child{margin-top:0}
.ingredient-group{display:flex;flex-wrap:wrap;gap:8px}
.ingredient-btn{padding:10px 18px;border:1px solid var(--charcoal-mid);background:var(--charcoal);color:var(--cream);font-family:'Jost',sans-serif;font-size:0.8rem;letter-spacing:1px;cursor:pointer;transition:all .3s;border-radius:2px}
.ingredient-btn:hover{border-color:var(--amber);color:var(--amber)}
.ingredient-btn.selected{border-color:var(--amber);background:rgba(212,133,58,0.15);color:var(--amber);box-shadow:0 0 12px rgba(212,133,58,0.2)}

.mixer-display{display:flex;flex-direction:column;align-items:center;gap:24px}
.shaker-area{position:relative;width:160px;height:320px;margin:0 auto}
.shaker{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center}
.shaker-cap{width:50px;height:40px;background:linear-gradient(180deg,#777,#555,#666);border-radius:4px 4px 0 0;position:relative;z-index:2}
.shaker-cap::after{content:'';position:absolute;bottom:-2px;left:-10px;right:-10px;height:8px;background:linear-gradient(180deg,#888,#555);border-radius:2px}
.shaker-body{width:90px;height:200px;background:linear-gradient(135deg,#555 0%,#888 30%,#666 50%,#444 100%);border-radius:2px;position:relative;overflow:hidden;z-index:1}
.shaker-liquid{position:absolute;bottom:0;left:4px;right:4px;height:0;border-radius:0 0 2px 2px;transition:height 0.6s ease,background-color 0.6s ease;background:rgba(212,133,58,0.6)}
.shaker-bubbles{position:absolute;inset:4px;pointer-events:none;overflow:hidden}
.shaker-base{width:70px;height:20px;background:linear-gradient(180deg,#666,#444,#555);border-radius:0 0 6px 6px}

.shaker.shaking{animation:shakerShake 0.12s infinite alternate}
@keyframes shakerShake{
0%{transform:translate(-3px,-2px) rotate(-2deg)}
100%{transform:translate(3px,2px) rotate(2deg)}
}
.shaker.pouring{animation:shakerPour 1.5s forwards ease-in-out}
@keyframes shakerPour{
0%{transform:rotate(0deg) translateY(0)}
30%{transform:rotate(-45deg) translateY(-20px)}
70%{transform:rotate(-45deg) translateY(-20px)}
100%{transform:rotate(0deg) translateY(0)}
}

.shaker-flame{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:100px;height:60px;opacity:0;transition:opacity .5s}
.shaker-flame.active{opacity:1;animation:flameFlicker 0.15s infinite alternate}
@keyframes flameFlicker{
0%{filter:brightness(1);transform:translateX(-50%) scaleY(1)}
100%{filter:brightness(1.2);transform:translateX(-50%) scaleY(1.08)}
}

.mixer-selected{text-align:center;min-height:40px}
.mixer-prompt{color:var(--cream);opacity:0.4;font-size:0.9rem;font-style:italic}
.mixer-selected .ingredient-tag{display:inline-block;padding:4px 12px;margin:4px;background:rgba(212,133,58,0.1);border:1px solid rgba(212,133,58,0.3);color:var(--amber);font-size:0.75rem;letter-spacing:1px;border-radius:2px}
.mixer-actions{display:flex;gap:16px}
.btn-shake,.btn-reset{padding:14px 36px;font-size:0.8rem}
.mixer-result{text-align:center;min-height:60px}
.mixer-result h3{font-family:'Italiana',serif;font-size:1.6rem;color:var(--amber);margin-bottom:8px}
.mixer-result p{font-size:0.9rem;opacity:0.7;line-height:1.6}

/* ── Menu ── */
#menu{background:var(--charcoal)}
.menu-accordion{max-width:700px;margin:0 auto}
.menu-category{border-bottom:1px solid var(--charcoal-mid);overflow:hidden}
.menu-toggle{width:100%;background:none;border:none;color:var(--cream);font-family:'Italiana',serif;font-size:1.3rem;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:color .3s;letter-spacing:1px}
.menu-toggle:hover{color:var(--amber)}
.toggle-icon{font-family:'Jost',sans-serif;font-size:1.5rem;color:var(--amber);transition:transform .3s}
.menu-category.open .toggle-icon{transform:rotate(45deg)}
.menu-items{max-height:0;overflow:hidden;transition:max-height .5s ease}
.menu-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:0.95rem;opacity:0.8}
.menu-item span:last-child{color:var(--amber)}
.menu-item span:last-child::before{content:"\00A3"}

/* ── Events ── */
#events{background:var(--charcoal-light)}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.event-card{background:var(--charcoal);border-radius:4px;overflow:hidden;transition:transform .4s}
.event-card:hover{transform:translateY(-8px)}
.event-card .event-image{width:100%;height:220px;object-fit:cover;display:block}
.event-body{padding:28px}
.event-date{font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;color:var(--amber)}
.event-body h3{font-size:1.4rem;margin:8px 0 12px}
.event-body p{font-size:0.9rem;opacity:0.7;line-height:1.8}

/* ── Gallery ── */
#gallery{background:var(--charcoal)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:250px}
.gallery-item{overflow:hidden;border-radius:4px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-wide{grid-column:span 2}

/* ── Reservations ── */
#reservations{background:var(--charcoal-light)}
.reservation-wrapper{max-width:700px;margin:0 auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.form-group{display:flex;flex-direction:column}
.form-group.full-width{margin-bottom:24px}
label{font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;color:var(--amber)}
input,select,textarea{background:var(--charcoal);border:1px solid var(--charcoal-mid);color:var(--cream);font-family:'Jost',sans-serif;font-size:1rem;padding:14px 16px;border-radius:2px;transition:border-color .3s;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4853a' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea{resize:vertical}
.btn-submit{width:100%;margin-top:8px;font-size:1rem}
.form-success{text-align:center;padding:48px 0}
.form-success h3{font-size:1.8rem;color:var(--amber);margin-bottom:12px}
.hidden{display:none}

/* ── Footer ── */
footer{background:var(--charcoal);border-top:1px solid var(--charcoal-mid);padding:80px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{font-size:1.6rem;color:var(--cream);margin-bottom:12px}
footer h4{font-size:0.8rem;letter-spacing:3px;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
footer p{font-size:0.9rem;opacity:0.6;margin-bottom:4px}
.social-links{display:flex;flex-direction:column;gap:8px}
.social-links a{font-size:0.9rem;opacity:0.6}
.social-links a:hover{opacity:1}
.footer-bottom{text-align:center;padding-top:32px;border-top:1px solid var(--charcoal-mid)}
.footer-bottom p{font-size:0.8rem;opacity:0.4}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.visible .neon-flicker{/* neon handles its own opacity */}

/* ── Responsive ── */
@media(max-width:1024px){
.cocktail-grid{grid-template-columns:repeat(2,1fr)}
.events-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
.gallery-wide{grid-column:span 2}
.mixer-layout{grid-template-columns:1fr}
}

@media(max-width:768px){
.nav-links{position:fixed;top:0;right:-100%;width:70%;height:100vh;background:var(--charcoal);flex-direction:column;justify-content:center;align-items:center;gap:24px;transition:right .4s}
.nav-links.open{right:0}
.nav-toggle{display:block;z-index:1001}
.about-grid{grid-template-columns:1fr;gap:40px}
.about-image{order:-1}
.about-img{min-height:300px}
.cocktail-grid{grid-template-columns:1fr}
.events-grid{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.counters{gap:24px}
.counter-num{font-size:2rem}
.footer-grid{grid-template-columns:1fr;gap:32px}
.gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
.gallery-wide{grid-column:span 1}
section{padding:80px 0}
.mixer-layout{grid-template-columns:1fr}
.shaker-area{width:120px;height:240px}
.shaker-body{width:70px;height:150px}
.shaker-cap{width:40px;height:30px}
.shaker-base{width:55px;height:16px}
}