/* ============================================================
   SFIZIO v2 — panini & salad bar (STYLE BETA · light cream theme).
   Crisp, fresh, organic: almond ground, basil + crust accents.
   Sections: #hero · #tecnica (compressed band) · menu grids ·
   #contatti — each self-standing.
   ============================================================ */

/* ---------------- #hero ---------------- */
.shero {
  position: relative; min-height: 78dvh;
  display: grid; align-items: end; overflow: clip;
}
.shero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.9) saturate(1.02);
}
/* light theme scrim: photo legibility on top, cream fade into the page */
.shero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 26, 18, 0.18) 0%, rgba(30, 26, 18, 0.42) 55%, var(--bg) 97%);
}
.shero__content {
  position: relative; z-index: 1;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-7);
  display: grid; gap: var(--sp-3);
  color: #fdf9f0;                       /* over the photo, before the cream page begins */
}
.shero__content .kicker { color: #cfe98a; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.shero em { color: #cfe98a; font-style: italic; }
.shero .lede { max-width: 34ch; color: rgba(253, 249, 240, 0.88); }
.shero__hours {
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); color: #cfe98a;
}

/* ---------------- #tecnica — compressed icon band ---------------- */
.svband {
  padding-block: var(--sp-6);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.svband__head { margin-bottom: var(--sp-5); }
.svband__head h2 { font-size: var(--fs-xl); }
.svband em { color: var(--street-deep); }

.svband__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
}
.svstep {
  display: grid; justify-items: center; text-align: center; gap: 2px;
  padding: var(--sp-2) var(--sp-1);
}
.svstep svg { width: clamp(30px, 8vw, 44px); height: auto; color: var(--street-deep); }
.svstep .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svstep strong { font-size: var(--fs-sm); font-weight: 800; margin-top: 4px; }
.svstep span { font-size: 0.68rem; color: var(--muted); line-height: 1.25; }
.svstep--you svg { color: var(--crust); }

/* subtle connecting dashes between steps (desktop) */
@media (min-width: 700px) {
  .svstep { position: relative; }
  .svstep + .svstep::before {
    content: ""; position: absolute; left: -8%; top: 26%;
    width: 16%; border-top: 2px dashed var(--line-strong);
  }
}

/* ---------------- menu grids (Style Beta) ---------------- */
.ssec { padding-block: var(--sp-6) var(--sp-3); }
.ssec__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.ssec__soonnote {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  color: var(--muted); font-size: var(--fs-sm);
  padding-top: var(--sp-6);
}
.ssec__soonnote .soon { color: var(--crust); }

.bgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
.bgrid .pcard { width: auto; }
.bgrid > :first-child { grid-column: 1 / -1; }
.bgrid > :first-child .pcard__media { aspect-ratio: 16 / 9; }
@media (min-width: 800px) {
  .bgrid { grid-template-columns: repeat(3, 1fr); }
  .bgrid > :first-child { grid-column: span 2; }
}
.bgrid .pcard__order { background: var(--street-deep); }

/* =========================================================
   STYLE BETA — CSS scroll-driven (the zero-GSAP experiment):
   active when panini.js sets .beta-native; IO fallback otherwise.
   ========================================================= */
@supports (animation-timeline: view()) {
  .beta-native .bcard {
    animation: bcard-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 32%;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
  .beta-native .bcard .pcard__media img {
    animation: bmedia-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    scale: 1.12;
  }
  .beta-native .svstep {
    animation: bcard-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  @keyframes bcard-in {
    from { opacity: 0; transform: translateY(46px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes bmedia-drift {
    from { object-position: center 78%; }
    to   { object-position: center 22%; }
  }
}