/* =========================================================
   Manna Bunsik — Effekte
   Intro, Filmkorn, rotierender Sticker, Split-Type,
   Gerichte-Vorschau am Cursor, Scroll-Fortschritt.
   ========================================================= */

/* ============================== Filmkorn =================================== */

.grain {
  position: fixed; inset: -50%; z-index: 250;
  pointer-events: none; opacity: 0.28; mix-blend-mode: multiply;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ========================== Scroll-Fortschritt ============================= */

.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  height: 3px; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  will-change: transform;
}

/* ============================== Split-Type ================================= */

.split {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.14em; margin-bottom: -0.14em; /* Unterlängen nicht abschneiden */
}
.split > i {
  display: inline-block; font-style: normal;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
  transition-delay: calc(var(--c) * 32ms + var(--d, 0ms));
}
.is-visible .split > i, .split.is-visible > i { transform: none; }

/* ============================== Menü-Hover ================================= */

.menu-item { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .menu-item__name, .menu-item__price {
    transition: transform 0.5s var(--ease), color 0.4s var(--ease);
  }
  .menu-item:hover .menu-item__name { transform: translateX(0.9rem); color: var(--teal); }
  .menu-item:hover .menu-item__price { transform: translateX(-0.4rem); color: var(--teal); }
  .menu-item::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 1px; background: var(--teal);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s var(--ease);
  }
  .menu-item:hover::after { transform: scaleX(1); }
}

/* ============================ Reduzierte Bewegung ========================== */

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .split > i { transform: none; }
}