/* © 2026 Qder.ai. All rights reserved. Proprietary and confidential; see LICENSE. */
/* The diner's evening: a warm table, a table tent being scanned, one phone through the three moments of a meal out,
   and the steps lighting up in time. A 12 s loop, 4 s a moment. The first moment is what a page with no motion shows.
   Scenes switch with visibility and a small slide, never from opacity 0. It is the second screen, under the night
   panel and as wide as it. */
.dine {
  position: relative; margin: 12px 12px 0; border-radius: 40px; overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 196, 140, .45), transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(139, 165, 242, .35), transparent 45%),
    linear-gradient(160deg, #FFF8EF, #FDEEE0 55%, #F6E7F0);
  padding: clamp(56px, 7vw, 104px) 32px;
}
.dine-inner { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 44px; align-items: center; max-width: 1040px; margin: 0 auto; }

/* The table tent */
.dine-tent { margin: 0; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.dine-tent-card {
  width: 190px; padding: 18px 16px 14px; background: #fff; border-radius: 10px 10px 4px 4px;
  box-shadow: 0 18px 40px rgba(120, 72, 30, .16), 0 2px 0 #EDE3D6; text-align: center;
  transform: perspective(600px) rotateX(8deg); transform-origin: bottom;
}
.dine-mark { width: 22px; height: 22px; display: block; margin: 0 auto 6px; }
.dine-tent-card b { display: block; font-size: 17px; font-weight: 800; color: #111A33; margin-bottom: 10px; }
.dine-tent-card > span { display: block; margin-top: 8px; font-size: 12px; color: #4A5570; font-weight: 600; }
.dine-qr { position: relative; width: 112px; height: 112px; margin: 0 auto; overflow: hidden; }
.dine-qr svg { width: 100%; height: 100%; display: block; }
.dine-beam {
  position: absolute; left: -6px; right: -6px; top: 0; height: 3px; border-radius: 3px;
  background: #3767ED; box-shadow: 0 0 14px 4px rgba(55, 103, 237, .45); visibility: hidden;
  animation: dine-beam 12s linear infinite;
}
.dine-tent-foot { width: 210px; height: 14px; margin-top: -2px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(120, 72, 30, .22), transparent 70%); }

/* The phone */
.dine-phone {
  width: 300px; height: 480px; border-radius: 42px; background: #0A1230; padding: 11px; justify-self: center;
  box-shadow: 0 40px 80px rgba(10, 18, 48, .28), inset 0 0 0 2px #1D2A55;
}
.dine-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #F7F9FE; }
.dine-scene {
  position: absolute; inset: 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px;
  visibility: hidden; animation: 12s ease-in-out infinite;
}
.dine-scene:has(> .render) { padding: 0; }      /* the product's screen fills the phone */
.dine-scene.s1 { visibility: visible; animation-name: dine-s1; }
.dine-scene.s2 { animation-name: dine-s2; }
.dine-scene.s3 { animation-name: dine-s3; }
.dine-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid #E4E9F4; font-size: 13px; }
.dine-top span { color: #646E88; font-size: 12px; }
.dine-msg { margin: 0; font-size: 13.5px; line-height: 1.45; display: flex; gap: 6px; align-items: flex-end; }
.dine-msg span { padding: 9px 12px; border-radius: 16px; background: #EEF2FC; color: #080D1C; max-width: 210px; }
.dine-msg.me { align-self: flex-start; padding: 9px 12px; border-radius: 16px; background: #0B3FD9; color: #fff; max-width: 210px; }
.dine-qubi { width: 26px; height: auto; image-rendering: pixelated; flex: none; }
.dine-card { background: #fff; border: 1px solid #E4E9F4; border-radius: 14px; padding: 12px; font-size: 13px; }
.dine-card .row { display: flex; justify-content: space-between; }
.dine-card .row span, .dine-card small { color: #646E88; font-size: 12px; }
.dine-card .slots { display: flex; gap: 6px; margin-top: 10px; }
.dine-card .slots span { border: 1px solid #D5DEF5; border-radius: 99px; padding: 3px 9px; font-size: 12px; color: #0B3FD9; font-weight: 600; }
.dine-card .slots .pick { animation: dine-pick 12s steps(1) infinite; }
.dine-hello .langs { display: grid; }
.dine-hello .langs > span { grid-area: 1 / 1; background: none; padding: 0; visibility: hidden; animation: 12s steps(1) infinite; }
/* Inherits, never "visible": a child set visible shows through its hidden scene. */
.dine-hello .langs > span:nth-child(1) { visibility: inherit; animation-name: dine-l1; }
.dine-hello .langs > span:nth-child(2) { animation-name: dine-l2; }
.dine-hello .langs > span:nth-child(3) { animation-name: dine-l3; }
.dine-hello .langs > span:nth-child(4) { animation-name: dine-l4; }
.dine-hello > .langs { padding: 9px 12px; border-radius: 16px; background: #EEF2FC; }
.dine-chip { align-self: center; margin-top: 4px; font-size: 12px; font-weight: 700; color: #0F7A4A; background: #E3F6EC; border-radius: 99px; padding: 5px 12px; }
.dine-bill { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.dine-bill li { display: flex; justify-content: space-between; background: #fff; border: 1px solid #E4E9F4; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: #4A5570; }
.dine-bill li.you { border-color: #0B3FD9; color: #080D1C; box-shadow: 0 0 0 3px rgba(11, 63, 217, .12); }
.dine-pay { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: #0B3FD9; color: #fff; border-radius: 99px; padding: 12px 18px; font-size: 13.5px; font-weight: 700; }
.dine-paid { position: absolute; bottom: 22px; left: 16px; right: 16px; text-align: center; background: #0F7A4A; color: #fff; border-radius: 99px; padding: 12px; font-weight: 800; visibility: hidden; animation: dine-paid 12s steps(1) infinite; }

/* The steps */
.dine-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: dine; max-width: 300px; }
.dine-steps li { counter-increment: dine; position: relative; padding: 14px 16px 14px 16px; padding-inline-start: 52px; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); animation: 12s steps(1) infinite; }
.dine-steps li::before { content: counter(dine); position: absolute; inset-inline-start: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E4E9F4; color: #4A5570; font-weight: 800; font-size: 13px; animation: inherit; animation-name: dine-dot; }
.dine-steps b { display: block; font-size: 15px; color: #080D1C; }
.dine-steps span { display: block; font-size: 13px; color: #4A5570; margin-top: 2px; line-height: 1.45; }
.dine-steps .t1 { animation-name: dine-t1; }
.dine-steps .t2 { animation-name: dine-t2; }
.dine-steps .t3 { animation-name: dine-t3; }
.dine-steps .t2::before { animation-delay: -8s; }
.dine-steps .t3::before { animation-delay: -4s; }

/* The loop: s1 0-33%, s2 33-66%, s3 66-100%. */
@keyframes dine-s1 { 0%, 31% { visibility: visible; transform: none; } 33%, 98% { visibility: hidden; transform: translateX(-18px); } 100% { visibility: visible; transform: none; } }
@keyframes dine-s2 { 0%, 31% { visibility: hidden; transform: translateX(18px); } 33%, 64% { visibility: visible; transform: none; } 66%, 100% { visibility: hidden; transform: translateX(-18px); } }
@keyframes dine-s3 { 0%, 64% { visibility: hidden; transform: translateX(18px); } 66%, 98% { visibility: visible; transform: none; } 100% { visibility: hidden; } }
@keyframes dine-beam { 0%, 33% { visibility: hidden; top: 0; } 34% { visibility: visible; top: 0; } 44% { visibility: visible; top: 109px; } 45%, 100% { visibility: hidden; top: 109px; } }
@keyframes dine-pick { 0%, 14% { background: transparent; color: #0B3FD9; } 15%, 33% { background: #0B3FD9; color: #fff; } 34%, 100% { background: transparent; color: #0B3FD9; } }
@keyframes dine-l1 { 0%, 32% { visibility: hidden; } 33%, 40% { visibility: visible; } 41%, 100% { visibility: hidden; } }
@keyframes dine-l2 { 0%, 40% { visibility: hidden; } 41%, 48% { visibility: visible; } 49%, 100% { visibility: hidden; } }
@keyframes dine-l3 { 0%, 48% { visibility: hidden; } 49%, 56% { visibility: visible; } 57%, 100% { visibility: hidden; } }
@keyframes dine-l4 { 0%, 56% { visibility: hidden; } 57%, 65% { visibility: visible; } 66%, 100% { visibility: hidden; } }
@keyframes dine-paid { 0%, 84% { visibility: hidden; } 85%, 98% { visibility: visible; } 99%, 100% { visibility: hidden; } }
@keyframes dine-t1 { 0%, 32% { background: #fff; border-color: #0B3FD9; box-shadow: 0 10px 24px rgba(11, 63, 217, .12); } 33%, 100% { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: none; } }
@keyframes dine-t2 { 0%, 32% { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: none; } 33%, 65% { background: #fff; border-color: #0B3FD9; box-shadow: 0 10px 24px rgba(11, 63, 217, .12); } 66%, 100% { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: none; } }
@keyframes dine-t3 { 0%, 65% { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); box-shadow: none; } 66%, 100% { background: #fff; border-color: #0B3FD9; box-shadow: 0 10px 24px rgba(11, 63, 217, .12); } }
@keyframes dine-dot { 0%, 32% { background: #0B3FD9; color: #fff; } 33%, 100% { background: #E4E9F4; color: #4A5570; } }

@media (max-width: 960px) {
  .dine { padding: 48px 16px; border-radius: 28px; }
  .dine-inner { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .dine-phone { order: -1; }
  .dine-tent { display: none; }
  .dine-steps { max-width: 360px; width: 100%; }
}
@media (max-width: 680px) { .dine { margin: 8px 8px 0; } }
@media (max-width: 380px) { .dine-phone { width: 280px; height: 470px; } }

/* No motion: the first moment and its step, still. */
@media (prefers-reduced-motion: reduce) {
  .dine *, .dine *::before { animation: none !important; }
  .dine-steps .t1 { background: #fff; border-color: #0B3FD9; }
  .dine-steps .t1::before { background: #0B3FD9; color: #fff; }
}
html.qa11y-still .dine *, html.qa11y-still .dine *::before { animation: none !important; }

/* The top of the page is night blue; the evening stays as the light behind the phones and in this band. */

/*
 * The diners page's close: a night sky across the whole width. It fades in from the white of the questions above,
 * the mascot floats in a little moonlight, and the clouds across its foot (cut from their middle on a phone)
 * dissolve into the footer, which carries on the same night. The box is the hero's question box.
 */
.m main > section.sky-close { padding: 0; background: none; }
.sky-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 250px 24px 340px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, #fff 0, #DDE3F6 90px, #7686C6 220px, #2C3A78 360px, #131C45 540px, #0A1024 740px);
}
.sky-card::after {           /* the clouds' foot, dissolving into the footer's night */
  content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 16, 36, 0), #0A1024 92%);
}
.sky-clouds {
  position: absolute; z-index: -1; left: 50%; bottom: 0;
  width: max(100%, 1100px); max-width: none; height: auto; translate: -50% 0; pointer-events: none;
}
.sky-qubi { position: relative; display: block; width: 84px; animation: sky-bob 5.5s ease-in-out infinite; }
.sky-qubi::before {          /* the moonlight the mascot floats in */
  content: ""; position: absolute; inset: -34px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 232, 255, .55), rgba(150, 172, 255, .2) 60%, transparent);
}
.sky-qubi img { display: block; width: 84px; height: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)); }
@keyframes sky-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.sky-card h2 {
  margin-top: 30px; max-width: 16em;
  font-size: clamp(32px, 4.8vw, 60px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: #fff;
}
.sky-ask {
  position: relative; width: min(720px, 100%); margin-top: 34px; padding: 20px 22px 62px;
  border-radius: 22px; text-align: start; background: #fff;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 8px rgba(255, 255, 255, .06);
  transition: box-shadow .2s var(--ease);
}
.sky-ask:focus-within { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 5px rgba(122, 156, 255, .6); }
.sky-ask textarea {
  display: block; width: 100%; min-height: 52px; padding: 0; resize: none;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17.5px; line-height: 1.5; color: var(--ink);
}
.sky-ask textarea::placeholder { color: #6B7489; }
.sky-go {
  position: absolute; inset-inline-end: 14px; bottom: 14px;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: var(--cobalt); color: #fff; cursor: pointer;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.sky-go:hover { background: var(--cobalt-press); transform: translateY(-1px); }
.sky-alt { margin-top: 18px; font-size: 15px; }
.sky-alt a { color: rgba(255, 255, 255, .84); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.sky-alt a:hover { color: #fff; text-decoration-color: currentColor; }
.sky-alt a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 680px) {
  .sky-card { padding: 190px 18px 240px; }
  .sky-clouds { width: 820px; }
  .sky-qubi, .sky-qubi img { width: 68px; }
  .sky-ask textarea { min-height: 80px; }          /* a long example wraps to a third line on a narrow phone */
}
@media (prefers-reduced-motion: reduce) { .sky-qubi { animation: none; } }
html.qa11y-still .sky-qubi { animation: none; }