/* Va Bene — v4 editorial system, shared custom styles */

/* Kinetic marquee band (Al Capriccio-style ticker) */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Warm paper section background */
.paper {
  background-color: #F4EDDD;
  background-image: radial-gradient(85% 60% at 20% 0%, rgba(255,255,255,.55), transparent 60%);
}

/* Menu rows: leader line between dish and price */
.dotted-leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(30,23,19,.28);
  margin: 0 .8rem;
  transform: translateY(-.3em);
  min-width: 1.5rem;
}
.menu-section h3 { font-size: 1.3rem; font-weight: 500; }

/* Retro polaroids: gentle tilt, straighten on hover */
.retro-tilt-l { transform: rotate(-3deg); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.retro-tilt-r { transform: rotate(2.5deg); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.retro-tilt-l:hover, .retro-tilt-r:hover { transform: rotate(0deg) scale(1.02); }

/* Instagram reel card: phone frame, 9:16 */
.reel-card {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 15rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 4px solid #1E1713;
  background: #1E1713;
  box-shadow: 0 18px 40px -18px rgba(30,23,19,.45);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.reel-card:hover { transform: translateY(-6px) rotate(-1deg); }
.reel-card img, .reel-card video { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.reel-card .reel-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: .9rem;
  background: linear-gradient(to bottom, rgba(30,23,19,.45), transparent 30%, transparent 60%, rgba(30,23,19,.72));
  color: #FAF5EA;
}

/* Polaroid photo card (The-Italian-style strip) */
.polaroid {
  background: #FDFBF6;
  padding: .8rem .8rem 1rem;
  box-shadow: 0 10px 30px -12px rgba(30,23,19,.35);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.polaroid:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 2; }

/* Hand-sketched red ellipse around a word */
.sketch-circle { position: relative; display: inline-block; }
.sketch-circle > svg {
  position: absolute; inset: -14% -9%;
  width: 118%; height: 128%;
  pointer-events: none;
}

/* Hand-drawn double brush underline (never reads as strikethrough) */
.sketch-underline { position: relative; display: inline-block; }
.sketch-underline > svg {
  position: absolute; left: -4%; bottom: -0.22em;
  width: 108%; height: .38em;
  pointer-events: none;
}

/* Image fallback tone while loading */
.img-frame { background: linear-gradient(160deg, #F4EDDD, #DFD2B8); }

/* Scroll-triggered reveals (IntersectionObserver adds .is-visible).
   Gated behind html.js so content stays visible without JavaScript. */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:focus-visible { outline: 2px solid #C51A1B; outline-offset: 3px; }

html { scroll-padding-top: 8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}