/* ==========================================================================
   GENESYS LABS · CAPITOLO MATEN · il sistema intero
   La scena della card di prima (e504b95, 23/10): il sito matensushi.it dove
   il cliente ordina, la targa del tavolo col QR, il pannello del locale e
   l'app dei rider con la mappa. Le quattro finestre sono disposte in verticale
   per la tela del capitolo (22em × 26em): il palco è largo 44 unità.
   Colori e caratteri sono quelli del marchio Matèn (Marcellus, Jost, oro).
   ========================================================================== */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/marcellus.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../vendor/fonts/jost.woff2) format('woff2'); }

.fr-maten[data-ui] {
  --lacca: #151515;
  --lacca-2: #1c1b1a;
  --lacca-3: #252321;
  --filo: #35312c;
  --oro: #e3c79c;
  --oro-2: #b58a5c;
  --carta: #f2ebdf;
  --nebbia: #aaa196;
  position: relative; width: 22em; height: 26em; font-size: var(--fr-fs, 14px); text-align: left;
}
.fr-maten[data-ui] *, .fr-maten[data-ui] *::before, .fr-maten[data-ui] *::after { box-sizing: border-box; }
/* la scena si muove solo quando il capitolo è davanti */
.fr-maten[data-attivo="false"] * { animation-play-state: paused !important; }

.mt-palco {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  font-size: .5em;
  font-family: 'Jost', var(--font), sans-serif;
  color: var(--carta);
  line-height: 1.3;
}
.mt-palco p { margin: 0; }
.mt-palco img { display: block; max-width: none; }

/* la profondita': ogni schermo segue il mouse con la sua misura (--d) */
.mt-fin, .mt-telefono, .mt-targa {
  position: absolute;
  translate: calc(var(--px, 0) * var(--d, 0) * 1px) calc(var(--py, 0) * var(--d, 0) * .7px);
}

.mt-fin {
  border-radius: 1.1em;
  overflow: hidden;
  background: #121212;
  border: .1em solid rgba(227, 199, 156, .2); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  box-shadow: 0 2.6em 5em -1.8em rgba(0, 0, 0, .85), 0 0 0 .08em rgba(0, 0, 0, .35); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
.mt-barra {
  display: flex;
  align-items: center;
  gap: 1.1em;
  height: 2.5em;
  padding: 0 1.1em;
  background: var(--lacca-2);
  border-bottom: .08em solid #2c2926;
}
.mt-semafori { display: flex; gap: .45em; }
/* la finestra del pannello e' un'app installata: al posto dell'indirizzo c'e' il nome */
.mt-titolo-app { flex: 1; margin-right: 3.4em; text-align: center; font-size: .86em; font-weight: 500; color: var(--nebbia); letter-spacing: .02em; } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.mt-semafori i { width: .72em; height: .72em; border-radius: 50%; background: #3b3733; }
.mt-url {
  display: flex;
  align-items: center;
  gap: .55em;
  height: 1.6em;
  max-width: 19em;
  flex: 1;
  padding: 0 .9em;
  border-radius: 99px;
  background: #121212;
  font: 500 .9em/1 inherit;
  color: var(--nebbia);
  white-space: nowrap;
}
.mt-url i { font-size: .78em; color: var(--oro-2); }

.mt-avatar {
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  object-fit: cover;
  border: .12em solid rgba(227, 199, 156, .5); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  background: #151515;
}
.mt-wordmark { height: 1.55em; width: auto; }

/* ── 1 · il sito: matensushi.it ───────────────────────────────────────── */
.mt-sito { left: 0; top: 0; width: 38em; height: 23.8em; z-index: 1; }
/* ── la finestra del sito: matensushi.it com'è oggi (regole e misure da matensushi.it, 24/10) ──
   .ms è largo 1440 unità come il sito: font-size = 38em / 1440, quindi qui dentro 1em = 1px del sito. */
.mt-sito .ms { position: absolute; left: 0; right: 0; top: 94.7em; bottom: 0;   /* sotto la barra dell'indirizzo (2,5em della finestra) */ overflow: hidden; font-size: calc(38em / 1440); background: #151515; color: var(--carta); font-family: 'Jost', Arial, sans-serif; }
.ms p { margin: 0; }
.ms-testata { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 84em; padding: 0 56em; display: flex; align-items: center; justify-content: space-between; background: #151515; border-bottom: 1em solid #35312c; }
.ms-marchio { display: flex; align-items: center; gap: 14em; }
.ms-avatar { width: 48em; height: 48em; border-radius: 50%; box-shadow: 0 0 0 2em rgba(227, 199, 156, .25); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-scritta { height: 30em; width: auto; }
.ms-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 30em; }
.ms-nav span { font-size: 16em; color: #cfc6b8; }
.ms-azioni { display: flex; align-items: center; gap: 14em; }
.ms-carrello { width: 44em; height: 44em; border-radius: 50%; display: grid; place-items: center; background: #24211d; border: 1em solid #35312c; }
.ms-carrello i { font-size: 17em; color: var(--carta); }
.ms-ordina { font: 600 17em/2.6 'Jost', Arial, sans-serif; padding: 0 1.3em; border-radius: 999px; background: var(--oro); color: var(--lacca); }
.ms-eroe { position: absolute; left: 0; right: 0; top: 0; bottom: 147em; overflow: hidden; }   /* come sul sito: la foto passa anche sotto la testata */
.ms-foto, .ms-velo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.ms-foto img { position: absolute; left: 0; top: -39em; width: 1440em; height: 928em; max-width: none; }   /* object-fit: cover a 1440 × 750, posizione 50% 22% */
.ms-velo { background: linear-gradient(rgba(21, 21, 21, .8), rgba(21, 21, 21, 0) 168em), linear-gradient(90deg, rgba(21, 21, 21, .94) 0%, rgba(21, 21, 21, .8) calc(50% - 160em), rgba(21, 21, 21, .2) calc(50% + 240em), rgba(21, 21, 21, .42) 100%), linear-gradient(to top, #151515 0%, rgba(21, 21, 21, 0) 26%), radial-gradient(circle at 74% 46%, rgba(12, 11, 10, 0) 34%, rgba(12, 11, 10, .55) 72%); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-testo { position: absolute; left: 100em; top: 268em; width: 640em; }
.ms-pre { font: 500 18em/1.2 'Jost', Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-nome { margin-top: .09em !important; font: 400 132em/.92 'Marcellus', Georgia, serif; letter-spacing: .03em; color: #f7ead3; text-shadow: 0 0 .3em rgba(255, 186, 110, .45); white-space: nowrap; } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-lead { margin-top: 1.25em !important; font-size: 19em; line-height: 1.6; color: #e4dccf; }
.ms-aperto { display: inline-flex; align-items: center; gap: .65em; margin-top: 1.4em !important; padding: .55em .95em; font-size: 15em; border-radius: 999px; background: rgba(21, 21, 21, .6); border: .07em solid #35312c; }
.ms-aperto i { width: .6em; height: .6em; border-radius: 50%; background: #5bc27a; box-shadow: 0 0 0 .2em rgba(91, 194, 122, .22); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-lame { position: absolute; left: 1040em; top: 222em; display: flex; align-items: flex-start; gap: 24em; }
.ms-lama { position: relative; display: block; padding: 22em 14em 18em; border-radius: 3em; background: linear-gradient(180deg, #20242b, #191c21); border: 1em solid rgba(227, 199, 156, .24); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  box-shadow: 0 22em 44em -20em rgba(0, 0, 0, .85), 0 0 48em -6em rgba(255, 180, 100, .2); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-lama::before { content: ''; position: absolute; left: 50%; top: -26em; width: 2em; height: 26em; margin-left: -1em; background: #6b6156; }
.ms-lama span { display: block; writing-mode: vertical-rl; text-orientation: upright; font: 400 26em/1 'Marcellus', Georgia, serif; letter-spacing: .04em; color: #f4d9ad; text-shadow: 0 0 .55em rgba(255, 190, 110, .42); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.ms-lama-2 { margin-top: 52em; rotate: -3deg; }
.ms-lama-3 { margin-top: 20em; rotate: 2deg; }
.ms-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 147em; display: flex; align-items: center; gap: 36em; padding: 0 100em; background: #151515; }
.ms-chiedi { font: 400 26em/1.15 'Marcellus', Georgia, serif; white-space: nowrap; }
.ms-scelte { display: grid; grid-template-columns: 378em 378em; gap: 14em; }
.ms-scelta { min-height: 88em; padding: 16em 20em; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16em; row-gap: 2em; align-items: center; border-radius: 16em; background: #1c1b1a; border: 1em solid #57504a; }
.ms-scelta > i { grid-area: 1 / 1 / span 2; font-size: 20em; color: var(--oro); }
.ms-scelta b { grid-area: 1 / 2; align-self: end; font: 400 22em/1.15 'Marcellus', Georgia, serif; }
.ms-scelta small { grid-area: 2 / 2; align-self: start; font-size: 15em; color: var(--nebbia); }
.ms-scelta em { grid-area: 1 / 3 / span 2; width: 34em; height: 34em; border-radius: 50%; display: grid; place-items: center; border: 1em solid #57504a; color: var(--oro); }
.ms-scelta em i { font-size: 13em; }
.ms-scelta-oro { background: var(--oro); border-color: var(--oro); color: var(--lacca); }
.ms-scelta-oro > i { color: var(--lacca); }
.ms-scelta-oro small { color: #5e4a2e; }
.ms-scelta-oro em { background: var(--lacca); border-color: var(--lacca); color: #fff; }
.ms-tavolo { display: flex; flex-direction: column; align-items: flex-start; gap: 8em; padding-left: 32em; border-left: 1em solid #35312c; }
.ms-tavolo > span:first-child { font-size: 15em; color: var(--nebbia); white-space: nowrap; }
.ms-wa { display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.3em; font-size: 15em; font-weight: 600; white-space: nowrap; color: #25d366; border-radius: 999px; background: rgba(37, 211, 102, .1); border: .07em solid rgba(37, 211, 102, .35); }

/* ── 2 · la targa del tavolo (QR) ─────────────────────────────────────── */
.mt-targa {
  left: 28.4em;
  top: 32.6em;
  z-index: 4;                 /* sopra il pannello, un poco più piccola e nell'angolo: il QR resta tutto in vista */
  transform: scale(.82);
  transform-origin: 100% 100%;
  width: 15.6em;
  height: 19.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8em;
  padding: 1.3em 1em 1.1em;
  border-radius: 1em;
  background: linear-gradient(170deg, #201f1d, #131312); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  border: .12em solid rgba(227, 199, 156, .38); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  box-shadow: 0 2em 4em -1.6em rgba(0, 0, 0, .85), inset 0 0 0 .3em #131312, inset 0 0 0 .38em rgba(227, 199, 156, .16); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  rotate: 3.5deg;
}
.mt-targa .mt-wordmark { height: 1.9em; }
.mt-targa-testo { font: 400 .92em/1.3 'Marcellus', Georgia, serif; text-align: center; color: var(--carta); }
.mt-qr { width: 8.4em; padding: .55em; border-radius: .55em; background: var(--carta); }
.mt-qr svg { display: block; width: 100%; height: auto; }
.mt-targa-n { font: 400 .95em/1 'Marcellus', Georgia, serif; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */

/* ── 3 · il pannello del locale ───────────────────────────────────────── */
.mt-admin { left: 4.5em; top: 19em; width: 39.5em; height: 24.8em; z-index: 2; }
.mt-admin-corpo { padding: 1em 1.1em; }
.mt-admin-testa { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.mt-admin-testa .mt-avatar { width: 2.1em; height: 2.1em; }
.mt-tabs { display: flex; gap: .45em; }
.mt-tabs b {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em .95em;
  border-radius: 99px;
  font-size: .82em;
  font-weight: 500;
  color: var(--nebbia);
  box-shadow: inset 0 0 0 .08em var(--filo); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
.mt-tabs b.on { background: rgba(227, 199, 156, .14); box-shadow: inset 0 0 0 .08em rgba(227, 199, 156, .5); color: var(--oro); font-weight: 600; } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.mt-tabs i {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .35em;
  border-radius: 99px;
  background: var(--oro);
  color: var(--lacca);
  font: 700 .86em/1 var(--font);
}
.mt-campana { position: relative; margin-left: auto; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; box-shadow: inset 0 0 0 .08em var(--filo); color: var(--oro); font-size: .95em; } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
.mt-campana em {
  position: absolute;
  top: -.25em;
  right: -.2em;
  display: grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  border-radius: 99px;
  background: #ec8f78;
  color: #2a0f08;
  font: 700 .7em/1 var(--font);
  animation: mt-campana 2.6s ease-in-out infinite;
}
.mt-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.mt-col { display: flex; flex-direction: column; gap: .55em; min-width: 0; }
.mt-col-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .2em .1em;
  font-size: .8em;
  font-weight: 500;
  color: var(--nebbia);
  white-space: nowrap;
}
.mt-col-h b {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .3em;
  border-radius: 99px;
  background: var(--lacca-3);
  color: var(--carta);
  font: 600 .9em/1 var(--font);
}
.mt-ord {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .2em .55em;
  padding: .7em .8em;
  border-radius: .8em;
  background: var(--lacca-2);
  box-shadow: inset 0 0 0 .08em var(--filo); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  min-width: 0;
}
.mt-ord-n { font-size: .76em; font-weight: 700; color: var(--oro); }
.mt-ord-chi { font-size: .84em; font-weight: 500; color: var(--carta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-ord-t { font-size: .68em; color: var(--nebbia); white-space: nowrap; }
.mt-ord small { grid-column: 1 / -1; font-size: .7em; color: var(--nebbia); }
.mt-ord-nuovo {
  background: rgba(227, 199, 156, .1);
  box-shadow: inset 0 0 0 .1em rgba(227, 199, 156, .65), 0 0 1.6em -.3em rgba(227, 199, 156, .45); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  animation: mt-nuovo 3.2s ease-in-out infinite;
}
.mt-ord-ok {
  grid-column: 1 / -1;
  margin-top: .3em;
  padding: .5em 0;
  border-radius: 99px;
  background: var(--oro);
  color: var(--lacca);
  font-size: .74em;
  font-weight: 700;
  text-align: center;
}
.mt-ord-pronto { box-shadow: inset 0 0 0 .08em rgba(227, 199, 156, .38); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */

/* ── 4 · l'app dei rider ──────────────────────────────────────────────── */
.mt-telefono {
  left: 0;
  top: 25.3em;
  z-index: 3;
  width: 14.7em;
  height: 26.7em;
  padding: .45em;
  border-radius: 2.5em;
  background: #0a0a0a;
  box-shadow: 0 0 0 .12em #3a3631, 0 2.6em 5em -1.4em rgba(0, 0, 0, .9); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
.mt-schermo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.1em;
  background: #1a1918;
}
.mt-mappa { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
.mt-pin text { font-family: 'Jost', sans-serif; }
.mt-percorso { animation: mt-scorre 1.4s linear infinite; }
/* il rider: un punto d'oro che fa il giro delle tre consegne. Le tappe sono
   le stesse del percorso nel disegno (in percentuale dello schermo) */
.mt-rider {
  position: absolute;
  left: 32.6%;
  top: 26%;
  width: 1.15em;
  height: 1.15em;
  margin: -.575em 0 0 -.575em;
  border-radius: 50%;
  background: #fff3da;
  box-shadow: 0 0 0 .22em rgba(227, 199, 156, .75), 0 0 1.4em .3em rgba(227, 199, 156, .6); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  animation: mt-giro 14s linear infinite;
}
.mt-pillola {
  position: absolute;
  top: 1.2em;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: .2em;
  padding: .25em;
  border-radius: 99px;
  background: rgba(21, 21, 21, .92);
  box-shadow: inset 0 0 0 .08em var(--filo), 0 .5em 1.2em rgba(0, 0, 0, .5); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  font-size: .68em;
  white-space: nowrap;
}
.mt-pillola b { padding: .6em 1.2em; border-radius: 99px; font-weight: 500; color: var(--nebbia); }
.mt-pillola b.on { background: var(--oro); color: var(--lacca); font-weight: 600; }
.mt-foglio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .55em 1em 1.1em;
  border-radius: 1.6em 1.6em 0 0;
  background: var(--lacca-2);
  box-shadow: 0 -.9em 2em rgba(0, 0, 0, .5), inset 0 .08em 0 var(--filo); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
.mt-linguetta { display: block; width: 2.8em; height: .3em; margin: 0 auto .8em; border-radius: 99px; background: #4a453e; }
.mt-tappa { display: flex; align-items: center; gap: .8em; margin-bottom: .9em; }
.mt-lettera {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--oro);
  color: var(--lacca);
  font: 700 1em/1 'Jost', sans-serif;
}
.mt-tappa b { display: block; font-size: .92em; font-weight: 600; color: var(--carta); }
.mt-tappa small { display: block; font-size: .72em; color: var(--nebbia); }
.mt-azioni { display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: .45em; }
.mt-azioni span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .75em 0;
  border-radius: 99px;
  font-size: .7em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--carta);
  box-shadow: inset 0 0 0 .1em var(--filo); /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
.mt-azioni i { font-size: .9em; color: var(--oro); }
.mt-azioni .mt-azione-oro { background: var(--oro); color: var(--lacca); box-shadow: none; } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */

/* ── Il movimento: poco e vero ────────────────────────────────────────── */
@keyframes mt-scorre { to { stroke-dashoffset: -8; } }
@keyframes mt-nuovo {
  0%, 100% { box-shadow: inset 0 0 0 .1em rgba(227, 199, 156, .45), 0 0 .6em -.3em rgba(227, 199, 156, .2); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
  50%      { box-shadow: inset 0 0 0 .1em rgba(227, 199, 156, .95), 0 0 1.8em -.2em rgba(227, 199, 156, .6); } /* taste-skill-ignore: la scena vera del Matèn (marchio e app) */
}
@keyframes mt-campana {
  0%, 100% { scale: 1; }
  8%       { scale: 1.25; }
  16%      { scale: 1; }
}
/* le tappe del giro, in percentuale dello schermo: Maten > A > B > C */
@keyframes mt-giro {
  0%     { left: 21.7%; top: 58.9%; opacity: 0; }
  3%     { opacity: 1; }
  23.2%  { left: 68.8%; top: 58.9%; }
  37.5%  { left: 68.8%; top: 43.4%; }
  55.4%  { left: 32.6%; top: 43.4%; }
  71.4%  { left: 32.6%; top: 26%; }
  91.1%  { left: 72.5%; top: 26%; }
  97%    { opacity: 1; }
  100%   { left: 72.5%; top: 16.3%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-percorso, .mt-rider, .mt-ord-nuovo, .mt-campana em { animation: none; }
}