/* ============================================================
   SCIABECCO — Ristorante · Pizzeria · Imperia
   Shared stylesheet · mediterranean / marinaro
   ============================================================ */

/* ---- Fonts loaded via <link> in each page head for speed ---- */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }

/* ---- Tokens ---- */
:root{
  /* sea / celeste */
  --sea-900:#0c3a4e;
  --sea-800:#114a61;
  --sea-700:#155f7c;
  --sea-600:#1d7497;
  --sea-500:#2b89a9;
  --sea-400:#5aa7c0;
  --celeste:#bfe0ea;
  --celeste-200:#dceef3;
  --celeste-50:#eef7fa;
  /* warm */
  --sand:#f7f2e8;
  --sand-2:#efe6d4;
  --cream:#fbf8f1;
  --terra:#b85c38;
  --terra-soft:#c9714b;
  --gold:#c9a44c;
  /* ink */
  --ink:#15252b;
  --ink-soft:#3c5057;
  --line:rgba(18,60,78,.16);

  --font-script:"Pinyon Script", cursive;
  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-ui:"Marcellus", "Times New Roman", serif;

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 18px 50px -28px rgba(12,58,78,.55);
  --shadow-lift:0 30px 80px -40px rgba(12,58,78,.7);
}

body{
  font-family:var(--font-serif);
  color:var(--ink);
  background:var(--cream);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
}

/* ---- Type ---- */
.script{ font-family:var(--font-script); font-weight:400; line-height:1; }
.eyebrow{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.72rem;
  color:var(--sea-600);
  display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow.light{ color:var(--celeste); }
.eyebrow::before, .eyebrow.center::after{
  content:""; width:34px; height:1px; background:currentColor; opacity:.6;
}
.eyebrow.solo::before{ display:none; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:600; line-height:1.04; letter-spacing:-.01em; }
.display{ font-size:clamp(2.6rem,6vw,5.2rem); font-weight:600; }
.h-script{ font-family:var(--font-script); font-weight:400; letter-spacing:0; }

p{ text-wrap:pretty; }
.lead{ font-size:1.28rem; color:var(--ink-soft); }

/* ---- Layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,56px); }
.section{ padding-block:clamp(64px,10vw,120px); position:relative; }
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px clamp(20px,5vw,56px);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.nav.solid{
  background:rgba(251,248,241,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line), 0 14px 40px -30px rgba(12,58,78,.6);
  padding-block:12px;
}
.nav__brand{ display:flex; align-items:center; gap:13px; z-index:2; }
.nav__brand img{ width:46px; height:46px; transition:transform .6s var(--ease), filter .5s; }
.nav__brand:hover img{ transform:rotate(-8deg) scale(1.05); }
.nav__brand-txt{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-txt b{ font-family:var(--font-ui); font-size:1.18rem; letter-spacing:.16em; font-weight:400; }
.nav__brand-txt span{ font-family:var(--font-ui); font-size:.56rem; letter-spacing:.4em; text-transform:uppercase; opacity:.7; margin-top:4px; }

/* logo color states */
.nav .logo-dark{ display:none; }
.nav .logo-cream{ display:block; }
.nav.solid .logo-dark{ display:block; }
.nav.solid .logo-cream{ display:none; }
.nav__brand img.swap{ position:absolute; }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  font-family:var(--font-ui); font-size:.95rem; letter-spacing:.04em;
  color:var(--cream); padding:9px 15px; border-radius:999px; position:relative;
  transition:color .4s var(--ease);
}
.nav.solid .nav__links a{ color:var(--ink); }
.nav__links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:1.5px;
  background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--terra); }
.nav.solid .nav__links a[aria-current="page"]{ color:var(--terra); }

.nav__cta{
  font-family:var(--font-ui); font-size:.9rem; letter-spacing:.06em;
  padding:11px 22px; border-radius:999px;
  border:1.5px solid currentColor; color:var(--cream);
  transition:background .4s var(--ease), color .4s var(--ease), transform .3s var(--ease);
}
.nav.solid .nav__cta{ color:var(--sea-700); background:var(--sea-700); color:#fff; border-color:var(--sea-700); }
.nav__cta:hover{ background:var(--terra); border-color:var(--terra); color:#fff; transform:translateY(-2px); }

.nav__burger{ display:none; width:46px; height:46px; border-radius:50%; align-items:center; justify-content:center; z-index:2; }
.nav__burger span{ position:relative; width:22px; height:1.6px; background:var(--cream); transition:.3s; }
.nav.solid .nav__burger span{ background:var(--ink); }
.nav__burger span::before, .nav__burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.6px; background:inherit; transition:.3s var(--ease); }
.nav__burger span::before{ top:-7px; } .nav__burger span::after{ top:7px; }

@media (max-width:980px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:95; background:var(--sea-800) url("../assets/bg-sea-dark-mobile.jpg") center / cover;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  clip-path:circle(0% at calc(100% - 44px) 44px); transition:clip-path .6s var(--ease);
  pointer-events:none;
}
.drawer.open{ clip-path:circle(150% at calc(100% - 44px) 44px); pointer-events:auto; }
.drawer a{ font-family:var(--font-serif); font-size:2.1rem; color:var(--cream); padding:8px 0; opacity:0; transform:translateY(16px); transition:.5s var(--ease); }
.drawer.open a{ opacity:1; transform:none; }
.drawer.open a:nth-of-type(1){ transition-delay:.12s;} .drawer.open a:nth-of-type(2){ transition-delay:.18s;}
.drawer.open a:nth-of-type(3){ transition-delay:.24s;} .drawer.open a:nth-of-type(4){ transition-delay:.30s;}
.drawer.open a:nth-of-type(5){ transition-delay:.36s;} .drawer.open a:nth-of-type(6){ transition-delay:.42s;}
.drawer .script{ color:var(--celeste); font-size:2.6rem; }
.drawer__close{ position:absolute; top:30px; right:34px; color:var(--cream); font-size:2rem; font-family:var(--font-ui); z-index:1; }
/* looping video background for the mobile menu */
.drawer__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(.58) saturate(1.05); pointer-events:none; }
.drawer .script, .drawer a{ position:relative; z-index:1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-ui); font-size:1rem; letter-spacing:.05em;
  padding:15px 30px; border-radius:999px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn svg{ width:17px; height:17px; }
.btn--primary{ background:var(--terra); color:#fff; box-shadow:0 14px 30px -16px var(--terra); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -18px var(--terra); }
.btn--sea{ background:var(--sea-700); color:#fff; }
.btn--sea:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -20px var(--sea-700); }
.btn--ghost{ border:1.5px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-3px); border-color:var(--ink); }
.btn--light{ border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--sea-800); transform:translateY(-3px); }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ============================================================
   WAVES (footer / dividers)
   ============================================================ */
.wave-divider{ display:block; width:100%; height:auto; }
.sea-band{ background:linear-gradient(170deg,var(--sea-800),var(--sea-900)); color:var(--cream); }

/* reserve / CTA band with image background (shared by home, pizze…) */
.reserve{ position:relative; overflow:hidden; }
.reserve__bg{ position:absolute; inset:0; }
.reserve__bg img{ width:100%; height:100%; object-fit:cover; transform:translateY(var(--py,0)); }
.reserve__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(11,58,78,.94),rgba(11,58,78,.7)); }
.reserve__inner{ position:relative; z-index:2; text-align:center; color:#fff; max-width:680px; margin-inline:auto; }
.reserve__hours{ display:inline-flex; gap:10px; align-items:center; font-family:var(--font-ui); letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; color:var(--celeste); margin-bottom:26px; }
.reserve__cta{ display:flex; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--sea-900) url("../assets/bg-compass.png") center center / cover no-repeat; color:var(--celeste-200); position:relative; }
@media (max-width:900px){ .footer{ background-image:url("../assets/bg-compass-mobile.jpg"); } }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-block:72px 56px; }
.footer__brand img{ width:74px; margin-bottom:18px; }
.footer__brand p{ color:var(--celeste); max-width:34ch; }
.footer h4{ font-family:var(--font-ui); font-weight:400; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color:#fff; margin-bottom:20px; }
.footer__col a, .footer__col li{ color:var(--celeste-200); padding-block:6px; display:block; transition:color .3s, transform .3s var(--ease); }
.footer__col a:hover{ color:#fff; transform:translateX(5px); }
.footer__social{ display:flex; gap:12px; margin-top:8px; }
.footer__social a{ width:42px; height:42px; border:1px solid rgba(255,255,255,.24); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.footer__social a:hover{ background:var(--terra); border-color:var(--terra); transform:translateY(-4px); }
.footer__social svg{ width:18px; height:18px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.14); padding-block:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--font-ui); font-size:.78rem; letter-spacing:.05em; color:var(--sea-400); }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; gap:36px; } .footer__brand{ grid-column:1/-1; } }
@media (max-width:540px){ .footer__top{ grid-template-columns:1fr; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); will-change:transform,opacity; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-rv="left"]{ transform:translateX(-44px); } .reveal[data-rv="left"].in{ transform:none; }
.reveal[data-rv="right"]{ transform:translateX(44px); } .reveal[data-rv="right"].in{ transform:none; }
.reveal[data-rv="scale"]{ transform:scale(.92); } .reveal[data-rv="scale"].in{ transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s;} .reveal[data-d="2"]{ transition-delay:.2s;}
.reveal[data-d="3"]{ transition-delay:.3s;} .reveal[data-d="4"]{ transition-delay:.4s;}
.reveal[data-d="5"]{ transition-delay:.5s;} .reveal[data-d="6"]{ transition-delay:.6s;}
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; } }

/* line-by-line title reveal */
.rise{ display:block; overflow:hidden; }
.rise > *{ display:block; transform:translateY(105%); transition:transform 1.1s var(--ease); }
.rise.in > *{ transform:none; }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-veil{
  position:fixed; inset:0; z-index:999; background:var(--sea-900) url("../assets/bg-sea-dark.png") center / cover;
  display:flex; align-items:center; justify-content:center;
  transform:translateY(0); pointer-events:none;
}
.page-veil img{ width:96px; opacity:.0; animation:veilLogo 1.1s var(--ease) forwards; }
@media (max-width:900px){ .page-veil{ background-image:url("../assets/bg-sea-dark-mobile.jpg"); } }
.page-veil.lift{ animation:veilUp 1.05s var(--ease) forwards; }
.page-veil.drop{ animation:veilDown .9s var(--ease) forwards; }
@keyframes veilUp{ to{ transform:translateY(-100%);} }
@keyframes veilDown{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes veilLogo{ 0%{opacity:0; transform:translateY(10px) scale(.9);} 40%{opacity:1; transform:none;} 100%{opacity:0;} }

/* generic image hover frame */
.frame{ position:relative; overflow:hidden; border-radius:4px; background:var(--sea-700); }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.frame:hover img{ transform:scale(1.06); }

/* placeholder slot */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--celeste-200), var(--celeste-200) 11px, var(--celeste-50) 11px, var(--celeste-50) 22px);
  display:flex; align-items:center; justify-content:center; color:var(--sea-600);
  font-family:"Courier New", monospace; font-size:.78rem; letter-spacing:.12em; text-align:center; padding:18px;
  border:1px solid var(--line);
}

/* selection */
::selection{ background:var(--terra); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--celeste-50); }
::-webkit-scrollbar-thumb{ background:var(--sea-500); border-radius:10px; border:3px solid var(--celeste-50); }

/* floating WhatsApp button (bottom-left, all pages) */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#fff;
  box-shadow:0 12px 28px -8px rgba(18,140,70,.6), 0 4px 10px -5px rgba(0,0,0,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; will-change:transform;
}
.wa-fab.wa-grab{ cursor:grabbing; box-shadow:0 22px 44px -10px rgba(18,140,70,.7), 0 8px 18px -6px rgba(0,0,0,.45); }
.wa-fab.wa-grab::before{ animation:none; }
.wa-fab img, .wa-fab svg{ pointer-events:none; }
.wa-fab::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:waPulse 2.6s var(--ease) infinite;
}
.wa-fab svg{ width:34px; height:34px; position:relative; }
.wa-fab:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 18px 34px -10px rgba(18,140,70,.7), 0 6px 14px -6px rgba(0,0,0,.4); }
@keyframes waPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@media (max-width:760px){ .wa-fab{ right:16px; bottom:16px; width:54px; height:54px; } .wa-fab svg{ width:31px; height:31px; } }
@media (prefers-reduced-motion: reduce){ .wa-fab::before{ animation:none; } }

/* ---------- Cookie consent + map gating + footer legal ---------- */
.cookie-bar{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,160%); width:min(720px,calc(100% - 28px)); z-index:130; background:#0c3a4e; color:var(--cream); border-radius:14px; box-shadow:0 24px 60px -18px rgba(8,40,54,.7); padding:16px 20px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; transition:transform .5s var(--ease); }
.cookie-bar.show{ transform:translate(-50%,0); }
.cookie-bar p{ margin:0; font-size:.92rem; color:#e6f1f5; flex:1 1 320px; line-height:1.5; }
.cookie-bar a{ color:var(--celeste); text-decoration:underline; }
.cookie-bar__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-bar button{ font-family:var(--font-ui); font-size:.82rem; letter-spacing:.04em; padding:10px 18px; border-radius:999px; cursor:pointer; border:1px solid rgba(191,224,234,.4); background:transparent; color:var(--cream); transition:.3s var(--ease); }
.cookie-bar__yes{ background:var(--terra); border-color:var(--terra); color:#fff; }
.cookie-bar__yes:hover{ background:var(--terra-soft); }
.cookie-bar__no:hover{ background:rgba(255,255,255,.1); }
@media (max-width:600px){ .cookie-bar{ bottom:0; left:0; transform:translateY(160%); width:100%; border-radius:14px 14px 0 0; } .cookie-bar.show{ transform:translateY(0); } }
.mapwrap{ position:relative; }
.map-consent{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; background:var(--celeste-50); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--sea-700); font-family:var(--font-serif); font-size:1.12rem; }
.map-consent__btn{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; background:var(--sea-700); color:#fff; padding:11px 22px; border-radius:999px; }
.footer-legal a{ color:inherit; text-decoration:underline; }