/* Ora Blu — Cocktail Bar concept
   Direction T3 — Neon Notte (near-black + cyan neon, Space Grotesk) */

:root {
  --bg:      #0a0a0c;
  --bg-2:    #101014;
  --panel:   #15151b;
  --fg:      #f3f5f6;
  --fg-dim:  #9aa0a6;
  --neon:    #35e7e0;
  --neon-2:  #7ef8f3;
  --line:    rgba(255,255,255,0.10);
  --line-neon: rgba(53,231,224,0.38);
  --font: "Space Grotesk", system-ui, sans-serif;
  --glow: 0 0 18px rgba(53,231,224,0.55), 0 0 42px rgba(53,231,224,0.28);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font); font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { display:block; max-width:100%; }
::selection { background:var(--neon); color:#04120f; }

/* ---- type ---- */
.kicker {
  font-size:0.7rem; font-weight:500; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--neon);
}
.display {
  font-weight:600; line-height:1.02; letter-spacing:-0.02em;
  font-size:clamp(2.2rem, 5.4vw, 4rem);
}
.display em { font-style:normal; color:var(--neon); text-shadow:var(--glow); }
.lede { margin-top:1.5rem; font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--fg-dim); max-width:40rem; }

/* ---- nav ---- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.4rem,5vw,4rem);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.solid {
  background:rgba(10,10,12,0.82); backdrop-filter:blur(12px);
  padding-top:0.9rem; padding-bottom:0.9rem; box-shadow:0 1px 0 var(--line);
}
.nav-mark { font-size:1.45rem; font-weight:600; letter-spacing:0.02em; color:var(--fg); text-decoration:none; }
.nav-mark em { font-style:italic; color:var(--neon); }
.nav-links { display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); }
.nav-links a { font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg); text-decoration:none; transition:color .3s; }
.nav-links a:hover { color:var(--neon); }
.nav-cta {
  padding:0.6em 1.4em; border:1px solid var(--neon); border-radius:100px;
  color:var(--neon) !important; box-shadow:var(--glow); transition:background .3s, color .3s;
}
.nav-cta:hover { background:var(--neon); color:#04120f !important; }

/* ---- hero ---- */
.hero { position:relative; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; filter:brightness(0.62) saturate(1.05); }
.hero-veil { position:absolute; inset:0; background:
  radial-gradient(120% 90% at 20% 30%, rgba(53,231,224,0.10), transparent 55%),
  linear-gradient(90deg, rgba(10,10,12,0.9) 0%, rgba(10,10,12,0.55) 45%, rgba(10,10,12,0.25) 75%),
  linear-gradient(rgba(10,10,12,0.2), rgba(10,10,12,0.75)); }
.hero-content { position:relative; z-index:2; padding:0 clamp(1.5rem,6vw,5.5rem); max-width:960px; }
.hero-title { font-weight:600; font-size:clamp(3rem,10vw,7.6rem); line-height:0.96; letter-spacing:-0.03em; margin-top:1rem; }
.hero-title em { font-style:normal; color:var(--neon); text-shadow:var(--glow); }
.hero-sub { margin-top:1.4rem; font-size:clamp(1.05rem,1.8vw,1.35rem); color:var(--fg-dim); max-width:34rem; }
.hero-cta {
  display:inline-block; margin-top:2.4rem; padding:1em 2.5em;
  background:var(--neon); color:#04120f; font-weight:500; font-size:0.8rem;
  letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; border-radius:100px;
  box-shadow:var(--glow); animation:pulse 3.4s ease-in-out infinite; transition:transform .3s;
}
.hero-cta:hover { transform:translateY(-2px); }
.scroll-cue { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem; color:var(--fg-dim);
  font-size:0.58rem; letter-spacing:0.35em; text-transform:uppercase; }
.scroll-cue i { width:1px; height:42px; background:linear-gradient(var(--neon), transparent); }

/* ---- marquee ---- */
.marquee { overflow:hidden; border-top:1px solid var(--line-neon); border-bottom:1px solid var(--line-neon); background:var(--bg-2); padding:1rem 0; }
.marquee-track { display:inline-flex; white-space:nowrap; will-change:transform; animation:slide 26s linear infinite; }
.marquee-track span { font-size:1.35rem; font-weight:500; letter-spacing:0.02em; color:var(--fg); padding:0 1.4rem; }
.marquee-track span::after { content:"◆"; color:var(--neon); margin-left:2.8rem; font-size:0.6rem; vertical-align:middle; text-shadow:var(--glow); }

/* ---- generic section ---- */
.section-head { max-width:1180px; margin:0 auto clamp(2.4rem,5vh,3.6rem); }
.section-head .kicker { display:block; margin-bottom:0.9rem; }

/* ---- storia (split) ---- */
.storia { padding:clamp(4.5rem,11vh,8rem) clamp(1.5rem,6vw,6rem); }
.storia-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); max-width:1180px; margin:0 auto; align-items:center; }
.storia-media { position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); }
.storia-media img { width:100%; height:100%; object-fit:cover; }
.storia-media::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(53,231,224,0.14); pointer-events:none; }

/* ---- stats ---- */
.stats { display:flex; flex-wrap:wrap; gap:2.4rem 3rem; margin-top:2.6rem; }
.stat-num { font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:var(--neon); text-shadow:var(--glow); line-height:1; }
.stat-lab { font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-dim); margin-top:0.5rem; }

/* ---- drinks ---- */
.drinks { padding:clamp(4rem,9vh,7rem) clamp(1.5rem,6vw,6rem); background:var(--bg-2); }
.drink-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); max-width:1120px; margin:0 auto; }
.drink-card { border:1px solid var(--line); border-radius:4px; padding:1.6rem; background:var(--panel); transition:border-color .35s, transform .35s, box-shadow .35s; }
.drink-card:hover { border-color:var(--line-neon); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px var(--line-neon); }
.drink-top { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.drink-name { font-size:1.35rem; font-weight:500; }
.drink-price { font-size:1.05rem; font-weight:600; color:var(--neon); white-space:nowrap; }
.drink-desc { margin-top:0.6rem; font-size:0.92rem; color:var(--fg-dim); }
.drinks-foot { max-width:1120px; margin:clamp(2rem,4vh,3rem) auto 0; text-align:center; font-size:0.74rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--fg-dim); }

/* ---- gallery ---- */
.gallery-sec { padding:clamp(4rem,10vh,8rem) clamp(1.5rem,6vw,6rem); }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; grid-auto-flow:dense; gap:clamp(0.7rem,1.4vw,1.1rem); max-width:1240px; margin:0 auto; }
.gallery figure { position:relative; overflow:hidden; border:1px solid var(--line); }
.gallery img { width:100%; height:100%; object-fit:cover; filter:brightness(0.92) saturate(1.03); transition:transform 1s ease, filter .5s ease; }
.gallery figure:hover img { transform:scale(1.06); filter:brightness(1.05) saturate(1.1); }
.g-tall { grid-row:span 2; }
.g-wide { grid-column:span 2; }

/* ---- orari + map ---- */
.info { padding:clamp(4rem,10vh,8rem) clamp(1.5rem,6vw,6rem); background:var(--bg-2); }
.info-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2.5rem,5vw,5rem); max-width:1180px; margin:0 auto; align-items:start; }
.hours-list { list-style:none; margin-top:1.8rem; border-top:1px solid var(--line); }
.hours-list li { display:flex; justify-content:space-between; padding:0.7rem 0; border-bottom:1px solid var(--line); font-size:0.98rem; }
.hours-list li span:first-child { color:var(--fg-dim); }
.hours-list li.today span { color:var(--neon); }
.hours-list li.closed span:last-child { color:var(--fg-dim); }
.map-frame { border:1px solid var(--line-neon); height:100%; min-height:340px; overflow:hidden; filter:grayscale(0.4) brightness(0.8) contrast(1.05); }
.map-frame iframe { width:100%; height:100%; border:0; display:block; }

/* ---- contatti / CTA ---- */
.cta { padding:clamp(5rem,13vh,9rem) clamp(1.5rem,6vw,6rem); text-align:center; }
.cta-inner { max-width:820px; margin:0 auto; }
.cta-btn { display:inline-flex; align-items:center; gap:0.7rem; margin-top:clamp(2rem,4vh,3rem); padding:1.1em 2.6em; background:var(--neon); color:#04120f; font-weight:600; font-size:0.86rem; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none; border-radius:100px; box-shadow:var(--glow); transition:transform .3s; }
.cta-btn:hover { transform:translateY(-2px); }
.cta-note { margin-top:1.4rem; font-size:1.05rem; color:var(--fg-dim); }
.cta-sub { margin-top:0.5rem; font-size:0.82rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-dim); }
.cta-sub a { color:var(--neon); text-decoration:none; }

/* ---- footer ---- */
.footer { padding:clamp(3rem,7vh,5rem) 1.5rem; text-align:center; border-top:1px solid var(--line); color:var(--fg-dim); font-size:0.88rem; }
.footer-mark { font-size:1.7rem; color:var(--fg); margin-bottom:0.4rem; }
.footer-mark em { font-style:italic; color:var(--neon); }
.footer-demo { margin-top:1.6rem; font-size:0.74rem; color:var(--fg-dim); }
.footer-demo a { color:var(--neon); text-decoration:none; border-bottom:1px solid var(--line); }

/* ---- reveal (hidden only once JS marks .anim-ready → visible by default if JS fails) ---- */
.anim-ready [data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
[data-reveal].in { opacity:1 !important; transform:none !important; }

@keyframes pulse { 0%,100%{ box-shadow:0 0 16px rgba(53,231,224,0.45), 0 0 36px rgba(53,231,224,0.22);} 50%{ box-shadow:0 0 26px rgba(53,231,224,0.75), 0 0 60px rgba(53,231,224,0.4);} }
@keyframes slide { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---- responsive ---- */
@media (max-width:900px){
  .storia-grid{ grid-template-columns:1fr; } .storia-media{ max-height:460px; aspect-ratio:3/2; }
  .info-grid{ grid-template-columns:1fr; } .map-frame{ min-height:280px; }
  .drink-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .nav-links a:not(.nav-cta){ display:none; }
  .drink-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
  .g-wide{ grid-column:span 2; } .g-tall{ grid-row:span 1; }
}
@media (prefers-reduced-motion:reduce){
  .hero-cta{ animation:none; } .marquee-track{ animation:none; }
  .anim-ready [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}