/* ============================================================
   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;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto; } }

/* ---- 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);
  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-child(1){ transition-delay:.12s;} .drawer.open a:nth-child(2){ transition-delay:.18s;}
.drawer.open a:nth-child(3){ transition-delay:.24s;} .drawer.open a:nth-child(4){ transition-delay:.30s;}
.drawer.open a:nth-child(5){ transition-delay:.36s;} .drawer.open a:nth-child(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); }

/* ============================================================
   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); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:linear-gradient(180deg,var(--sea-800),var(--sea-900)); color:var(--celeste-200); position:relative; }
.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; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{ position:fixed; top:0; left:0; z-index:1000; pointer-events:none; mix-blend-mode:normal; }
.cursor__dot{ position:fixed; width:7px; height:7px; border-radius:50%; background:var(--terra); transform:translate(-50%,-50%); transition:width .3s, height .3s, background .3s; }
.cursor__ring{ position:fixed; width:38px; height:38px; border:1.5px solid var(--sea-600); border-radius:50%; transform:translate(-50%,-50%); transition:transform .18s var(--ease), width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
.cursor__ring.hover{ width:64px; height:64px; border-color:var(--terra); background:rgba(184,92,56,.08); }
.cursor__ring.down{ width:28px; height:28px; }
@media (max-width:900px){ .cursor{ display:none; } }

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-veil{
  position:fixed; inset:0; z-index:999; background:var(--sea-900);
  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; }
.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); }