/* ============================================================
   CASA BISTROT — layer "cinema" (visual/motion di fascia alta)
   Regole: ogni effetto nasce da lavagna, gesso, legno. Niente per stupire.
   Desktop + pointer fine: WebGL/GSAP (cinema.js). Mobile: CSS scroll-driven.
   prefers-reduced-motion: tutto statico.
   ============================================================ */

/* ---------- transizioni di pagina cross-document (View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cb-wipe-out .38s cubic-bezier(.625,.05,0,1) both; }
::view-transition-new(root) { animation: cb-wipe-in .55s cubic-bezier(.625,.05,0,1) both; }
@keyframes cb-wipe-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes cb-wipe-in {
  from { clip-path: inset(0 0 100% 0); opacity: .6; }
  to   { clip-path: inset(0 0 0 0);   opacity: 1; }
}
.site-header { view-transition-name: cb-header; }
::view-transition-group(cb-header) { animation-duration: .01s; }

/* ---------- preloader (solo prima visita della sessione, via cinema.js) ---------- */
.cb-pre { position: fixed; inset: 0; z-index: 30000; background: var(--board); color: var(--chalk);
  display: grid; place-items: center; overflow: hidden; }
.cb-pre::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .86 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cb-pre-word { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 7vw, 6.5rem); letter-spacing: .01em; line-height: 1;
  position: relative; display: inline-block; }
.cb-pre-word span { display: inline-block; opacity: 0; transform: translateY(.25em) rotate(-2deg); filter: blur(2px); }
.cb-pre-count { position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(18px, 3vw, 40px); font-family: var(--sans);
  font-size: 12px; letter-spacing: .18em; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.cb-pre-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--wood); }
.cb-pre.is-done { pointer-events: none; }

/* ---------- cursore a gesso (desktop) ---------- */
.cb-cursor-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20000; opacity: 0; transition: opacity .4s; }
html.cb-cinema .cb-cursor-canvas { opacity: 1; }
html.cb-cinema .cursor { display: none !important; } /* sostituito dal canvas */
html.cb-cinema { cursor: none; }
html.cb-cinema a, html.cb-cinema button, html.cb-cinema input, html.cb-cinema textarea, html.cb-cinema select, html.cb-cinema iframe { cursor: none; }
html.cb-cinema input, html.cb-cinema textarea { cursor: text; }

/* ---------- hero WebGL (sopra la foto reale, stessa foto come texture) ---------- */
.hero-photo { perspective: 1200px; }
.hero-photo canvas.cb-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
.hero-photo.is-gl canvas.cb-gl { opacity: 1; }
/* la foto reale resta SEMPRE sotto: se WebGL cade o lo screenshot non cattura il canvas, l'insegna c'è */
.hero-photo .cb-gl-hint { position: absolute; right: 14px; bottom: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(236,231,220,.55); opacity: 0; transition: opacity .6s; pointer-events: none; }
.hero-photo.is-gl:hover .cb-gl-hint { opacity: 1; }

/* ---------- titolo scritto col gesso ---------- */
.hero h1 .cb-ch { display: inline-block; will-change: transform, opacity, clip-path; }
.hero h1.cb-split { white-space: nowrap; }

/* ---------- card 3D (tilt) e icone che galleggiano ---------- */
.highlight { transform-style: preserve-3d; transition: box-shadow .5s var(--ease); }
html.cb-cinema .highlight { will-change: transform; }
html.cb-cinema .highlight .chalk-icon, html.cb-cinema .highlight .product-cut { transform: translateZ(40px); will-change: transform; }
html.cb-cinema .highlight h3 { transform: translateZ(22px); }
html.cb-cinema .highlight.is-lit { box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(216,176,136,.18); }
.cb-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(236,231,220,.55), transparent 60%); transition: opacity .4s; }
.highlight:hover .cb-glare { opacity: 1; }

/* ---------- bottoni magnetici ---------- */
html.cb-cinema .button { will-change: transform; }
html.cb-cinema .button > span, html.cb-cinema .button > svg { display: inline-block; will-change: transform; }

/* ---------- galleria orizzontale (desktop, sezione Instagram) ---------- */
html.cb-cinema .gallery-strip { display: flex; gap: 18px; width: max-content; }
html.cb-cinema .gallery-strip figure { flex: 0 0 auto; width: clamp(240px, 22vw, 340px); }
html.cb-cinema .cb-pin-wrap { overflow: hidden; }

/* ---------- riga eventi: numero che scorre ---------- */
html.cb-cinema .event-list > * { will-change: transform, opacity; }

/* ---------- polvere di gesso ambientale (canvas a tutta pagina, desktop) ---------- */
.cb-dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .55; mix-blend-mode: screen; }
[data-theme="light"] .cb-dust { mix-blend-mode: multiply; opacity: .25; }

/* ============================================================
   MOBILE / senza JS: scroll-driven animations (CSS puro, zero costo JS)
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and ((max-width: 768px) or (pointer: coarse)) {
    .section .section-heading, .facts > *, .highlight, .quote-grid > *, .gallery-main figure, .event-list > *, .map, .site-footer .footer-grid > * {
      animation: cb-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
    .hero-photo { animation: cb-hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
}
@keyframes cb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cb-hero-drift { to { transform: translateY(6vh) scale(1.02); } }

/* ---------- reduced motion: tutto fermo ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .cb-pre, .cb-dust, .cb-cursor-canvas { display: none !important; }
  html.cb-cinema { cursor: auto; }
  .hero-photo canvas.cb-gl { display: none; }
}

/* ---------- pagine interne: lavagna 3D dietro il titolo ---------- */
.page-intro { position: relative; }
.page-intro > * { position: relative; z-index: 1; }
.page-intro canvas.cb-board { position: absolute; left: 0; right: 0; top: -20px; width: 100%; height: calc(100% + 30px); z-index: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.page-intro.is-gl canvas.cb-board { opacity: 1; }
.page-intro h1 .cb-ch { display: inline-block; will-change: transform, opacity, clip-path; }
.page-intro h1.cb-split { white-space: nowrap; }

/* ---------- menu: indicatore nella nav, hover riga ---------- */
.cb-ind { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--wood); pointer-events: none; }
html.cb-cinema .menu-row .dots { transition: border-color .3s, opacity .3s; }
html.cb-cinema .menu-row:hover .dots { border-color: var(--wood); opacity: 1; }
html.cb-cinema .menu-row .price { transition: transform .35s var(--ease), color .3s; display: inline-block; }
html.cb-cinema .menu-row:hover .price { transform: translateX(-4px); color: var(--wood); }
html.cb-cinema .menu-line > span:first-child { transition: transform .35s var(--ease); display: inline-block; }
html.cb-cinema .menu-row:hover .menu-line > span:first-child { transform: translateX(5px); }

/* ---------- prenota: bottoni del widget ---------- */
html.cb-cinema .dw-submit { will-change: transform; }
html.cb-cinema .dw-day, html.cb-cinema .dw-slot { transition: transform .25s var(--ease), background-color .25s, border-color .25s; }
html.cb-cinema .dw-day:hover, html.cb-cinema .dw-slot:hover { transform: translateY(-2px); }