/* ==========================================================================
   cèlan - home.css
   Foglio indipendente per index.html (home). Non collegato a pizzerie.css:
   ogni token e ogni classe condivisa e' ricopiata identica da pizzerie.css
   per restare fedele al design system del sito. Sezioni originali per la
   home: hero, #scegli (card double-bezel), variante scura di statement e
   cliente-uno.
   ========================================================================== */

/* ---------- Reset (identico a pizzerie.css) ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
input,button{font-size:inherit;}

/* ---------- Tokens (identici a pizzerie.css) ---------- */
:root{
  --bg:        #E9E9E9;
  --bg-hero:   #E2DFDA;
  --surface-fallback: #cfcdc8;
  --ink:       #111110;
  --muted:     #6F6D68;
  --muted-tx:  #676560;
  --accent:    #F0563C;
  --accent-strong: #CC3D20;
  --on-accent-strong: #ffffff;
  --accent-text:   #B03621;
  --dark:      #141312;
  --card:      #FCFBFA;
  --line:      rgba(17,17,16,0.14);
  --line-inv:  rgba(252,251,250,0.16);

  --radius:      28px;
  --radius-pill: 999px;
  --radius-ui:   10px;

  --ease:        cubic-bezier(.32,.72,0,1);
  --ease-reveal: cubic-bezier(.16,1,.3,1);

  --tablet-bezel: clamp(10px, 1.6vw, 20px);
  --tablet-radius: clamp(16px, 2.4vw, 28px);
  --wrap-pad: clamp(20px, 4vw, 56px);

  --fs-display:    clamp(56px, 9.5vw, 148px);
  --fs-display-sm: clamp(40px, 6vw, 80px);
  --fs-statement:  clamp(24px, 3vw, 40px);

  --section-pad: clamp(72px, 10vw, 136px);
  --nav-h: 72px;
}

/* ---------- Layout (identico a pizzerie.css) ---------- */
.wrap{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 56px);
}
.display-wrap{
  max-width:1472px;
  margin-inline:auto;
  padding-inline:16px;
}
section{ position:relative; }
.section-pad{ padding-block:var(--section-pad); }
.section-dark{ background:var(--dark); color:var(--card); }

/* ---------- Display type (identico a pizzerie.css) ---------- */
.display{
  font-family:'Anton',sans-serif;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-0.02em;
  font-size:var(--fs-display);
  color:var(--ink);
  font-weight:400;
}
.display-on-dark{ color:var(--card); }

.line-mask{
  display:block;
  overflow:hidden;
  padding-top:.09em;
  margin-top:-.09em;
}
.line-inner{
  display:block;
  will-change:transform;
}
html.js .line-inner{
  transform:translateY(105%);
  transition:transform .9s var(--ease-reveal);
  transition-delay:calc(var(--i,0) * 90ms);
}
html.js .line-inner.is-visible{
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  html.js .line-inner{ transform:none; transition:none; }
}

/* ---------- Fade-up reveal (identico a pizzerie.css) ---------- */
html.js .fade-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
  transition-delay:calc(var(--i,0) * 60ms);
  will-change:transform,opacity;
}
html.js .fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  html.js .fade-up{ opacity:1; transform:none; transition:none; }
}

/* ---------- Bottoni: pill piena (identica a pizzerie.css) ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--accent-strong);
  color:#fff;
  font:600 18px/1.2 'Archivo',sans-serif;
  padding:10px 10px 10px 28px;
  border-radius:var(--radius-pill);
  border:none;
  text-decoration:none;
  cursor:pointer;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
  white-space:nowrap;
}
.pill:hover{ opacity:.88; transform:translateY(-2px); }
.pill:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.pill--block{ width:100%; white-space:normal; }
/* Le due pill "Per il tuo locale" / "Per la tua sagra" (hero e card) hanno
   la stessa larghezza: testo a sinistra, freccia sul bordo destro. */
.hero-ctas > .pill,
.scelta-card__cta{ min-width:224px; justify-content:space-between; }

/* pill outline: nuova variante, bordo scuro, sfondo trasparente */
/* pill gialla per la sagra: il giallo delle schermate della demo, testo nero (12:1) */
.pill--sagra{
  background:#F8C800;
  color:var(--ink);
}
.pill--sagra:hover{ opacity:1; filter:brightness(.96); transform:translateY(-2px); }

/* cerchietto-freccia dentro la pill (pattern "button-in-button") */
.pill-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:transform .4s var(--ease);
}
.pill-ic svg{ width:15px; height:15px; display:block; }
.pill:hover .pill-ic{ transform:translate(2px,-2px); }
.pill--sagra .pill-ic{ background:rgba(17,17,16,.12); }  /* stessa logica della pill arancione: cerchio traslucido, freccia del colore del testo */

/* ---------- Nav (identica a pizzerie.css) ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition:background-color .5s var(--ease), backdrop-filter .5s var(--ease), transform .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(233,233,233,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav.nav-on-dark.is-scrolled{ background:rgba(20,19,18,0.72); }
.nav.nav-on-dark .nav-brand,
.nav.nav-on-dark .nav-links a:not(.nav-cta){ color:var(--card); }

.nav-brand{ display:flex; align-items:center; text-decoration:none; }
.nav-brand__mark{ position:relative; width:44px; height:44px; flex:0 0 auto; }
.nav-brand__mark .petal{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(var(--da));
  transform-origin:47.4% 47.8%;
  opacity:0;
  animation:petalIn var(--t,.45s) cubic-bezier(.25,.6,.35,1) var(--d,0ms) forwards;
}
@keyframes petalIn{
  0%{ transform:rotate(var(--da)); opacity:0; }
  14%{ opacity:1; }
  100%{ transform:rotate(0deg); opacity:1; }
}
.nav-brand__word{ position:relative; width:calc(44px * 1262 / 644); height:44px; flex:0 0 auto; }
.nav-brand__word img{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0;
  animation:brandFade .34s ease-out var(--d,0ms) forwards;
}
.nav-brand__word .accent{
  transform:scale(.55);
  transform-origin:31% 6%;
  animation:accentPop .4s cubic-bezier(.34,1.4,.5,1) var(--d,0ms) forwards;
}
@keyframes brandFade{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}
@keyframes accentPop{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}
.nav.nav-on-dark .nav-brand__word .lt{ filter:brightness(0) invert(1); }
@media (prefers-reduced-motion:reduce){
  .nav-brand__mark .petal, .nav-brand__word img{ animation:none; transform:none; opacity:1; }
}
.nav-inner{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(20px,2.6vw,36px);
}
.nav-link{
  font:500 15px/1 'Archivo',sans-serif;
  color:var(--ink);
  text-decoration:none;
  padding-block:4px;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav-link:hover{ border-color:var(--ink); }
.nav-cta{
  font:600 15px/1 'Archivo',sans-serif;
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.nav-hide-mobile{ display:inline-flex; }
@media (max-width:760px){
  .nav-hide-mobile{ display:none; }
}

#top{ height:1px; }
main{ overflow-x:clip; }

/* ---------- Focus (identico a pizzerie.css) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
}

/* ==========================================================================
   HERO
   Split asimmetrico: testo a sinistra, cascata di due schermate a destra.
   min-height:100dvh (mai 100vh), padding-top contenuto, niente marquee,
   niente hero-circle, niente chip, niente riga di trust: solo eyebrow,
   H1 due righe, sottotitolo, due pill.
   ========================================================================== */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--nav-h) + 20px);
  padding-bottom:48px;
  background:var(--bg-hero);
  overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; }

/* ---- Scritta outline che scorre in fondo al hero (identica a pizzerie.css) ---- */
.hero-marquee{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(8px,1.5vw,24px);
  gap:clamp(6px,1vw,14px);
  pointer-events:none;
  user-select:none;
}
.hero-marquee__track.hero-marquee__track--rev{ animation-direction:reverse; }
.hero-marquee__track{
  display:flex;
  flex-wrap:nowrap;
  will-change:transform;
  animation:heroMarquee 24s linear infinite;
}
.hero-marquee__track span{
  display:inline-block;
  flex:0 0 auto;
  white-space:nowrap;
  font-family:'Anton',sans-serif;
  text-transform:uppercase;
  font-size:clamp(90px, 11vw, 175px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(17,17,16,.10);
}
@supports not (-webkit-text-stroke:1px black){
  .hero-marquee__track span{ color:rgba(17,17,16,.05); }
}
@keyframes heroMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:600px){
  .hero-marquee__track span{ font-size:clamp(96px, 30vw, 150px); -webkit-text-stroke:1px rgba(17,17,16,.08); }
}
@media (prefers-reduced-motion:reduce){
  .hero-marquee__track{ animation:none; }
}

/* ---- Spaghetti sulla forchetta: attaccati al bordo sinistro (l'immagine e'
   tagliata su quel lato), si muovono solo su e giu'. Su mobile stanno in fondo
   al hero, sotto i bottoni. ---- */
.hero-ctas{ position:relative; }
.hero-pasta{
  position:absolute;
  right:calc(-1 * var(--wrap-pad));   /* a filo del bordo destro dello schermo */
  top:60px;                            /* il nido di spaghetti scende sotto il bottone giallo, senza coprirlo */
  width:min(46vw, 190px);
  pointer-events:none;
  user-select:none;
}
@media (max-width:900px){
  /* gli spaghetti scendono sotto i bottoni: spazio in fondo al hero */
  .hero{ padding-bottom:clamp(150px, 42vw, 210px); }
}
.hero-pasta img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 26px 40px rgba(17,17,16,.22));
}
@media (prefers-reduced-motion: no-preference){
  .hero-pasta img{ animation:pastaFloat 6.5s ease-in-out infinite alternate; }
}
@keyframes pastaFloat{
  from{ transform:translateY(-12px); }
  to{ transform:translateY(12px); }
}
.hero-kicker{
  font:500 18px/1.5 'Archivo',sans-serif;
  color:var(--ink);
  margin-bottom:clamp(16px,2.6vw,26px);
  max-width:34ch;
}
.hero-title-wrap{ margin:0 0 clamp(20px,2.6vw,28px); max-width:none; padding-inline:0; }
.hero-h1{ font-size:clamp(44px, 14vw, 56px); line-height:.95; letter-spacing:-0.02em; }  /* mobile: stessa taglia del titolo di pizzerie (56px a 390) */

.hero-row{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
  align-items:center;
}
.hero-copy{ min-width:0; }
.hero-sub{
  font:500 19px/1.5 'Archivo',sans-serif;
  color:var(--ink);
  max-width:none;
  margin-bottom:clamp(24px,3.4vw,32px);
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---- Desktop (>900px): titolo a tutta larghezza, riga sottotitolo+pill /
   composizione tablet in griglia 2 colonne. Sotto i 901px resta la colonna
   singola definita sopra (gia' approvata in review). ---- */
@media (min-width:901px){
  .hero{
    padding-top:calc(var(--nav-h) + 56px);
    padding-bottom:40px;
  }
  .hero-inner{
    display:grid;
    grid-template-columns:1fr clamp(280px, 30vw, 440px);
    column-gap:clamp(24px, 3vw, 48px);
    align-items:center;
  }
  .hero-kicker, .hero-title-wrap, .hero-row{ grid-column:1; }
  .hero-ctas{ position:static; }
  .hero-pasta{
    right:0;                     /* .hero-inner e' il .wrap: il suo bordo e' gia' il bordo dello schermo */
    top:50%;
    transform:translateY(-50%);
    width:calc(clamp(280px, 30vw, 440px) + var(--wrap-pad));
  }
  .hero-kicker{ margin-bottom:clamp(16px,1.8vw,22px); }
  .hero-title-wrap{ margin:0 0 clamp(28px,3.2vw,40px); }
  .hero-h1{
    font-size:clamp(48px, 6.2vw, 96px);
    line-height:0.96;
    letter-spacing:-0.01em;
  }
  .hero-row{
    grid-template-columns:1fr;
    gap:48px;
  }
  .hero-sub{ max-width:44ch; }

}

/* ==========================================================================
   #SCEGLI - due card double-bezel, pari peso
   ========================================================================== */
.scelta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;   /* righe tutte alte come la card piu' lunga, anche impilate su mobile */
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(36px,5vw,56px);
}
/* Le due card hanno la stessa altezza anche se i testi no: guscio, nucleo e
   corpo si allungano fino in fondo e la pill sta sempre sul bordo basso,
   allineata con quella accanto. */
.scelta-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:transform .3s var(--ease);
}
.scelta-card:active{ transform:scale(.98); }
.scelta-card__shell{
  flex:1;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:28px;
  padding:8px;
  background:rgba(17,17,16,.03);
}
.scelta-card__core{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:20px;
  overflow:hidden;
}
.scelta-card__img{
  height:280px;
  overflow:hidden;
}
.scelta-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.scelta-card:hover .scelta-card__img img{ transform:scale(1.03); }
.scelta-card:hover .pill-ic{ transform:translate(2px,-2px); }
.scelta-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(24px,3vw,34px);
}
.scelta-card__cta{ margin-top:auto; }
.scelta-card__title{
  font-family:'Anton',sans-serif;
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:-0.01em;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.05;
  color:var(--ink);
  margin-bottom:14px;
}
.scelta-card__txt{
  font:400 16px/1.55 'Archivo',sans-serif;
  color:var(--muted-tx);
  margin-bottom:18px;
  max-width:44ch;
}
.scelta-card__price{
  font:600 16px/1.4 'Archivo',sans-serif;
  color:var(--ink);
  margin-bottom:20px;
}

@media (max-width:760px){
  .scelta-grid{ grid-template-columns:1fr; }
  .scelta-card__img{ height:220px; }
}

/* ---------- Statement (identico a pizzerie.css) + variante scura ---------- */
.statement p{
  font:500 var(--fs-statement)/1.25 'Archivo',sans-serif;
  color:var(--ink);
  max-width:900px;
}
.section-dark .statement{ margin-bottom:clamp(28px,4vw,44px); }
.section-dark .statement p{ color:var(--card); }
#chi-siamo .display-wrap{ margin-bottom:clamp(18px,3vw,36px); }

/* ---------- Cliente-uno (identico a pizzerie.css) + variante scura ---------- */
.cliente-uno{
  display:inline-flex; align-items:center; gap:16px;
  margin-top:clamp(28px,4vw,44px);
  padding:12px 26px 12px 12px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card);
  text-decoration:none; color:var(--ink);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.cliente-uno:hover{ border-color:var(--accent); transform:translateY(-2px); }
.cliente-uno img{ width:56px; height:56px; border-radius:50%; display:block; }
.cliente-uno strong{ display:block; font:700 16px/1.3 'Archivo',sans-serif; }
.cliente-uno small{ display:block; font:400 13px/1.4 'Archivo',sans-serif; color:var(--muted-tx); margin-top:2px; }

.cliente-uno--dark{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:var(--card);
}
.cliente-uno--dark:hover{ border-color:rgba(255,255,255,.4); }
.cliente-uno--dark strong{ color:var(--card); }
.cliente-uno--dark small{ color:rgba(252,251,250,.75); }

/* ---------- Footer (identico a pizzerie.css) ---------- */
.footer-wrap{ background:var(--bg); }
.footer{
  margin-top:clamp(64px,9vw,120px);
  padding-top:32px;
  padding-bottom:clamp(40px,6vw,72px);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:20px 32px;
  align-items:center;
  justify-content:space-between;
}
.footer-logo{ height:30px; width:auto; display:block; align-self:flex-start; }
.footer-brand{ display:flex; flex-direction:column; gap:4px; }
.footer-brand strong{ font:700 16px/1 'Archivo',sans-serif; color:var(--ink); }
.footer-brand span{ font:400 15px/1.4 'Archivo',sans-serif; color:var(--muted-tx); }
.footer-links{ display:flex; flex-wrap:wrap; gap:6px; font:600 14px/1 'Archivo',sans-serif; }
.footer-links a{ text-decoration:none; color:var(--ink); }
.footer-links a:hover{ color:var(--accent); }
.footer-sep{ color:var(--muted-tx); }

/* ---------- Sezione #scegli: sfondo di rhythm globale ---------- */
#hero{ background:var(--bg-hero); }
.scegli{ background:var(--bg); }

@media (max-width:600px){
  .footer{ justify-content:flex-start; }
}