/* ═══════════════════════════════════════════════════════════
   Cestello Firenze — Shared Styles
   cestello-shared.css
   Caricato da tutte le pagine; gli stili pagina-specifici
   vanno nell'<style> inline (caricato dopo, hanno priorità).
═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --dark:      #000;
  --dark-deep: #000000f7;
  --cream:     #efe3c9;
  --gold:      #d8be86;

  /* ── Tema per vanilla-cookieconsent (github.com/orestbida/cookieconsent) ── */
  --cc-font-family: 'Montserrat', sans-serif;
  --cc-bg: #0c0c0e;
  --cc-text: rgba(239,227,201,0.82);
  --cc-secondary-color: rgba(239,227,201,0.55);
  --cc-cookie-category-block-bg: #141416;
  --cc-cookie-category-block-border: rgba(216,190,134,0.18);
  --cc-cookie-category-block-hover-bg: #1a1a1d;
  --cc-cookie-category-expanded-block-bg: #141416;
  --cc-separator-border-color: rgba(216,190,134,0.16);
  --cc-overlay-bg: rgba(4,6,12,0.75);
  --cc-btn-primary-bg: var(--gold);
  --cc-btn-primary-color: #1a1408;
  --cc-btn-primary-hover-bg: var(--cream);
  --cc-btn-primary-hover-color: #1a1408;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: rgba(239,227,201,0.82);
  --cc-btn-secondary-border-color: rgba(216,190,134,0.35);
  --cc-btn-secondary-hover-bg: rgba(216,190,134,0.10);
  --cc-btn-secondary-hover-color: var(--cream);
  --cc-toggle-on-bg: var(--gold);
  --cc-toggle-off-bg: rgba(239,227,201,0.18);
  --cc-toggle-on-knob-bg: #1a1408;
  --cc-toggle-off-knob-bg: var(--cream);
  --cc-toggle-readonly-bg: rgba(216,190,134,0.35);
  --cc-toggle-readonly-knob-bg: rgba(239,227,201,0.7);
  --cc-btn-border-radius: 2px;
  --cc-modal-border-radius: 4px;
  --cc-z-index: 100010;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html, body {
  width: 100%;
  background: var(--dark);
  color: var(--cream);
  font-family: 'Montserrat', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Titoli h1 in maiuscolo ── */
h1 { text-transform: uppercase; }

/* ── Page transition ── */
#pt {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #07070a; z-index: 99998;
  pointer-events: none; transform: translateY(100%);
}
.pt-in #pt { transform: translateY(0%); }

/* ── Topbar ─────────────────────────────────────────────
   Il background è impostato da ogni pagina nell'<style>
   inline (statico o con effetto scroll).
──────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 26px 40px;
  z-index: 20; font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(239,227,201,0.85);
}
.topbar .mark { justify-self: start; display: block; line-height: 0; text-decoration: none; }
.topbar .mark img { height: 32px; width: auto; display: block; }
.topbar nav { display: flex; gap: 30px; justify-self: center; align-items: center; }
.topbar nav a { color: inherit; text-decoration: none; transition: color .3s; }
.topbar nav a:hover { color: var(--gold); }
/* Stato scrolled (usato da intro/ristorante/bar) */
.topbar.scrolled { background: rgba(8,16,28,0.92) !important; backdrop-filter: blur(12px); }
.lang { justify-self: end; display: flex; gap: 10px; align-items: center; }
.lang a { color: rgba(239,227,201,0.55); text-decoration: none; transition: color .3s; }
.lang a.active, .lang a:hover { color: var(--cream); }
.lang .sep { opacity: .4; }

/* ── Mobile: CTA Prenota primary nell'header, al posto del selettore lingua ── */
/* Selettore rinforzato (tag + 2 classi) cosi' resta sempre piu' specifico di
   .btn-entra (display: inline-block), qualunque sia l'ordine nel foglio di
   stile: evita che il bottone Prenota resti visibile anche su desktop,
   duplicando quello gia' presente nel menu di navigazione. */
.topbar a.btn-entra.topbar-prenota { display: none; }

/* ── Hamburger ── */
.hamburger {
  display: none; position: fixed; top: 18px; right: 20px; z-index: 55;
  flex-direction: column; justify-content: center; gap: 6px;
  cursor: pointer; padding: 6px; background: none; border: none;
}
.hamburger span {
  display: block; width: 24px; height: 1.5px; background: var(--cream);
  transition: transform .45s cubic-bezier(.77,0,.175,1), opacity .3s, width .3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Mobile overlay ── */
.mobile-overlay {
  position: fixed; inset: 0; background: #1a1a1a; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 86px 20px 32px;
  pointer-events: none; opacity: 0; transition: opacity .4s;
}
.mobile-overlay.open { opacity: 1; pointer-events: all; }
.mobile-overlay .m-logo {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity .4s ease .05s;
}
.mobile-overlay.open .m-logo { opacity: 1; }
.mobile-overlay .m-logo img { height: 32px; width: auto; }
.mobile-overlay nav {
  display: flex; flex-direction: column; align-items: center;
  gap: 21px; margin-bottom: 40px;
}
.mobile-overlay nav a {
  font-family: 'Montserrat', sans-serif; font-weight: 500; font-style: normal;
  font-size: 27px; line-height: 1.15; letter-spacing: 0.02em; color: var(--cream); text-decoration: none;
  opacity: 0; transform: translateY(22px);
  transition: opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1), color .25s;
}
.mobile-overlay nav a:hover { color: var(--gold); }
.mobile-overlay nav a:nth-child(1) { transition-delay: .10s; }
.mobile-overlay nav a:nth-child(2) { transition-delay: .18s; }
.mobile-overlay nav a:nth-child(3) { transition-delay: .26s; }
.mobile-overlay nav a:nth-child(4) { transition-delay: .34s; }
.mobile-overlay nav a:nth-child(5) { transition-delay: .42s; }
.mobile-overlay.open nav a { opacity: 1; transform: translateY(0); }
.mobile-overlay .m-rule {
  width: 40px; height: 1px; background: var(--gold);
  opacity: 0; margin-bottom: 20px; transition: opacity .3s;
}
.mobile-overlay.open .m-rule { opacity: 0.4; transition-delay: .50s; }
.mobile-overlay .m-lang {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(239,227,201,0.55);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.mobile-overlay.open .m-lang { opacity: 1; transform: translateY(0); transition-delay: .56s; }
.mobile-overlay .m-lang a { color: rgba(239,227,201,0.55); text-decoration: none; transition: color .25s; }
.mobile-overlay .m-lang a.active, .mobile-overlay .m-lang a:hover { color: var(--cream); }
.mobile-overlay .m-lang .sep { opacity: .4; }

/* ── Nav: voce Prenota (stile btn-entra) ── */
.topbar nav a.nav-prenota {
  position: relative;
  overflow: hidden;
  padding: 8px 22px;
  color: rgba(239,227,201,0.65);
  text-decoration: none;
  transition: color .3s;
  /* reset hover dal selettore generico */
}
.topbar nav a.nav-prenota:hover { color: rgba(239,227,201,0.95); }
.topbar nav a.nav-prenota span { position: absolute; display: block; }
.topbar nav a.nav-prenota span:nth-child(1) {
  top: 0; left: -100%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,227,201,0.75));
  animation: entra-top 2s linear infinite;
}
.topbar nav a.nav-prenota span:nth-child(2) {
  top: -100%; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(239,227,201,0.75));
  animation: entra-right 2s linear infinite; animation-delay: .5s;
}
.topbar nav a.nav-prenota span:nth-child(3) {
  bottom: 0; right: -100%; width: 100%; height: 1px;
  background: linear-gradient(270deg, transparent, rgba(239,227,201,0.75));
  animation: entra-bottom 2s linear infinite; animation-delay: 1s;
}
.topbar nav a.nav-prenota span:nth-child(4) {
  bottom: -100%; left: 0; width: 1px; height: 100%;
  background: linear-gradient(0deg, transparent, rgba(239,227,201,0.75));
  animation: entra-left 2s linear infinite; animation-delay: 1.5s;
}

/* Mobile: stessa UI ma adattata alla font grande */
.mobile-overlay nav a.nav-prenota {
  position: relative;
  overflow: hidden;
  padding: 8px 32px;
  color: var(--gold) !important;
}
.mobile-overlay nav a.nav-prenota span { position: absolute; display: block; }
.mobile-overlay nav a.nav-prenota span:nth-child(1) {
  top: 0; left: -100%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,190,134,0.70));
  animation: entra-top 2s linear infinite;
}
.mobile-overlay nav a.nav-prenota span:nth-child(2) {
  top: -100%; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(216,190,134,0.70));
  animation: entra-right 2s linear infinite; animation-delay: .5s;
}
.mobile-overlay nav a.nav-prenota span:nth-child(3) {
  bottom: 0; right: -100%; width: 100%; height: 1px;
  background: linear-gradient(270deg, transparent, rgba(216,190,134,0.70));
  animation: entra-bottom 2s linear infinite; animation-delay: 1s;
}
.mobile-overlay nav a.nav-prenota span:nth-child(4) {
  bottom: -100%; left: 0; width: 1px; height: 100%;
  background: linear-gradient(0deg, transparent, rgba(216,190,134,0.70));
  animation: entra-left 2s linear infinite; animation-delay: 1.5s;
}

/* ── btn-entra (bordo animato) ── */
@keyframes entra-top    { 0%{left:-100%}  100%{left:100%}   }
@keyframes entra-right  { 0%{top:-100%}   100%{top:100%}    }
@keyframes entra-bottom { 0%{right:-100%} 100%{right:100%}  }
@keyframes entra-left   { 0%{bottom:-100%}100%{bottom:100%} }

.btn-entra {
  position: relative; display: inline-block;
  margin-top: 24px; padding: 15px 40px;
  background: #000;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  overflow: hidden; transition: color .3s;
}
.btn-entra:hover { color: rgba(239,227,201,0.95); }
.btn-entra span { position: absolute; display: block; }
.btn-entra span:nth-child(1) {
  top: 0; left: -100%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,227,201,0.75));
  animation: entra-top 2s linear infinite;
}
.btn-entra span:nth-child(2) {
  top: -100%; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(239,227,201,0.75));
  animation: entra-right 2s linear infinite; animation-delay: .5s;
}
.btn-entra span:nth-child(3) {
  bottom: 0; right: -100%; width: 100%; height: 1px;
  background: linear-gradient(270deg, transparent, rgba(239,227,201,0.75));
  animation: entra-bottom 2s linear infinite; animation-delay: 1s;
}
.btn-entra span:nth-child(4) {
  bottom: -100%; left: 0; width: 1px; height: 100%;
  background: linear-gradient(0deg, transparent, rgba(239,227,201,0.75));
  animation: entra-left 2s linear infinite; animation-delay: 1.5s;
}

/* ── Site footer ── */
.site-footer {
  background: var(--dark-deep); padding: 64px 60px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; border-top: 1px solid rgba(239,227,201,0.08);
}
.site-footer img { height: 36px; opacity: 0.8; }
.site-footer .footer-info {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(239,227,201,0.45); line-height: 2.2;
}

/* ── Animazioni comuni ── */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .topbar { padding: 18px 20px; grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .lang { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
  .hamburger { display: flex; }
  .site-footer { padding: 48px 28px; flex-direction: column; align-items: center; text-align: center; }
  .btn-entra { background: #000; border-radius: 2px; }

  /* Pagine con menu hamburger (fallback per la lingua): la CTA Prenota
     primary prende il posto del selettore lingua nell'header mobile. */
  .topbar--book .lang { display: none; }
  .topbar--book a.btn-entra.topbar-prenota {
    display: inline-block;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    margin-top: 0; padding: 9px 22px; font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Microinterazioni
═══════════════════════════════════════════════════════════ */

/* ── 1 · Cursore custom (solo pointer fine, attivato da JS) ── */
html.cc-on, html.cc-on * { cursor: none !important; }
.cc-dot, .cc-ring {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; z-index: 100020; opacity: 0;
}
.cc-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--gold); }
.cc-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(216,190,134,0.55);
  transition: width .35s, height .35s, margin .35s, border-color .35s, opacity .35s;
}
.cc-ring.cc-link {
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-color: rgba(216,190,134,0.9);
}
html.cc-hide .cc-dot, html.cc-hide .cc-ring { opacity: 0 !important; }

/* Mobile viewport: never show the custom cursor, even if the device reports a fine pointer
   (e.g. a touchscreen laptop, or a desktop browser simply resized narrow). */
@media (max-width: 720px) {
  html.cc-on, html.cc-on * { cursor: auto !important; }
  .cc-dot, .cc-ring { display: none !important; }
}

/* ── 2 · Bollicine al click ── */
.bubble {
  position: fixed; border: 1px solid rgba(216,190,134,0.75); border-radius: 50%;
  pointer-events: none; z-index: 10005; opacity: 0;
  animation: bubble-rise 1.15s ease-out forwards;
}
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translate(0,0) scale(.4); }
  15%  { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--bx, 0px), -72px) scale(1); }
}

/* ── 4 · Underline nav che si disegna ── */
.topbar nav a:not(.nav-prenota) { position: relative; }
.topbar nav a:not(.nav-prenota)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s cubic-bezier(.76,0,.24,1);
}
.topbar nav a:not(.nav-prenota):hover::after {
  transform: scaleX(1); transform-origin: left center;
}

/* ── 6 · Hover btn-entra: letter-spacing + linee più vive ── */
.btn-entra {
  transition: color .3s, letter-spacing .55s cubic-bezier(.2,.7,.2,1);
}
.btn-entra:hover { letter-spacing: 0.46em; }
.btn-entra span { transition: filter .3s; }
.btn-entra:hover span { filter: brightness(1.8); }
.topbar nav a.nav-prenota {
  transition: color .3s, letter-spacing .55s cubic-bezier(.2,.7,.2,1);
}
.topbar nav a.nav-prenota:hover { letter-spacing: 0.40em; }
.topbar nav a.nav-prenota span { transition: filter .3s; }
.topbar nav a.nav-prenota:hover span { filter: brightness(1.8); }

/* ── 7 · Pesciolino che attraversa i link testuali ── */
.cta-menu, .contact-block .value a { position: relative; }
.cta-menu::after, .contact-block .value a::after {
  content: ''; position: absolute; left: -12%; bottom: -3px;
  width: 15px; height: 6px; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M4,12 L0,4 L8,10 C14,4 30,2 44,8 C50,10 54,11.5 58,12 C54,12.5 50,14 44,16 C30,22 14,20 8,14 L0,20 Z' fill='%23d8be86'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cta-menu:hover::after, .contact-block .value a:hover::after {
  animation: fish-cross 1.15s ease-in-out both;
}
@keyframes fish-cross {
  0%   { left: -12%; opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { left: 104%; opacity: 0; }
}

/* ── 8 · Reveal titoli hero parola per parola (span creati da JS) ── */
.hero h1 .w-rev {
  display: inline-block; opacity: 0;
  transform: translateY(26px) rotate(1.5deg);
  animation: word-up .85s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes word-up {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ── 10 · Logo hover ── */
.topbar .mark img { transition: filter .4s; }
.topbar .mark:hover img { filter: brightness(1.35); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }

/* ── Titolo hero (regola centralizzata) ── */
.hero h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 500; font-style: normal;
  font-size: clamp(34px, 6vw, 80px); line-height: 1.08;
  letter-spacing: 0.02em; color: var(--cream); margin-bottom: 18px;
  text-transform: uppercase;
}

/* ── Instagram link (topbar + menu mobile) ── */
.ig-link { display: inline-flex; align-items: center; justify-content: center; color: var(--cream); opacity: 0.82; margin-right: 16px; transition: color .25s, opacity .25s; }
.ig-link:hover { color: var(--gold); opacity: 1; }
.ig-link svg { width: 18px; height: 18px; display: block; }
.mobile-overlay .m-lang .ig-link { margin: 0 14px 0 0; }
.mobile-overlay .m-lang .ig-link svg { width: 22px; height: 22px; }

/* ── Indirizzo in fondo al menu mobile ── */
.mobile-overlay .m-address {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(239,227,201,0.5); margin-top: 24px; text-align: center;
}

/* ── Footer legale (Privacy/Cookie/P.IVA) ──────────────────
   Desktop: barra fissa e trasparente in fondo alla pagina.
   Mobile: stessa info, in piccolo, in fondo al menu hamburger. ── */
.legal-bar {
  display: none;
}
@media (min-width: 721px) {
  .legal-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
    padding: 12px 20px;
    background: transparent; pointer-events: none;
    font-family: 'Montserrat', sans-serif; font-size: 9px;
    letter-spacing: 0.14em; color: rgba(239,227,201,0.32);
  }
  .legal-bar a, .legal-bar button {
    pointer-events: auto; color: inherit; text-decoration: none;
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; letter-spacing: inherit;
    border-bottom: 1px solid transparent;
    transition: color .25s, border-color .25s;
  }
  .legal-bar a:hover, .legal-bar button:hover { color: rgba(239,227,201,0.85); border-color: rgba(239,227,201,0.4); }
  .legal-bar .legal-sep { opacity: 0.5; }
}

.mobile-overlay .m-legal {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 8.5px;
  letter-spacing: 0.10em; color: rgba(239,227,201,0.35);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.mobile-overlay.open .m-legal { opacity: 1; transform: translateY(0); transition-delay: .62s; }
.mobile-overlay .m-legal a, .mobile-overlay .m-legal button {
  color: inherit; text-decoration: none; background: none; border: none;
  padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit;
  border-bottom: 1px solid transparent; transition: color .25s;
}
.mobile-overlay .m-legal a:hover, .mobile-overlay .m-legal button:hover { color: rgba(239,227,201,0.7); }
.mobile-overlay .m-legal .legal-sep { opacity: 0.5; }

/* ── Link legali dentro il site-footer esistente (privacy/cookie policy) ── */
.site-footer .footer-info a, .site-footer .footer-info button {
  color: inherit; text-decoration: none; background: none; border: none;
  padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit;
  border-bottom: 1px solid rgba(239,227,201,0.22);
  transition: color .25s, border-color .25s;
}
.site-footer .footer-info a:hover, .site-footer .footer-info button:hover {
  color: var(--cream); border-color: var(--cream);
}