/* ────────────────────────────────────────────────────────────
   girasole_rosso — Fiordipizza Rufina (EXPLORE prototype v2)
   Palette derivata dal loro brand REALE (logo girasole + tricolore):
   rosso pomodoro · giallo girasole · verde basilico · nero forno · crema.
   Art direction: foto vere trattate, motif girasole, motion (ken-burns,
   marquee, spin, hover-zoom). Caldo, da trattoria, appetitoso — non "Wix".
   ──────────────────────────────────────────────────────────── */

:root {
  --cream:     oklch(0.965 0.018 88);
  --cream-2:   oklch(0.935 0.026 82);
  --ink:       oklch(0.235 0.020 55);
  --ink-2:     oklch(0.400 0.025 50);
  --mute:      oklch(0.520 0.022 52);

  --tomato:    oklch(0.560 0.195 28);   /* rosso pomodoro — accento primario */
  --tomato-br: oklch(0.620 0.205 30);
  --tomato-ink:oklch(0.470 0.175 28);   /* tomato leggibile come testo su crema */
  --sun:       oklch(0.800 0.150 80);   /* giallo girasole — secondario */
  --sun-deep:  oklch(0.720 0.150 74);
  --basil:     oklch(0.520 0.110 145);  /* verde basilico — terziario, sparso */
  --terra:     oklch(0.620 0.115 48);   /* terracotta (loro pareti) */
  --char:      oklch(0.205 0.018 50);   /* nero forno — sezioni scure/footer */
  --char-2:    oklch(0.270 0.020 52);

  --line:      color-mix(in oklab, var(--ink) 13%, transparent);
  --line-2:    color-mix(in oklab, var(--ink) 24%, transparent);
  --line-lt:   color-mix(in oklab, var(--cream) 18%, transparent);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --radius: 6px;
  --shell: 1200px; --narrow: 740px;
  --pad: clamp(1.25rem, 4vw, 3.25rem);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-0.015em; margin:0; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); transition:color .18s,border-color .18s,background-color .18s; }
a:hover{ color:var(--tomato-ink); border-color:var(--tomato); }
a:focus-visible,button:focus-visible{ outline:2px solid var(--tomato); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--tomato); color:var(--cream); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:var(--cream); padding:.5rem 1rem; z-index:300; border:0; }
.skip:focus{ left:1rem; top:1rem; }

.ico{ width:1em; height:1em; display:inline-block; vertical-align:-0.12em; }
.ico--sun{ color:var(--sun-deep); width:1.05em; height:1.05em; }

/* ─── Buttons ─── */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:1rem; padding:.85rem 1.4rem; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; line-height:1; transition:background-color .18s,color .18s,border-color .18s,transform .18s; }
.btn--sm{ padding:.55rem .95rem; font-size:.92rem; }
.btn--tomato{ background:var(--tomato); color:var(--cream); border-color:var(--tomato); }
.btn--tomato:hover{ background:var(--tomato-br); border-color:var(--tomato-br); color:var(--cream); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--cream-2); color:var(--ink); }
.btn--ghost-light{ background:transparent; color:var(--cream); border-color:color-mix(in oklab,var(--cream) 55%,transparent); }
.btn--ghost-light:hover{ background:color-mix(in oklab,var(--cream) 14%,transparent); color:var(--cream); border-color:var(--cream); }
.cta{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

/* ─── Topbar ─── */
.bar{ position:sticky; top:0; z-index:100; background:color-mix(in oklab,var(--cream) 90%,transparent); backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line); }
.bar__in{ max-width:var(--shell); margin:0 auto; padding:.6rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.bar__brand{ border:0; display:flex; align-items:center; }
.bar__brand img{ height:42px; width:auto; }
.bar__nav{ display:flex; gap:1.6rem; }
.bar__nav a{ border:0; font-size:.96rem; font-weight:500; color:var(--ink-2); }
.bar__nav a:hover{ color:var(--tomato-ink); }
.bar__end{ display:flex; align-items:center; gap:var(--s2); }
.bar__tel{ border:0; font-weight:700; font-size:.96rem; white-space:nowrap; color:var(--ink); }
.bar__tel:hover{ color:var(--tomato-ink); }
.burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1.5px solid var(--line-2); border-radius:var(--radius); }
.burger span{ width:20px; height:2px; background:var(--ink); transition:transform .2s,opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav{ display:none; flex-direction:column; padding:var(--s2) var(--pad) var(--s3); border-bottom:1px solid var(--line); background:var(--cream); position:sticky; top:55px; z-index:99; }
.mnav a{ border:0; padding:.7rem 0; font-size:1.15rem; font-family:var(--serif); font-weight:500; border-bottom:1px solid var(--line); }
.mnav__cta{ margin-top:var(--s2); color:var(--tomato-ink); font-weight:600; }

/* ─── Ticker / marquee ─── */
.ticker{ background:var(--char); color:var(--cream); overflow:hidden; border-bottom:3px solid var(--tomato); }
.ticker__track{ display:flex; align-items:center; gap:1.4rem; white-space:nowrap; width:max-content; padding:.7rem 0; animation:marquee 32s linear infinite; }
.ticker__track span{ font-family:var(--serif); font-style:italic; font-size:1.05rem; letter-spacing:.01em; }
.ticker .ico{ color:var(--sun); width:1.2em; height:1.2em; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ─── Hero ─── */
.hero{ position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; filter:saturate(1.1) contrast(1.05) brightness(.86); animation:kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.hero__scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(to top, color-mix(in oklab,var(--char) 94%,transparent) 0%, color-mix(in oklab,var(--char) 74%,transparent) 28%, color-mix(in oklab,var(--char) 38%,transparent) 50%, transparent 70%),
  linear-gradient(to right, color-mix(in oklab,var(--char) 88%,transparent) 0%, color-mix(in oklab,var(--char) 48%,transparent) 40%, transparent 72%); }
.hero__body{ position:relative; z-index:2; max-width:var(--shell); margin:0 auto; width:100%; padding:var(--s5) var(--pad) var(--s5); color:var(--cream); }
.hero__eyebrow{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--sun); margin-bottom:var(--s3); text-shadow:0 1px 10px color-mix(in oklab,var(--char) 82%,transparent); }
.hero__title{ font-size:clamp(2.8rem,1.8rem+5.2vw,5.4rem); font-weight:600; line-height:.98; letter-spacing:-0.022em; color:var(--cream); text-shadow:0 2px 30px color-mix(in oklab,var(--char) 50%,transparent); }
.u-script{ font-style:italic; font-weight:500; color:var(--sun); }
.hero__lede{ max-width:46ch; margin:var(--s3) 0 var(--s4); font-size:1.15rem; color:color-mix(in oklab,var(--cream) 94%,transparent); text-shadow:0 1px 12px color-mix(in oklab,var(--char) 72%,transparent); }
.hero__open{ display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--s4); font-size:.95rem; color:color-mix(in oklab,var(--cream) 88%,transparent); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--mute); display:inline-block; }
.dot.is-open{ background:var(--sun); box-shadow:0 0 0 4px color-mix(in oklab,var(--sun) 26%,transparent); }
.dot.is-closed{ background:var(--tomato-br); }

/* ─── Intro ─── */
.intro{ position:relative; max-width:var(--narrow); margin:0 auto; padding:var(--s4) var(--pad) var(--s2); }
.intro p{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,1.05rem+1.5vw,2rem); line-height:1.36; }
.intro strong{ font-weight:600; color:var(--tomato-ink); }
.intro__sun{ position:absolute; top:calc(50% - 34px); right:-64px; width:68px; height:68px; color:var(--sun); opacity:.85; }
@media (max-width:1024px){ .intro__sun{ display:none; } }
.spin{ animation:spin 44s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ─── Section scaffold ─── */
.sec{ max-width:var(--shell); margin:0 auto; padding:var(--s6) var(--pad); }
.sec--alt{ max-width:none; background:var(--cream-2); }
.sec--alt>*{ max-width:var(--shell); margin-inline:auto; }
.sec__head{ max-width:54ch; margin-bottom:var(--s4); }
.kick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--tomato-ink); margin-bottom:var(--s2); }
.kick--light{ color:var(--sun); }
.sec h2{ font-size:clamp(1.9rem,1.3rem+2.4vw,3rem); }
.sec__intro{ color:var(--ink-2); margin-top:var(--s2); font-size:1.08rem; }

/* ─── Menu ─── */
.menu{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.menu__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.menu__row h3{ font-size:1.42rem; font-weight:600; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.menu__row p{ color:var(--ink-2); margin-top:.35rem; max-width:58ch; }
.menu__row a{ border:0; color:var(--tomato-ink); font-weight:600; }
.menu__price{ font-family:var(--serif); font-style:italic; color:var(--mute); white-space:nowrap; font-size:1.1rem; }
.menu__row--mark{ background:linear-gradient(90deg,color-mix(in oklab,var(--sun) 22%,transparent),transparent 70%); margin-inline:calc(-1*var(--s2)); padding-inline:var(--s2); border-radius:var(--radius); border-bottom-color:transparent; }
.tag{ font-family:var(--sans); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--cream); background:var(--tomato); padding:.22rem .55rem; border-radius:4px; }
.allergeni{ margin-top:var(--s4); font-size:.92rem; color:var(--mute); max-width:70ch; }
.allergeni strong{ color:var(--ink-2); }

/* ─── Gallery "Dal forno" ─── */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.shot{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); background:var(--char); aspect-ratio:4/3; }
.shot img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.05); transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.shot:hover img{ transform:scale(1.06); }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .8rem; color:var(--cream); font-size:.9rem; font-weight:600; background:linear-gradient(transparent,color-mix(in oklab,var(--char) 80%,transparent)); }
.shot--tall{ grid-row:span 2; aspect-ratio:3/4; }
.shot--wide{ grid-column:1 / -1; aspect-ratio:21/9; }
.grid__note{ margin-top:var(--s3); color:var(--mute); font-size:.92rem; max-width:60ch; }

/* ─── Le farine (firma, dark) ─── */
.farine{ background:var(--char); color:var(--cream); position:relative; }
.farine__in{ max-width:var(--shell); margin:0 auto; padding:var(--s7) var(--pad); display:grid; gap:var(--s5); }
.farine h2{ color:var(--cream); font-size:clamp(2.2rem,1.5rem+3vw,3.6rem); }
.farine p{ color:color-mix(in oklab,var(--cream) 84%,transparent); margin-top:var(--s2); max-width:54ch; font-size:1.12rem; }
.farine strong{ color:var(--sun); font-weight:600; }
.steps{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:0; max-width:56ch; }
.steps li{ padding:var(--s3) 0; border-top:1px solid var(--line-lt); color:color-mix(in oklab,var(--cream) 82%,transparent); display:flex; gap:1rem; align-items:baseline; }
.steps span{ font-family:var(--serif); font-style:italic; color:var(--sun); font-size:1.2rem; min-width:2.2rem; }
.farine__deco{ position:relative; display:grid; place-items:center; min-height:320px; }
.farine__sun{ width:min(56vw,290px); height:min(56vw,290px); color:var(--sun); filter:drop-shadow(0 0 30px color-mix(in oklab,var(--sun) 30%,transparent)); }

/* ─── Recensioni ─── */
.quotes{ display:grid; gap:var(--s4); grid-template-columns:1fr; }
.quote{ margin:0; padding:var(--s3) 0; border-top:2px solid var(--tomato); }
.quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1rem+1.2vw,1.7rem); line-height:1.38; }
.quote cite{ display:block; margin-top:var(--s2); font-style:normal; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.rec-foot{ margin-top:var(--s4); color:var(--mute); font-size:.92rem; }

/* ─── Orari & dove ─── */
.orari{ display:grid; gap:var(--s4); }
.hours{ border-collapse:collapse; width:100%; max-width:420px; }
.hours th,.hours td{ text-align:left; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:1.06rem; }
.hours th{ font-weight:700; }
.hours td{ color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.addr{ font-style:normal; margin:var(--s3) 0; color:var(--ink-2); line-height:1.7; }
.addr a{ border:0; color:var(--ink); font-weight:500; }
.addr a:hover{ color:var(--tomato-ink); }
.orari__map{ border-radius:var(--radius); overflow:hidden; min-height:320px; border:1px solid var(--line); }
.orari__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; filter:saturate(.95); }

/* ─── Footer ─── */
.foot{ background:var(--char); color:color-mix(in oklab,var(--cream) 80%,transparent); }
.foot__in{ max-width:var(--shell); margin:0 auto; padding:var(--s6) var(--pad) var(--s4); display:grid; gap:var(--s4); grid-template-columns:1fr; }
.foot__brand{ display:flex; flex-direction:column; gap:.5rem; }
.foot__sun{ color:var(--sun); width:38px; height:38px; }
.foot__name{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--cream); }
.foot__brand p{ font-size:.92rem; color:color-mix(in oklab,var(--cream) 64%,transparent); max-width:34ch; }
.foot__col h3{ font-family:var(--sans); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sun-deep); font-weight:700; margin-bottom:var(--s2); }
.foot__col p{ font-size:.95rem; color:color-mix(in oklab,var(--cream) 78%,transparent); line-height:1.75; }
.foot a{ color:color-mix(in oklab,var(--cream) 80%,transparent); border-bottom-color:var(--line-lt); }
.foot a:hover{ color:var(--sun); border-color:var(--sun); }
.foot__credit{ max-width:var(--shell); margin:0 auto; padding:var(--s3) var(--pad); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; border-top:1px solid var(--line-lt); font-size:.82rem; color:color-mix(in oklab,var(--cream) 58%,transparent); }
.foot__credit code{ font-family:ui-monospace,Menlo,monospace; color:var(--sun-deep); }

/* ─── Motion: reveal ─── */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  .ticker__track,.spin,.hero__img{ animation:none!important; }
}

/* ─── Responsive ─── */
@media (min-width:720px){
  .quotes{ grid-template-columns:1fr 1fr; gap:var(--s5); }
  .orari{ grid-template-columns:1fr 1fr; align-items:stretch; gap:var(--s5); }
  .foot__in{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .farine__in{ grid-template-columns:1.1fr .9fr; align-items:center; }
}
@media (min-width:960px){
  .grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
  .shot--tall{ grid-row:span 2; }
  .shot--wide{ grid-column:span 2; aspect-ratio:auto; }
}
@media (max-width:860px){
  .bar__nav{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:520px){
  .bar__tel{ display:none; }
  .cta .btn{ width:100%; justify-content:center; }
  .grid{ grid-template-columns:1fr; }
  .shot--tall{ aspect-ratio:4/3; grid-row:auto; }
}