/* ZANELLA LOUNGE — THEME */
:root{
  --bg:#171b1f; --bg-elev:#21262c; --text:#f2f4f6; --muted:#b5bcc3;
  /* panel background with 90% opacity so underlying image peeks through */
  --panel-bg: rgba(33,38,44,.8);
  --accent:#87a77a; --accent-2:#c39a6b; --accent-3:#5fb38c; --line:#2f353b;
  --max:1120px; --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.3);
  --dur-fast:.25s; --dur-med:.6s; --easing:cubic-bezier(.16,1,.3,1);
  /* fallback for older browsers */
  --vh: 1vh;
}
/* Hide scrollbars but allow scrolling */
html{ scrollbar-width:none; -ms-overflow-style:none; }
body::-webkit-scrollbar{ display:none; width:0; height:0; }
*, *::before, *::after { box-sizing: border-box; }
html { height:100%; }
body{ margin:0; min-height:100vh; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text); background:var(--bg); line-height:1.6; letter-spacing:.2px; overflow-x:hidden; }
img{max-width:100%; display:block;} a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--max); margin-inline:auto; padding:0 20px}

.section{padding:64px 0} @media(min-width:768px){ .section{padding:96px 0} }

/* Reduce gap specifically between About and Contact */
#about{ padding-bottom:36px; }
#contact{ padding-top:36px; }
@media(min-width:768px){
  #about{ padding-bottom:56px; }
  #contact{ padding-top:56px; }
}

/* Ambient background + grain */
.ambient{ position:fixed; inset:-20%; z-index:-3; pointer-events:none; filter:blur(40px) saturate(108%); opacity:.85; background:
  radial-gradient(70rem 60rem at 20% 20%, rgba(195,154,107,.16), transparent 60%),
  radial-gradient(80rem 60rem at 80% 80%, rgba(135,167,122,.18), transparent 60%),
  radial-gradient(60rem 50rem at 50% -10%, rgba(255,255,255,.06), transparent 60%);
  animation: drift 28s var(--easing) infinite alternate; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); opacity:.35; animation: grain 12s linear infinite; mix-blend-mode: soft-light; }
@keyframes drift{ 0%{ transform: translate3d(0,0,0) scale(1);} 100%{ transform: translate3d(-3%,2%,0) scale(1.08);} }
@keyframes grain{ 0%{ transform:translate(0,0)} 100%{ transform:translate(-24px,12px)} }

/* Particle canvas behind content */
#particles{ position:fixed; inset:0; z-index:-1; display:block; }

/* UI */
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.chip--green{ border-color: color-mix(in oklab, var(--accent-3) 60%, var(--line)); color: color-mix(in oklab, var(--accent-3) 75%, var(--muted)); background: rgba(95,179,140,.08); }
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow:var(--shadow); transition:transform var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing)}
.btn:hover{ transform:translateY(-2px); border-color:rgba(195,154,107,.6); }
.btn-primary{ background:linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 88%, white 8%), color-mix(in oklab, var(--accent-2) 64%, black 0%)); color:#1b1b1b; border-color:rgba(195,154,107,1)}
.btn-primary:hover{ background:linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 96%, white 4%), color-mix(in oklab, var(--accent-2) 75%, black 0%));}
.btn-green{ background:linear-gradient(180deg, color-mix(in oklab, var(--accent-3) 100%, white 6%), color-mix(in oklab, var(--accent-3) 80%, black 0%)); color:#0f1512; border-color: color-mix(in oklab, var(--accent-3) 90%, black 10%); }
.btn-gold{ background:linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 100%, white 6%), color-mix(in oklab, var(--accent-2) 80%, black 0%)); color:#1b1b1b; border-color: color-mix(in oklab, var(--accent-2) 90%, black 10%); }
.btn-ghost{ background:rgba(255,255,255,.10); color:var(--text) }

.card{background:var(--panel-bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.grid{display:grid; gap:20px}
@media(min-width:768px){ .grid-2{grid-template-columns:repeat(2, minmax(0,1fr));} }

/* Sticky Nav */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:rgba(23,27,31,.6); border-bottom:1px solid var(--line) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 20px }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.brand-mark{ width:28px; height:28px; border-radius:8px; background: conic-gradient(from 180deg, var(--accent-2), var(--accent), var(--accent-2)); box-shadow:0 0 0 2px rgba(0,0,0,.35) inset }
.nav a{ color:var(--muted); font-size:.95rem } .nav a:hover{ color:var(--text) }
.nav-links{ display:flex; gap:1rem }

@media(max-width:768px){
  .nav-inner{ height:56px; padding:0 15px }
  .nav-links{ gap:.75rem }
  .nav a{ font-size:.875rem }
  .brand img{ height:24px !important; padding-right:20px !important }
}

@media(max-width:480px){
  .nav-inner{ height:52px; padding:0 12px }
  .nav-links{ gap:.5rem; flex-wrap:wrap }
  .nav a{ font-size:.8rem }
  .nav-social{ margin-left:8px !important; gap:.4rem !important }
  .brand img{ height:20px !important; padding-right:15px !important }
}

.hero{
  position:relative;
  /* make hero fill the viewport minus the sticky nav (64px) so overlay covers full screen on load */
  min-height: calc( (var(--vh, 1vh) * 100) - 64px );
  display:grid; place-items:center; overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; pointer-events:none;
  /* Force GPU compositing to avoid scroll jitter on mobile */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* single hero slide with a subtle, looping pan & gentle scale */
.slide{
  position:absolute; inset:0; opacity:1; transform:none;
  background-size:cover; background-position:center;
  filter: saturate(.95) contrast(.96) brightness(.92);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  /* animate a slow, subtle pan + micro-zoom to give life without swapping slides */
  animation: hero-pan 20s ease-in-out infinite alternate;
}
@keyframes hero-pan{
  0%   { transform: scale(1.02) translate3d(-3%, -2%, 0); }
  50%  { transform: scale(1.04) translate3d(0%, 0%, 0); }
  100% { transform: scale(1.02) translate3d(3%, 2%, 0); }
}
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(60rem 40rem at 50% 0%, rgba(0,0,0,.22), rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.72) 100%) }
.hero-content{ position:relative; text-align:center; padding: 0 20px; }
.hero h1{ font-size: clamp(2rem, 5vw, 3.6rem); line-height:1.1; margin:0 0 .8rem; }
.hero h1 .accent{ color: var(--accent-3); text-shadow: 0 0 18px rgba(95,179,140,.25); }
.hero p{ color:var(--muted); margin:.5rem auto 1.2rem; max-width:36rem }
.hero-ctas{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

@media(max-width:768px){
  .hero{ min-height: calc( (var(--vh, 1vh) * 100) - 56px ); padding-top:20px }
  .hero-content{ padding:0 15px }
  .hero-logo{ max-width:70% !important; margin-bottom:1rem !important }
  .hero-ctas{ gap:.6rem }
}

@media(max-width:480px){
  .hero{ min-height: calc( (var(--vh, 1vh) * 100) - 52px ); padding-top:15px }
  .hero-content{ padding:0 12px }
  .hero-logo{ max-width:60% !important; margin-bottom:.75rem !important }
  .hero-ctas{ gap:.6rem; flex-direction:column; align-items:center }
  .hero-ctas .btn{ width:100%; max-width:280px; padding:.75rem 1rem; justify-content:center }
}

/* Scroll indicator under hero CTAs: subtle pulsing down arrow */
.scroll-indicator{ display:inline-flex; align-items:center; justify-content:center; margin: 128px auto 0; width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; animation: scroll-pulse 1.6s ease-in-out infinite; }
.scroll-indicator svg{ width:32px; height:32px; display:block }
@keyframes scroll-pulse{ 0%{ transform: translateY(0); opacity:.8 } 50%{ transform: translateY(8px); opacity:.4 } 100%{ transform: translateY(0); opacity:.8 } }
@media (prefers-reduced-motion: reduce){ .scroll-indicator{ animation:none } }

/* Tickets */
.tickets{ position:relative } .tickets .card{ overflow:hidden }
.woodbar{ height:8px; background: linear-gradient(90deg, #a77d48, #c39a6b, #a77d48); opacity:.9 }
.ticket-body{ padding:24px }
.ticket-title{ font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin:0 0 .5rem }
.ticket-sub{ color:var(--muted); margin:0 0 1rem }
.ticket-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
.inline-note{ font-size:.85rem; color:var(--muted) }

/* About */
.about .features{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }
.about p{ margin: .5rem 0 0; color:var(--muted)}

/* Contact */
form{ display:grid; gap:.8rem }
.field{ display:grid; gap:.4rem }
label{ font-size:.95rem; color:var(--muted) }
input, textarea{ width:100%; padding: .9rem 1rem; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); outline:none; transition:border var(--dur-fast) var(--easing) }
input:focus, textarea:focus{ border-color: var(--accent-2) }
textarea{ min-height:120px; resize:vertical }

/* Footer */
footer{ border-top:1px solid var(--line); padding:28px 0; color:var(--muted) }

/* Reveal */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity var(--dur-med) var(--easing), transform var(--dur-med) var(--easing) }
.reveal.visible{ opacity:1; transform:none }

/* Pricing alignment — tabular numbers + fixed price column for consistent alignment */
.pricing-list { display:grid; gap:.6rem; margin-top:.6rem; }
.pricing-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:.6rem; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid var(--line);
}
.pricing-row .meta{ font-size:.95rem; color:var(--muted); max-width:70%; }
.pricing-row .price{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:.4rem;
  min-width:90px; text-align:right;
  /* ensures digits use fixed-width figures so alignment stays consistent */
  font-variant-numeric: tabular-nums;
  white-space:nowrap; /* keep currency on the same line */
}

.pricing-row .price .amount{
  font-size: .92rem; /* slightly smaller than meta (.95rem) */
  font-weight:700;
  letter-spacing:.2px;
}
.pricing-row .price .currency{
  font-size: .72rem; /* small currency label */
  color: var(--muted);
  opacity:.95;
  margin-left:.06rem;
}

@media (prefers-reduced-motion: reduce){ .slide, .reveal, .btn{ transition:none } .ambient, body::before{ animation:none } }

/* Embedded menu animation (used by #embeddedMenu) */
#embedded-menu-wrapper{ overflow:visible; }
#embeddedMenu{ max-height:0; opacity:0; transform:translateY(-6px); transition: max-height .45s var(--easing), opacity .36s var(--easing), transform .36s var(--easing); }
#embeddedMenu.open{ max-height: none; opacity:1; transform:translateY(0); overflow:visible; padding-bottom:24px; }
#embeddedMenu .pricing-list{ margin-top:.6rem }
@media (prefers-reduced-motion: reduce){ #embeddedMenu, #embeddedMenu.open{ transition:none; transform:none; } }

/* Generic embedded panel (used by menu, pricing, etc.) */
.embedded-panel{ max-height:0; opacity:0; transform:translateY(-6px); transition: max-height .5s var(--easing), opacity .36s var(--easing), transform .36s var(--easing); overflow:hidden; }
.embedded-panel.open{ max-height:1200px; opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .embedded-panel, .embedded-panel.open{ transition:none; transform:none; } }

/* Full-bleed Menu Section with background image */
#menuSection{ position:relative; padding:72px 0; }
#menuSection::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(23,27,31,.36), rgba(23,27,31,.6)); z-index:0; }
#menuSection .container{ position:relative; z-index:1; }

#embeddedMenu.card{ background: var(--panel-bg); border:1px solid var(--line); box-shadow: var(--shadow); border-radius:14px; max-width:var(--max); margin:14px auto 0; }
#embeddedMenu.card h3{ color:var(--text); }

/* Make the embedded menu more prominent on small screens - reduce side margin to sit closer to screen */
@media(max-width:640px){
  #menuSection{ padding:48px 0; }
  /* tighter margins/padding so panel sits near the screen edge on mobile */
  #embeddedMenu.card{ margin:8px 8px 0; padding:12px; border-radius:12px; }
}

/* Contact section full-bleed + panel styling (matches menu look) */
#contact{ position:relative; background-image: url('../assets/zanella_image_2.jpg'); background-size:cover; background-position:center; padding:72px 0; }
#contact::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(23,27,31,.28), rgba(23,27,31,.6)); z-index:0; }
#contact .container{ position:relative; z-index:1; }

#contact .card{ background: var(--panel-bg); border:1px solid var(--line); box-shadow: var(--shadow); border-radius:14px; }
#contact .card h3{ color:var(--text); }

@media(max-width:640px){ #contact{ padding:48px 0 } #contact .card{ padding:14px } }

/* Reusable dark background panel for text over photo backgrounds */
.bg-panel{
  display:inline-block;
  background: var(--panel-bg);
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  color:var(--text);
  max-width:100%;
}
.bg-panel h2, .bg-panel h3, .bg-panel p{ margin:0; }

@media(min-width:768px){
  /* on wider screens make the panel a block with limited width */
  .bg-panel{ display:block; max-width:720px; }
}

/* Menu page tweaks */
.menu-page .hero-media{ background-position:center top; filter: saturate(.95) contrast(.94) brightness(.86); }
.menu-page .hero-content h1{ font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom:.25rem; }
.menu-page h2{ font-size:1.15rem; margin:0 0 .6rem; border-bottom:1px solid rgba(255,255,255,.03); padding-bottom:.6rem; }

.menu-page .pricing-list{ gap:.5rem }
.menu-page .pricing-row{
  display:flex; align-items:flex-start; gap:16px;
  padding:.8rem 1rem; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.03);
}
.menu-page .pricing-row .meta{ max-width:78%; }
.menu-page .pricing-row .meta strong{ display:block; font-size:1.02rem; margin-bottom:4px; }
.menu-page .pricing-row .meta div{ color:var(--muted); font-size:.92rem; margin-top:0; }

.menu-page .price{
  min-width:96px; text-align:right; font-weight:700; font-size:1rem;
  font-variant-numeric: tabular-nums; white-space:nowrap;
  color:var(--text);
}

/* add subtle separators for dense lists */
.menu-page .pricing-row + .pricing-row{ border-top:1px solid rgba(255,255,255,.02) }

/* narrow viewport tweaks */
@media(max-width:640px){
  .menu-page .pricing-row{ flex-direction:row; align-items:center; gap:12px; padding:.7rem; }
  .menu-page .pricing-row .meta{ max-width:64%; }
  .menu-page .price{ min-width:72px; font-size:.98rem }
}

/* Collapsible site menu panel (embedded menu) */
.menu-panel{
  position:fixed;
  inset:64px 0 0 0; /* below sticky nav */
  z-index:60;
  max-height:0;
  overflow:hidden;
  background:transparent;
  transition: max-height .42s var(--easing), background .28s var(--easing);
  -webkit-overflow-scrolling: touch;
}
.menu-panel.open{
  max-height:100vh;
  background: linear-gradient(to bottom, rgba(23,27,31,.96), rgba(23,27,31,.98));
}
.menu-panel-inner{
  padding:28px 0 48px;
  background:transparent;
}
.menu-panel .container{ max-width:var(--max); padding:0 20px; }
.menu-panel .panel-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  box-shadow: var(--shadow);
}
.menu-panel .panel-ctas{ display:flex; gap:.6rem; margin-bottom:12px; flex-wrap:wrap; }
.menu-panel .menu-grid{ display:grid; gap:20px }
@media(min-width:768px){ .menu-panel .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* prevent background scroll when open */
body.menu-open{ overflow:hidden; position:fixed; width:100%; }

/* small helper for close button placement */
.menu-panel-close{ display:flex; justify-content:flex-end; margin-bottom:8px; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .menu-panel, .menu-panel.open { transition: none; }
}

/* Premium / Exclusive highlight styling */
:root{ --gold:#c39a6b; --gold-strong: #bd8f4f }
.premium-panel{ background: linear-gradient(180deg, rgba(195,154,107,.20), rgba(195,154,107,.12)); border:1px solid rgba(195,154,107,.34); color: #fff; padding:14px; border-radius:12px; }
.premium-panel{ position:relative; overflow:visible; background: linear-gradient(180deg, rgba(195,154,107,.20), rgba(195,154,107,.12)); border:1px solid rgba(195,154,107,.34); color: #fff; padding:14px; border-radius:12px; }
.premium-panel > :not(.premium-canvas){ position:relative; z-index:1; }
.premium-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:.6rem; border-radius:10px; background: linear-gradient(90deg, rgba(195,154,107,.12), rgba(195,154,107,.06)); border:1px solid rgba(195,154,107,.12); }
.premium-row .meta{ color: #fff; font-weight:600 }
.premium-row .price{ color:#fff; font-weight:800 }
.premium-row .price{ display:flex; align-items:baseline; gap:.4rem; white-space:nowrap }
.premium-row .price .amount{ font-size: .98rem; font-weight:800 }
.premium-row .price .currency{ font-size:.72rem; color: rgba(255,255,255,.85); margin-left:.06rem }
.premium-note{ font-size:.92rem; color: rgba(255,255,255,.9); margin-top:.35rem }

/* spacing between premium rows */
.premium-row + .premium-row{ margin-top:1rem }

/* canvas overlay for premium particle animation */
.premium-canvas{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; display:block; opacity:1 }

/* Three visual variants for pricing rows: gold (opaque gold), silver (opaque silver), gray (minimal) */
.gold-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:.6rem; border-radius:10px;
  position:relative; overflow:hidden; /* allow canvas overlay */
  background: linear-gradient(90deg, rgba(195,154,107,.5), rgba(195,154,107,.45)); border:1px solid rgba(189,143,79,.6);
}
.gold-row .meta{ color:#fff; font-weight:700 }
.gold-row .price{ color:#fff; font-weight:900 }

.silver-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:.6rem; border-radius:10px;
  position:relative; overflow:hidden; /* allow canvas overlay */
  background: linear-gradient(90deg, rgba(230,230,230,.5), rgba(210,210,210,.45)); border:1px solid rgba(200,200,200,.6);
}
.silver-row .meta{ color:#fff; font-weight:700 }
.silver-row .price{ color:#fff; font-weight:800 }

.price-category{ 
  font-size:1rem; 
  color:rgba(255,255,255,.85); 
  margin:.6rem; 
  margin-top: 2rem;
  font-weight:400; }

.gray-row{
  margin-left: .6rem;
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:.5rem 0; border-radius:6px;
  background: transparent; border:none;
}
.gray-row .meta{ color:var(--muted); font-weight:500 }
.gray-row .price{ color:var(--muted); font-weight:600 }

/* per-row overlay canvas for subtle particles */
.row-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; display:block; }
.gold-row > *:not(.row-canvas), .silver-row > *:not(.row-canvas) { position:relative; z-index:1; }