/* ===== Willkommens-Animationen der Speisekarte (film.js, intro.js) – auch für die Vorschau im Dashboard =====
   Erwartet die Variablen --primary, --secondary, --accent, --heading, --sans, --ease (Speisekarte: app.css). */
/* ---------- Intro-Film (film.js) – Tiefe, Licht, Glas ---------- */
.film { position: absolute; inset: 0; overflow: hidden; color: #fff; perspective: 700px;
  background: radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--secondary) 75%, var(--primary)) 0%, var(--primary) 45%, color-mix(in srgb, var(--primary) 55%, #000) 100%); }
.f-bg { position: absolute; inset: -30%; background:
  radial-gradient(30% 26% at 30% 32%, color-mix(in srgb, var(--secondary) 70%, transparent), transparent 70%),
  radial-gradient(26% 22% at 72% 68%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  animation: f-drift 14s ease-in-out infinite alternate; }
@keyframes f-drift { to { transform: translate(8%, -6%) rotate(8deg); } }
.f-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.f-scene { position: absolute; inset: 0 0 26px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform-style: preserve-3d; }
.f-scene.on { opacity: 1; animation: f-in .9s cubic-bezier(.16, 1, .3, 1) both; }
.f-scene.off { opacity: 1; animation: f-out .7s cubic-bezier(.6, 0, .8, .4) forwards; }
.f-scene.still { animation: none; }
/* Kamera fährt durch: alte Szene kommt nah und verschwimmt, neue kommt aus der Tiefe */
@keyframes f-in { from { opacity: 0; transform: scale(.7); filter: blur(10px); } }
@keyframes f-out { to { opacity: 0; transform: scale(1.7); filter: blur(14px); } }

/* Szene 1: Typografie mit leuchtendem Akzentwort */
.f-type { gap: 0; text-align: center; padding: 0 20px; }
.fw { display: block; overflow: hidden; padding: 0 .05em .04em; font: 700 clamp(30px, 9vw, 46px)/1.04 var(--heading); }
.fw[style*="--w:0"] { font-size: clamp(22px, 6.4vw, 32px); font-weight: 500; opacity: .92; }
.fw.accent { color: var(--accent); font-size: clamp(40px, 13vw, 64px); }
.fw.accent .fl { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.fl { display: inline-block; transform: translateY(110%); opacity: 0; }
.f-type.on .fl { animation: f-rise .8s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i) * 42ms + .25s); }
@keyframes f-rise { from { transform: translateY(110%) rotate(6deg); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
.f-type.on .fw.accent { animation: f-glow 2.6s ease-in-out 1.6s infinite alternate; }
@keyframes f-glow { to { filter: brightness(1.15); } }
.f-line { display: block; height: 2px; width: 0; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 12px var(--accent); }
.f-type.on .f-line { animation: f-line 1s var(--ease) 1.5s forwards; }
@keyframes f-line { to { width: min(56%, 220px); } }
.f-type.still .fl { transform: none; opacity: 1; }
.f-type.still .f-line { width: min(56%, 220px); }

/* Szene 2: schwebende Glas-Kacheln in der Tiefe */
.f-tile, .f-hero { position: absolute; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -12px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.f-tile { left: var(--x); top: var(--y); width: 58px; height: 58px; margin: -29px 0 0 -29px; opacity: 0;
  filter: blur(calc(var(--z) * 2.4px)); }
.f-tile i { width: 28px; height: 28px; color: rgba(255,255,255,.9); }
.f-tile svg, .f-hero svg { width: 100%; height: 100%; display: block; }
.f-glass.on .f-tile { animation: f-fly 1.1s cubic-bezier(.16, 1, .3, 1) both, f-bob 3.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--k) * 110ms + .1s), calc(var(--k) * -700ms); }
@keyframes f-fly { from { opacity: 0; transform: translateZ(-400px) scale(.4); }
  to { opacity: calc(1 - var(--z) * .45); transform: scale(calc(1.15 - var(--z) * .5)); } }
@keyframes f-bob { from { translate: 0 -5px; rotate: -3deg; } to { translate: 0 5px; rotate: 3deg; } }
.f-glass.on .f-tile { opacity: calc(1 - var(--z) * .45); transform: scale(calc(1.15 - var(--z) * .5)); }
.f-hero { left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 28px; opacity: 0;
  background: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.08)); }
.f-hero::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%); }
.f-hero i { width: 54px; height: 54px; color: var(--accent); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 80%, transparent)); }
.f-glass.on .f-hero { animation: f-hero 1.3s cubic-bezier(.16, 1, .3, 1) .5s both, f-float 3s ease-in-out 1.8s infinite alternate; }
@keyframes f-hero { from { opacity: 0; transform: translateZ(-500px) rotateX(35deg) rotateY(-25deg); } to { opacity: 1; transform: none; } }
@keyframes f-float { to { transform: translateY(-6px) rotateY(10deg) rotateX(-6deg); } }

/* Szene 3: Logo mit Lichtringen und Glanz */
.f-rings { position: absolute; left: 50%; top: calc(50% - 6px); width: 0; height: 0; }
.f-rings b { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); opacity: 0; }
.f-logo.on .f-rings b { animation: f-ring 3s cubic-bezier(.2, .7, .3, 1) infinite; }
.f-logo.on .f-rings b:nth-child(2) { animation-delay: .8s; }
.f-logo.on .f-rings b:nth-child(3) { animation-delay: 1.6s; }
@keyframes f-ring { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .7; } 100% { opacity: 0; transform: scale(3.2); } }
.f-logo-wrap { position: relative; display: block; width: min(64%, 300px); opacity: 0; }
.f-logo-wrap img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(255,255,255,.25)); }
.f-logo.on .f-logo-wrap { animation: f-logo 1.2s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes f-logo { from { opacity: 0; transform: scale(1.35); filter: blur(12px); letter-spacing: .2em; } to { opacity: 1; transform: none; filter: none; } }
/* Glanzstreifen läuft über das Logo (nur in der Logoform sichtbar) */
.f-shine { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 60%, #fff) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; }
.f-logo.on .f-shine { animation: f-shine 1.6s ease-in-out 1.2s both; }
@keyframes f-shine { to { background-position: 150% 0; } }
.f-cap:empty { display: none; }
.f-cap { margin-top: 14px; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); opacity: 0; }
.f-logo.on .f-cap { animation: f-track 1.4s var(--ease) .8s forwards; }
@keyframes f-track { to { opacity: 1; letter-spacing: .34em; } }
@media (prefers-reduced-motion: reduce) { .f-bg { animation: none; } }
.f-name { display: block; font: 700 clamp(30px, 9vw, 44px)/1.1 var(--heading); color: #fff; text-align: center; }

/* ===== Neue Animationen (intro.js): Partikel-Logo, Nordlicht, Tinte, Neon ===== */
.fx { position: absolute; inset: 0; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--secondary) 60%, var(--primary)) 0%, var(--primary) 50%, color-mix(in srgb, var(--primary) 45%, #000) 100%); }
.fx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-center { position: absolute; inset: 0 0 26px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; text-align: center; pointer-events: none; }
.fx-logo { display: block; width: min(64%, 300px); }
.fx-logo img { width: 100%; height: auto; display: block; }
.fx-name { display: block; font: 700 clamp(30px, 9vw, 46px)/1.08 var(--heading); }
.fx-slogan { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .3em; color: var(--accent); }

/* Partikel: das scharfe Logo blendet nur ein, während die Partikel es bilden */
.fx-partikel .fx-logo, .fx-partikel .fx-slogan { opacity: 0; transition: opacity .9s ease, filter .9s ease, letter-spacing 1.2s ease; filter: blur(6px); }
.fx-partikel.fx-show .fx-logo { opacity: .9; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 60%, transparent)); }
.fx-partikel.fx-show .fx-slogan { opacity: 1; filter: none; letter-spacing: .38em; }
.fx-partikel { background: radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--primary) 70%, #000) 0%, color-mix(in srgb, var(--primary) 35%, #000) 100%); }

/* Nordlicht: dunkler Himmel, Logo mit pulsierendem Leuchten */
.fx-nordlicht { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 35%, #02060c) 0%, color-mix(in srgb, var(--primary) 55%, #000) 70%, color-mix(in srgb, var(--secondary) 40%, #000) 100%); }
.fx-nordlicht .fx-center { justify-content: flex-end; padding-bottom: 18%; }
.fx-nordlicht .fx-logo { animation: fx-up 1.6s var(--ease) .3s both, fx-pulse 4s ease-in-out 2s infinite alternate; }
.fx-nordlicht .fx-slogan { animation: fx-up 1.6s var(--ease) .9s both; }
@keyframes fx-pulse { from { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 30%, transparent)); } to { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 75%, transparent)); } }
@keyframes fx-up { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }

/* Tinte: Logo taucht aus den Farbwolken auf */
.fx-tinte { background: radial-gradient(130% 100% at 50% 50%, color-mix(in srgb, var(--primary) 80%, #000), color-mix(in srgb, var(--primary) 40%, #000)); }
.fx-tinte .fx-logo { animation: fx-emerge 2.4s var(--ease) 1s both; }
.fx-tinte .fx-slogan { animation: fx-up 1.6s var(--ease) 2.2s both; }
@keyframes fx-emerge { from { opacity: 0; transform: scale(.86); filter: blur(14px); } to { opacity: 1; transform: none; filter: drop-shadow(0 4px 18px rgba(0,0,0,.35)); } }

/* Neon: Schild an einer dunklen Wand */
.fx.fx-neon { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px),
  radial-gradient(90% 70% at 50% 45%, color-mix(in srgb, var(--primary) 50%, #111) 0%, #07090c 100%); }
.fx-neon .fx-center { gap: 10px; }
.fx-sign, .fx-sign2 { display: block; max-width: 100%; overflow-wrap: anywhere; }
.fx-center .fx-sign { position: relative; font: 700 clamp(34px, 10.5vw, 54px)/1.05 var(--heading); color: #fff6e8;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--accent), 0 0 22px var(--accent), 0 0 44px var(--accent), 0 0 80px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: fx-flicker 7s linear infinite; }
.fx-center .fx-sign::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; transform: scaleY(-1); opacity: .16; filter: blur(3px);
  -webkit-mask: linear-gradient(transparent 30%, #000); mask: linear-gradient(transparent 30%, #000); }
.fx-center .fx-sign2 { margin-top: 26px; font: 600 clamp(13px, 3.6vw, 17px) var(--sans); text-transform: uppercase; letter-spacing: .32em; color: #e9fbff;
  text-shadow: 0 0 4px #fff, 0 0 10px color-mix(in srgb, var(--secondary) 70%, #6ff), 0 0 24px color-mix(in srgb, var(--secondary) 70%, #6ff); animation: fx-flicker2 7s linear 1s infinite; }
@keyframes fx-flicker { 0% { opacity: .1; } 2% { opacity: 1; } 3% { opacity: .2; } 5% { opacity: 1; } 6% { opacity: .4; } 8%, 70% { opacity: 1; } 71% { opacity: .55; } 72%, 100% { opacity: 1; } }
@keyframes fx-flicker2 { 0%, 8% { opacity: 0; } 9% { opacity: 1; } 10% { opacity: .3; } 12%, 85% { opacity: 1; } 86% { opacity: .5; } 87%, 100% { opacity: 1; } }
.fx-still * { animation: none !important; transition: none !important; }

/* ===== Motions (motion.js): Fokus und Flip ===== */
.mo { position: absolute; inset: 0; overflow: hidden; --x-expo: cubic-bezier(.16, 1, .3, 1); --x-snap: cubic-bezier(.75, 0, .2, 1); }
/* Fokus: Kamerafahrt über Metall-Buchstaben, dann tippt sich der Name */
.mo-fokus { background: radial-gradient(90% 70% at 50% 45%, #1d2120, #050605); perspective: 600px; color: #fff; }
.mo-macro { position: absolute; left: -40%; top: 6%; white-space: nowrap; font: 800 clamp(180px, 62vw, 280px)/1 var(--heading); letter-spacing: -.04em; color: transparent;
  background: linear-gradient(100deg, #6d6d6d 10%, #f4f4f4 32%, #8a8a8a 44%, #3c3c3c 60%, #d9d9d9 78%, #555 92%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; transform-origin: 30% 50%; animation: mo-macro 6.4s infinite; }
.mo-type { position: absolute; inset: 0 0 22% 0; display: grid; place-items: center; padding: 0 16px; }
.mo-word { font: 600 clamp(22px, 7vw, 30px) var(--sans); white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid #fff;
  text-shadow: -1.5px 0 rgba(255, 40, 90, .75), 1.5px 0 rgba(40, 200, 255, .75), 0 0 18px rgba(255,255,255,.45); animation: mo-type 6.4s infinite, mo-caret .5s steps(1) infinite; }
@keyframes mo-macro {
  0% { opacity: 0; transform: translateZ(-60px) rotateY(-24deg) scale(1.15); filter: blur(14px); background-position: 0 0; }
  8% { opacity: 1; }
  44% { opacity: 1; transform: translateZ(40px) rotateY(-8deg) scale(1.3) translateX(-12%); filter: blur(1.5px); background-position: -100% 0; }
  50%, 100% { opacity: 0; transform: translateZ(70px) rotateY(-4deg) scale(1.4) translateX(-16%); filter: blur(10px); }
}
@keyframes mo-type { 0%, 52% { width: 0; animation-timing-function: steps(var(--n, 10), end); } 68%, 92% { width: var(--tw, 10ch); } 97%, 100% { width: 0; } }
@keyframes mo-caret { 50% { border-color: transparent; } }
/* Flip: Teller-Ring klappt in 3D, dann tippt sich der Slogan langsam in der Markenschrift */
.mo-flip { background: color-mix(in srgb, var(--surface, #f2ede3) 85%, #fff); perspective: 700px; color: var(--ink, #121614); }
.mo-stage { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; }
.mo-ring { position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; transform-style: preserve-3d; opacity: 0; }
.mo-ring i { position: absolute; inset: 0; border-radius: 50%; border: 9px solid var(--ink, #121614); }
.mo-ring i:not(:first-child) { border-color: color-mix(in srgb, var(--ink, #121614) 70%, #f2ede3); }
.mo-flip.turn .mo-ring { animation: mo-turn 3.2s forwards; }
@keyframes mo-turn {
  0% { transform: rotateX(70deg) rotateZ(0deg) scale(.2); opacity: 0; animation-timing-function: var(--x-expo); }
  14% { transform: rotateX(70deg) rotateZ(-40deg) scale(1); opacity: 1; animation-timing-function: var(--x-snap); }
  48% { transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1); animation-timing-function: var(--x-snap); }
  70% { transform: rotateX(0deg) rotateY(360deg) scale(1); animation-timing-function: var(--x-snap); }
  86% { transform: rotateX(0deg) rotateY(450deg) scale(1.6); opacity: 1; animation-timing-function: var(--x-expo); }
  100% { transform: rotateY(450deg) scale(2.8); opacity: 0; }
}
.mo-write { position: absolute; left: 7%; right: 7%; top: 44%; margin: 0; transform: translateY(-50%); text-align: center; color: var(--primary);
  font: 700 clamp(34px, 10.5vw, 52px)/1.04 var(--heading); letter-spacing: -.01em; overflow-wrap: anywhere; opacity: 0; transition: opacity .6s ease; }
.mo-flip.write .mo-write { opacity: 1; }
.mo-flip.out .mo-write { opacity: 0; transition-duration: .7s; }
.mo-caret { display: inline-block; width: 3px; height: .86em; margin-left: 4px; vertical-align: -.06em; background: var(--accent); animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mo-macro, .mo-ring { display: none; }
  .mo-word { animation: none; width: auto; border: 0; }
  .mo-caret { animation: none; }
}

/* Pistazien (exklusiv): Höhenlinien + schwebende Pistazien, Logo blendet von unscharf zu scharf ein */
.fx-pistazie { background: var(--primary); }
.fx-pistazie .fx-logo { width: min(58%, 280px); opacity: 0; animation: fx-pist-in 2.2s var(--ease, cubic-bezier(.2,.8,.2,1)) .5s both; }
.fx-pistazie .fx-logo img { filter: drop-shadow(0 8px 28px rgba(0,0,0,.45)); }
.fx-pistazie .fx-slogan { animation: fx-up 1.6s var(--ease, ease) 1.8s both; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
@keyframes fx-pist-in { 0% { opacity: 0; filter: blur(16px); transform: scale(.88); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
.fx-still.fx-pistazie .fx-logo, .fx-still.fx-pistazie .fx-slogan { animation: none; opacity: 1; filter: none; transform: none; }