/* ── Auftritt beim Überfahren einer Kachel ─────────────────────────────────
   reise.js hängt für 1,7 s ein .fx.fx-<programm> in das Bild der Kachel.
   Jede Einlage zeigt in gut einer Sekunde etwas Typisches aus dem Programm
   und ist am Ende wieder unsichtbar. */
.fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.fx i, .fx b { position: absolute; font-style: normal; font-weight: 800; }

/* Elli OS: die Bild-Knöpfe hüpfen im Bogen aus dem Boden */
.fx-ellios i { left: 50%; bottom: -30px; font-size: 26px; animation: fx-huepfen 1.2s cubic-bezier(.3, .7, .4, 1) calc(var(--i) * .07s) both; }
.fx-ellios i:nth-child(1) { --x: -120px; } .fx-ellios i:nth-child(2) { --x: -60px; } .fx-ellios i:nth-child(3) { --x: 0px; }
.fx-ellios i:nth-child(4) { --x: 60px; } .fx-ellios i:nth-child(5) { --x: 120px; }
@keyframes fx-huepfen {
  0% { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: translate(calc(-50% + var(--x)), -110px) scale(1.15) rotate(-8deg); }
  70% { transform: translate(calc(-50% + var(--x)), -84px) scale(1) rotate(4deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), -96px) scale(.9); opacity: 0; }
}

/* Robin: Sprechblase mit Tipp-Punkten, daraus wird ein Herz */
.fx-robin .fx-blase { left: 50%; top: 50%; display: flex; gap: 6px; padding: 12px 16px; border-radius: 18px 18px 18px 4px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -8px rgba(122, 162, 255, .7); animation: fx-blase 1.5s ease both; }
.fx-robin .fx-blase i { position: static; width: 8px; height: 8px; border-radius: 50%; background: #7aa2ff; animation: fx-tippen .5s ease-in-out infinite alternate; }
.fx-robin .fx-blase i:nth-child(2) { animation-delay: .15s; } .fx-robin .fx-blase i:nth-child(3) { animation-delay: .3s; }
@keyframes fx-blase { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  25%, 55% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 65%, 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@keyframes fx-tippen { to { transform: translateY(-5px); opacity: .5; } }
.fx-robin .fx-herz { left: 50%; top: 50%; font-size: 46px; color: #ff6b9a; text-shadow: 0 0 24px #ff6b9a; animation: fx-herz 1.5s ease both; }
@keyframes fx-herz { 0%, 55% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  82% { transform: translate(-50%, -50%) scale(.95); } 90% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }

/* Flimmerkiste: Schnee, dann zieht die Röhre zu einem Strich zusammen und geht wieder auf */
.fx-tv .fx-schnee { inset: 0; background: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #333 1px 2px, #999 2px 3px);
  background-size: 7px 9px; mix-blend-mode: screen; animation: fx-schnee .7s steps(6) both; }
@keyframes fx-schnee { 0% { opacity: .9; background-position: 0 0; } 100% { opacity: 0; background-position: 40px 30px; } }
.fx-tv .fx-roehre { left: 0; right: 0; top: 50%; height: 100%; translate: 0 -50%; background: #fff; mix-blend-mode: overlay; animation: fx-roehre 1s cubic-bezier(.7, 0, .3, 1) .15s both; }
@keyframes fx-roehre { 0% { transform: scaleY(1); opacity: 0; } 15% { opacity: .9; } 40% { transform: scaleY(.01) scaleX(1); opacity: 1; }
  55% { transform: scaleY(.01) scaleX(.04); opacity: 1; } 70% { transform: scaleY(.01) scaleX(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ZauberPinsel: ein Regenbogen-Pinselstrich fegt quer durchs Bild, Glitzer bleibt zurück */
.fx-zauberpinsel .fx-strich { left: -10%; top: 46%; width: 120%; height: 26px; border-radius: 20px;
  background: linear-gradient(90deg, #ff5e7a, #ffb347, #ffe14d, #4cd964, #3db4ff, #a970ff); transform-origin: left center;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .5)); animation: fx-strich 1.3s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes fx-strich { 0% { transform: rotate(-9deg) scaleX(0); opacity: 1; } 45% { transform: rotate(-9deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-9deg) scaleX(1); opacity: 0; } }
.fx-zauberpinsel i { font-size: 20px; top: 32%; animation: fx-glitzer .9s ease calc(.35s + var(--i) * .12s) both; }
.fx-zauberpinsel i:nth-child(2) { left: 22%; } .fx-zauberpinsel i:nth-child(3) { left: 52%; top: 50%; } .fx-zauberpinsel i:nth-child(4) { left: 78%; top: 28%; }
@keyframes fx-glitzer { 0% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1.3) rotate(90deg); opacity: 1; } 100% { transform: scale(0) rotate(180deg); opacity: 0; } }

/* Spiele: vier Klötzchen fallen in eine Reihe, die Reihe blitzt weg, +100 */
.fx-spiele i { bottom: 18px; width: 30px; height: 30px; border-radius: 5px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .35);
  left: calc(50% - 64px + var(--i) * 32px); animation: fx-fallen 1.3s cubic-bezier(.5, 0, .7, .4) calc(var(--i) * .08s) both; }
.fx-spiele i:nth-child(1) { background: #3db4ff; } .fx-spiele i:nth-child(2) { background: #ffd23f; } .fx-spiele i:nth-child(3) { background: #ff5e7a; } .fx-spiele i:nth-child(4) { background: #4cd964; }
@keyframes fx-fallen { 0% { transform: translateY(-170px); opacity: 1; } 35% { transform: translateY(0); } 40% { transform: translateY(-5px); }
  45% { transform: translateY(0); background: inherit; } 60% { transform: translateY(0); filter: brightness(3); opacity: 1; } 80%, 100% { transform: translateY(0) scaleY(0); opacity: 0; } }
.fx-spiele .fx-punkte { left: 50%; bottom: 52px; font-size: 22px; color: #ffd23f; text-shadow: 0 2px 0 #b8860b, 0 0 14px rgba(255, 210, 63, .7); animation: fx-punkte 1.4s ease both; }
@keyframes fx-punkte { 0%, 50% { transform: translate(-50%, 10px) scale(.5); opacity: 0; } 65% { transform: translate(-50%, -6px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }

/* Welt der Wünsche: ein Wunschstern steigt auf und zerstiebt in Funken */
.fx-vrwelt .fx-stern { left: 50%; bottom: 0; font-size: 30px; filter: drop-shadow(0 0 14px #ffe9a8); animation: fx-stern 1.4s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes fx-stern { 0% { transform: translate(-50%, 20px) scale(.5) rotate(0); opacity: 0; } 15% { opacity: 1; }
  55% { transform: translate(-50%, -80px) scale(1.1) rotate(200deg); opacity: 1; } 62%, 100% { transform: translate(-50%, -84px) scale(2) rotate(220deg); opacity: 0; } }
.fx-vrwelt i { left: 50%; top: calc(100% - 84px - 14px); width: 7px; height: 7px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px #ffe9a8;
  animation: fx-funke 1.4s ease-out both; }
.fx-vrwelt i:nth-child(2) { --w: 0deg; } .fx-vrwelt i:nth-child(3) { --w: 60deg; background: #b9aaff; } .fx-vrwelt i:nth-child(4) { --w: 120deg; }
.fx-vrwelt i:nth-child(5) { --w: 180deg; background: #8fe3c8; } .fx-vrwelt i:nth-child(6) { --w: 240deg; } .fx-vrwelt i:nth-child(7) { --w: 300deg; background: #ff9ac2; }
@keyframes fx-funke { 0%, 55% { transform: rotate(var(--w)) translateX(0) scale(0); opacity: 0; } 62% { opacity: 1; transform: rotate(var(--w)) translateX(8px) scale(1.2); }
  100% { transform: rotate(var(--w)) translateX(64px) scale(.3); opacity: 0; } }

/* Maia: ein Haken zeichnet sich in einen Kreis */
.fx.fx-micos svg { position: absolute; inset: auto; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; translate: none; overflow: visible;
  filter: drop-shadow(0 0 16px rgba(63, 224, 168, .6)); animation: fx-maia 1.5s ease both; }
.fx-micos circle, .fx-micos path { fill: none; stroke: #3fe0a8; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-micos circle { fill: rgba(10, 31, 36, .75); stroke-dasharray: 151; stroke-dashoffset: 151; animation: fx-zeichnen .5s ease-out .05s forwards; }
.fx-micos path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-zeichnen .35s ease-out .5s forwards; }
@keyframes fx-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fx-maia { 0% { transform: scale(.7); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }

/* Pixel Animator: ein Pixel-Herz setzt sich Pixel für Pixel zusammen und pulsiert */
.fx-pixelanim .fx-herzpixel { left: 50%; top: 50%; width: 63px; height: 54px; translate: -50% -50%; animation: fx-pixelpuls 1.5s ease both; }
.fx-pixelanim .fx-herzpixel i { width: 8px; height: 8px; background: #ff6ab0; box-shadow: 0 0 6px rgba(255, 106, 176, .6); animation: fx-pixel .12s steps(1) calc(var(--i) * .022s) both; }
@keyframes fx-pixel { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-pixelpuls { 0%, 60% { transform: scale(1); opacity: 1; } 68% { transform: scale(1.25); } 76% { transform: scale(1); } 84% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* AnimFrame: Auslöser-Blitz, dann rauscht ein Filmstreifen durch */
.fx-animframe .fx-blitz { inset: 0; background: #fff; animation: fx-blitzen .45s ease-out both; }
@keyframes fx-blitzen { 0% { opacity: .85; } 100% { opacity: 0; } }
.fx-animframe .fx-film { left: 0; top: 50%; height: 50px; margin-top: -25px; display: flex; gap: 6px; padding: 8px 6px;
  background: #1b1612; border-block: 4px dotted #f3e9d8; animation: fx-film 1.3s cubic-bezier(.5, 0, .5, 1) .08s both; }
.fx-animframe .fx-film i { position: static; width: 44px; height: 30px; border-radius: 3px; background: linear-gradient(180deg, #8fd0ff 60%, #5fb948 60%); }
.fx-animframe .fx-film i::after { content: ""; display: block; width: 10px; height: 10px; margin: 4px auto 0; border-radius: 50%; background: #ff6b6b; }
.fx-animframe .fx-film i:nth-child(odd)::after { margin-top: 12px; }
@keyframes fx-film { 0% { transform: translateX(105%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-110%); opacity: 0; } }

/* Audio-Studio: sieben Equalizer-Balken springen im Takt */
.fx-daw { display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding-bottom: 14px; background: linear-gradient(0deg, rgba(17, 12, 29, .7), transparent 70%); animation: fx-weg 1.5s ease both; }
.fx-daw i { position: static; width: 12px; height: 10px; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, #a970ff, #ff6ab0 60%, #ffd23f);
  animation: fx-balken .36s ease-in-out calc(var(--i) * -.09s) 4 alternate both; }
.fx-daw i:nth-child(odd) { --h: 92px; } .fx-daw i:nth-child(even) { --h: 58px; } .fx-daw i:nth-child(4) { --h: 112px; }
@keyframes fx-balken { from { height: 10px; } to { height: var(--h); } }
@keyframes fx-weg { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Video-Editor: die Schere fährt die gestrichelte Linie entlang, das Bild klafft auf */
.fx-videoeditor .fx-linie { left: 0; right: 0; top: 50%; border-top: 2px dashed #fff; opacity: .9; animation: fx-linie 1.5s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes fx-linie { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 85% { clip-path: inset(0 0 0 0); opacity: 1; } 70% { box-shadow: 0 0 18px 4px rgba(255, 95, 109, .8); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.fx-videoeditor .fx-schere { left: 0; top: 50%; margin-top: -20px; font-size: 30px; color: #fff; text-shadow: 0 2px 10px #000;
  animation: fx-fahrt 1.3s cubic-bezier(.45, 0, .55, 1) both, fx-schnipp .16s ease-in-out 8 alternate both; }
@keyframes fx-fahrt { 0% { translate: -40px 0; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { translate: calc(100cqw + 10px) 0; opacity: 0; } }
@keyframes fx-schnipp { from { rotate: -16deg; } to { rotate: 10deg; } }
.fx-videoeditor { container-type: inline-size; }

/* PAP Engine: ein Schwerthieb blitzt diagonal, „LEVEL UP!" steigt in Pixelschrift auf */
.fx-papengine .fx-hieb { left: 50%; top: 50%; width: 140%; height: 6px; translate: -50% -50%; border-radius: 6px;
  background: linear-gradient(90deg, transparent, #fff 40%, #ffd23f 60%, transparent); box-shadow: 0 0 18px #ffd23f; animation: fx-hieb .6s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes fx-hieb { 0% { transform: rotate(-24deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }
.fx-papengine .fx-level { left: 50%; top: 50%; font: 900 24px/1 ui-monospace, monospace; letter-spacing: .06em; color: #ffd23f;
  text-shadow: 3px 3px 0 #7a1f3d, 0 0 18px rgba(255, 210, 63, .6); animation: fx-level 1.5s steps(12) .2s both; }
@keyframes fx-level { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }

/* JamSync: ein Ton von links, einer von rechts, sie treffen sich und es knallt bunt */
.fx-jamsync .fx-l, .fx-jamsync .fx-r { top: 50%; font-size: 34px; color: #e86bff; text-shadow: 0 0 14px #e86bff; }
.fx-jamsync .fx-l { left: 0; animation: fx-links .9s cubic-bezier(.4, 0, .6, 1) both; }
.fx-jamsync .fx-r { right: 0; color: #3fe0c5; text-shadow: 0 0 14px #3fe0c5; animation: fx-rechts .9s cubic-bezier(.4, 0, .6, 1) .15s both; }
@keyframes fx-links { 0% { transform: translate(-40px, -50%); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(30cqw, -90%); } 100% { transform: translate(calc(50cqw - 26px), -50%) scale(.6); opacity: 0; } }
@keyframes fx-rechts { 0% { transform: translate(40px, -50%); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(-30cqw, -10%); } 100% { transform: translate(calc(-50cqw + 26px), -50%) scale(.6); opacity: 0; } }
.fx-jamsync { container-type: inline-size; }
.fx-jamsync .fx-knall { left: 50%; top: 50%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 0 0 6px #e86bff, 0 0 0 12px #3fe0c5; animation: fx-knall .8s ease-out .95s both; }
@keyframes fx-knall { 0% { transform: scale(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(4); opacity: 0; } }