/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* Qder.ai, the film's kitchen scene as a CSS loop, for the business hero.
   Same markup as the landing page's act 5; here the loop runs on its own. */
:root { --line: #E4E9F4; --wash: #EDF2FE; --muted: #7A849C; --lift: #3767ED; --ok: #0E7C4A; --okbg: #E6F6EE; --crit: #C0341D; --critbg: #FBE9EE; --warn: #A15C00; --warnbg: #FFF4E0; }
  /* ------------------------------------------------------------- the phone
     Straight out of the film: the same bezel, the same screens, on daylight. */
  .stage-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr minmax(0, 460px); align-items: center; gap: clamp(1.5rem, 4vw, 5rem); padding: 0 clamp(1rem, 6vw, 8rem); }
  .stage-grid .words { max-width: 30rem; }
  .stage-grid .words .sc-display { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem); }
  .stage-grid .words .sc-body { margin-top: 1rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--sc-ink-soft); max-width: 26rem; }
  .phone { position: relative; width: min(390px, 42vw); aspect-ratio: 420 / 860; margin-inline: auto; border-radius: 13.8%/6.7%; background: #0d1222;
           box-shadow: 0 50px 100px -30px rgba(8,13,28,.45), inset 0 0 0 2px #2a3352, inset 0 0 0 8px #0d1222; }
  .phone .screen { position: absolute; inset: 2.9%; border-radius: 12%/5.9%; overflow: hidden; background: #fff; color: #080D1C; font-family: var(--sc-font-text); font-size: 15px; }
  .phone .notch { position: absolute; top: 3.5%; left: 50%; width: 28%; height: 4%; translate: -50% 0; border-radius: 20px; background: #0d1222; z-index: 5; }
  .ph-top { height: 24%; max-height: 118px; padding: 13% 5% 0; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
  .ph-top img { width: 26px; height: 26px; }
  .ph-top b { display: block; font-weight: 700; font-size: 1.05em; } .ph-top span { font-size: .82em; color: var(--muted); }
  .scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--sc-canvas); }
  .msgs { flex: 1; padding: 4% 4%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; }
  .msg { max-width: 88%; padding: 10px 12px; border-radius: 16px 16px 16px 6px; background: #fff; border: 1px solid var(--line); line-height: 1.38; font-size: .98em; align-self: flex-start; }
  .msg.me { align-self: flex-end; background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); border-radius: 16px 16px 6px 16px; }
  .msg[hidden] { display: none; }
  .dots { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
  .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
  .dots i:nth-child(2) { animation-delay: .15s } .dots i:nth-child(3) { animation-delay: .3s }
  @keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5 } 40% { transform: translateY(-3px); opacity: 1 } }
  .composer { padding: 9px 10px 7%; background: #fff; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
  .composer .in { flex: 1; min-width: 0; height: 42px; border-radius: 12px; border: 1px solid var(--line); padding: 0 12px; font: inherit; color: var(--sc-ink); background: #fff; }
  .composer .in::placeholder { color: var(--muted); }
  .composer .in:disabled { color: var(--sc-ink); -webkit-text-fill-color: var(--sc-ink); opacity: 1; }
  .composer .send { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--sc-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .composer .send svg { width: 18px; height: 18px; }
  .composer .send:disabled { opacity: .45; cursor: default; }
  .caret::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--sc-accent); margin-inline-start: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0 } }
  .live-note { margin-top: .8rem; font-size: .9rem; color: var(--muted); }
  .phone[data-live="1"] .composer .in { border-color: var(--sc-accent); box-shadow: 0 0 0 3px var(--wash); }

  .rows { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .row { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; font-size: .95em; }
  .row small { display: block; color: var(--muted); font-size: .82em; margin-top: 1px; } .row b { font-weight: 700; }
  .tag { display: inline-block; font-size: .72em; border-radius: 999px; padding: 2px 7px; margin-inline-start: 6px; font-weight: 700; }
  .tag.ok { color: var(--ok); background: var(--okbg); } .tag.crit { color: var(--crit); background: var(--critbg); } .tag.warn { color: var(--warn); background: var(--warnbg); }
  .total { margin: 2px 14px 0; display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05em; }
  .ph-cta { margin: auto 12px 8%; height: 50px; border-radius: 14px; background: var(--sc-accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
  .paidscr { align-items: center; justify-content: center; text-align: center; gap: 6px; background: #fff; }
  .paidscr svg { width: 34%; }
  .paidscr h4 { font: 800 1.9em var(--sc-font-display); margin: 6px 0 0; } .paidscr .amt { color: var(--sc-accent); font-weight: 700; font-size: 1.4em; } .paidscr p { color: var(--sc-ink-soft); font-size: .92em; margin: 2px 0 0; }
  .card { margin: 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
  .card h4 { font: 800 1.2em var(--sc-font-display); margin: 0; } .card p { color: var(--sc-ink-soft); margin: 4px 0 0; font-size: .92em; line-height: 1.45; }
  .card .btns { display: flex; gap: 6px; margin-top: 10px; } .card .btns span { flex: 1; text-align: center; padding: 8px; border-radius: 10px; font-weight: 700; font-size: .85em; border: 1.5px solid var(--sc-accent); color: var(--sc-accent); }
  .card .btns span.on { background: var(--sc-accent); color: #fff; }
  .sect { padding: 10px 14px 0; font-size: .74em; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
  .danger { margin: auto 12px 8%; height: 46px; border-radius: 14px; border: 1.5px solid var(--critbg); color: var(--crit); background: #fff; display: grid; place-items: center; font-weight: 700; }

  /* -------------------------------------------------------- the kitchen */
  .kds { position: relative; width: min(700px, 92vw); aspect-ratio: 700 / 520; border-radius: 22px; background: #0f1524; color: #fff; overflow: hidden;
         box-shadow: 0 50px 100px -30px rgba(8,13,28,.55), inset 0 0 0 1.5px #232b44; font-family: var(--sc-font-text); font-size: clamp(11px, 1.3vw, 15px); }
  .kds .bar2 { height: 13%; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; background: #141b30; border-bottom: 1px solid #232b44; font-weight: 700; font-size: 1.15em; }
  .kds .bar2 span { color: #8b96b5; font-weight: 600; font-size: .85em; }
  .ticket { position: absolute; width: 41%; border-radius: 12px; background: #fff; color: #080D1C; padding: 3% 3.2%; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); }
  .ticket .h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 5%; margin-bottom: 5%; }
  .ticket .h b { font: 800 1.35em var(--sc-font-display); } .ticket .h span { color: var(--muted); font-size: .85em; }
  .ticket ul { list-style: none; margin: 0; padding: 0; } .ticket li { display: flex; gap: 8px; padding: 3% 0; } .ticket li em { font-style: normal; font-weight: 700; color: var(--sc-accent); width: 1.2em; }
  .ticket .al { margin-top: 6%; background: var(--critbg); color: var(--crit); font-weight: 700; padding: 5% 7%; border-radius: 9px; font-size: .85em; }
  .ticket .st { margin-top: 6%; display: inline-block; padding: 3% 7%; border-radius: 999px; background: var(--wash); color: var(--sc-accent); font-weight: 700; font-size: .8em; }
  .ticket.dim { opacity: .5; }
  .toggle { position: absolute; left: 4%; bottom: 5%; width: 44%; background: #141b30; border: 1px solid #232b44; border-radius: 14px; padding: 3% 3.5%; display: flex; justify-content: space-between; align-items: center; }
  .toggle small { display: block; color: #8b96b5; font-size: .82em; }
  .sw { width: 44px; height: 24px; border-radius: 999px; background: #2a3352; position: relative; flex: 0 0 auto; } .sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s var(--sc-ease-out); }
  .sw.on { background: var(--crit); } .sw.on i { left: 23px; }
  .kitchen-grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem); padding: 0 clamp(1rem, 6vw, 8rem); }
  .kitchen-grid .words .sc-display { font-size: clamp(1.9rem, 1.2rem + 3vw, 4.2rem); }
  .kitchen-grid .words .sc-body { margin-top: 1rem; color: var(--sc-ink-soft); font-size: clamp(1rem, .9rem + .5vw, 1.3rem); max-width: 24rem; }
  .mini { position: absolute; right: -9%; bottom: -13%; width: 27%; rotate: -4deg; }


.scene { position: relative; }
.scene .kds { width: 100%; }
.scene .ticket.land { opacity: 0; animation: land 9s infinite var(--sc-ease-out, ease-out); }
.scene .sw { animation: flip 9s infinite step-end; } .scene .sw i { animation: knob 9s infinite step-end; }
.scene #miniLasagna { animation: leave 9s infinite ease-in; }
@keyframes land { 0% { opacity: 0; transform: translateY(-30px) } 12% { opacity: 0; transform: translateY(-30px) } 22% { opacity: 1; transform: none } 95% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes flip { 0%, 44% { background: #2a3352 } 45%, 100% { background: var(--crit) } }
@keyframes knob { 0%, 44% { left: 3px } 45%, 100% { left: 23px } }
@keyframes leave { 0%, 48% { opacity: 1; transform: none; margin-bottom: 0 } 62%, 100% { opacity: 0; transform: translateX(-160px); margin-bottom: -46px } }
@media (prefers-reduced-motion: reduce) {
  .scene .ticket.land, .scene .sw, .scene .sw i, .scene #miniLasagna { animation: none; }
  .scene .ticket.land { opacity: 1; } .scene .sw { background: var(--crit); } .scene .sw i { left: 23px; } .scene #miniLasagna { display: none; }
}