/* Landing page only (Views/Home/Index): the animated hero demo, the illustrations, the interactive stepper and the
   video modal. Driven by js/landing.js. Everything respects prefers-reduced-motion (final state shown, no motion). */

/* ───────── hero demo: WhatsApp on the left, the shop's queue + printer on the right ───────── */
.hero-visual { display: block; }
.demo { position: relative; display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 16px 16px 48px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); }
.demo::before { content: "LIVE DEMO"; position: absolute; top: -11px; left: 18px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.demo-phone { background: #0f172a; border-radius: 22px; padding: 8px; min-height: 300px; display: flex; flex-direction: column; }
.demo-phone-top { display: flex; align-items: center; gap: 8px; color: #fff; padding: 8px 8px 10px; }
.demo-phone-top b { display: block; font-size: 12.5px; } .demo-phone-top small { display: block; font-size: 10px; color: #94a3b8; }
.demo-wa { width: 26px; height: 26px; border-radius: 50%; background: #25d366; flex-shrink: 0; position: relative; }
.demo-wa::after { content: ""; position: absolute; inset: 6px; border: 2.5px solid #fff; border-radius: 50%; border-bottom-color: transparent; transform: rotate(-45deg); }
.demo-chat { background: #ece5dd; border-radius: 14px; padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.demo-msg { max-width: 92%; padding: 7px 9px; border-radius: 10px; font-size: 11.5px; line-height: 1.35; color: #0f172a; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); position: relative; }
.demo-msg.in { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.demo-msg.out { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 3px; }
.demo-auto { display: block; font-size: 9px; color: #64748b; margin-top: 3px; text-align: right; }
.demo-file { display: flex; align-items: center; gap: 6px; margin-top: 6px; background: #f1f5f9; border-radius: 8px; padding: 5px 7px; font-size: 11px; font-weight: 600; }
.demo-file .ic { width: 16px; height: 16px; color: var(--bad); flex-shrink: 0; } .demo-file small { display: block; font-weight: 400; color: var(--muted); font-size: 9.5px; }
.demo-typing { align-self: flex-start; background: #fff; border-radius: 10px; padding: 8px 10px; display: flex; gap: 3px; }
.demo-typing i { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; animation: demoDot 1s infinite; } .demo-typing i:nth-child(2) { animation-delay: .15s; } .demo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes demoDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.demo-shop { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.demo-queue { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.demo-queue-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 12.5px; margin-bottom: 4px; }
.demo-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #065f46; }
.demo-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); animation: chipPulse 2s infinite; }
.demo-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 12px; font-weight: 500; }
.demo-row .pill { font-size: 10.5px; transition: background .3s, color .3s; }
.demo-row.static { color: var(--muted-2); }
.demo-toast { display: flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 11.5px; }
.demo-toast .ic { width: 18px; height: 18px; color: #6ee7b7; flex-shrink: 0; } .demo-toast b { display: block; } .demo-toast small { color: #cbd5e1; font-size: 10px; }
.demo-printer { position: relative; height: 108px; margin-top: auto; }
.demo-printer-feed { position: absolute; left: 30%; right: 30%; top: 8px; height: 22px; background: #cbd5e1; border-radius: 4px 4px 0 0; z-index: 0; }
.demo-printer-feed::after { content: ""; position: absolute; left: 8px; right: 8px; top: 5px; height: 12px; background: #fff; border: 1px solid #94a3b8; border-bottom: 0; }
.demo-printer-body { position: absolute; left: 10%; right: 10%; top: 28px; height: 36px; background: linear-gradient(180deg, #0d9488, var(--brand)); border-radius: 8px 8px 4px 4px; box-shadow: 0 8px 18px rgba(15, 118, 110, .3); z-index: 2; }
.demo-printer-led { position: absolute; right: 12px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; transition: background .3s; }
.demo-printer-name { position: absolute; left: 12px; top: 11px; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: rgba(255, 255, 255, .8); }
.demo-printer-tray { position: absolute; left: 16%; right: 16%; top: 64px; height: 8px; background: #0b4f4a; border-radius: 0 0 6px 6px; z-index: 0; }
.demo-printer-label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.demo-sheets { position: absolute; left: 20%; right: 20%; top: 0; height: 80px; z-index: 1; }
.demo-sheets i { position: absolute; left: 0; right: 0; top: 40px; height: 24px; background: #fff; border: 1px solid #cbd5e1; border-radius: 3px; transform: translateY(0); opacity: 0; }
.demo-sheets i::before { content: ""; position: absolute; left: 10px; right: 30%; top: 7px; height: 3px; background: #e2e8f0; box-shadow: 0 6px 0 #e2e8f0; }

/* timeline: elements are hidden until their step, then animate in */
.demo [data-t] { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.demo [data-t].on { opacity: 1; transform: none; }
.demo .demo-typing { transition: opacity .2s; } .demo .demo-typing.on { opacity: 1; } .demo .demo-typing.off { opacity: 0; position: absolute; pointer-events: none; }
.demo-msg.on { animation: demoPop .3s; } @keyframes demoPop { from { transform: scale(.94) translateY(6px); } to { transform: none; } }
.demo.printing .demo-printer-led { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .35); animation: demoBlink .5s infinite alternate; }
@keyframes demoBlink { to { opacity: .4; } }
.demo.printing .demo-sheets i { animation: demoSheet 1.6s ease-out forwards; }
.demo.printing .demo-sheets i:nth-child(2) { animation-delay: .5s; } .demo.printing .demo-sheets i:nth-child(3) { animation-delay: 1s; }
@keyframes demoSheet { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(30px); opacity: 1; } }
.demo.printed .demo-sheets i { opacity: 1; transform: translateY(30px); } .demo.printed .demo-printer-led { background: #4ade80; }
.demo-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 18px; font-size: 12.5px; font-weight: 600; color: var(--brand-dark); }
.demo-caption span { position: absolute; left: 0; opacity: 0; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.demo-caption span.on { opacity: 1; }
.demo-progress { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--brand-2); transition: width .4s linear; }
.demo-video-btn { display: inline-flex; align-items: center; gap: 8px; } .demo-video-btn .ic { width: 20px; height: 20px; }

/* ───────── illustrations (pain / promise) ───────── */
.illus { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.pain-arrow svg { width: 44px; height: 44px; }
.il-float { animation: ilFloat 3s ease-in-out infinite; } .il-float.d2 { animation-delay: .6s; } .il-float.d3 { animation-delay: 1.2s; }
@keyframes ilFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.il-shake { transform-origin: 30px 50px; animation: ilShake 2.4s ease-in-out infinite; }
@keyframes ilShake { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-8deg); } }
.il-dash { stroke-dasharray: 6 5; animation: ilDash 1.2s linear infinite; } @keyframes ilDash { to { stroke-dashoffset: -22; } }
.il-fly { animation: ilFly 2.4s ease-in-out infinite; } @keyframes ilFly { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(48px, -14px); opacity: 0; } }
.il-sheet { animation: ilSheet 2.4s ease-out infinite; } @keyframes ilSheet { 0%, 30% { transform: translateY(-14px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(6px); opacity: 1; } }
.il-blink { animation: demoBlink .6s infinite alternate; }
.il-pop { transform-origin: 128px 126px; animation: ilPop 2.4s ease-out infinite; } @keyframes ilPop { 0%, 55% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 1; } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
.feat-icon .ic { width: 28px; height: 28px; color: var(--brand); }
.feat-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; margin-bottom: 12px; }

/* ───────── interactive stepper ───────── */
.stepper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); }
.stepper-list { display: flex; flex-direction: column; gap: 8px; }
.stepper-item { position: relative; display: flex; gap: 14px; align-items: flex-start; text-align: left; background: none; border: 1px solid transparent; border-radius: 14px; padding: 16px 16px 18px; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s, border-color .2s; overflow: hidden; }
.stepper-item:hover { background: #f8fafc; }
.stepper-item.is-on { background: var(--brand-soft); border-color: #99f6e4; }
.stepper-item .step-n { margin: 0; flex-shrink: 0; background: #cbd5e1; transition: background .2s; } .stepper-item.is-on .step-n { background: var(--brand); }
.stepper-item b { display: block; font-size: 16px; margin-bottom: 4px; } .stepper-item small { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.stepper-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-2); transform: scaleX(0); transform-origin: left; }
.stepper-item.is-on .stepper-bar { animation: stepBar var(--step-ms, 6s) linear forwards; } @keyframes stepBar { to { transform: scaleX(1); } }
.stepper.paused .stepper-item.is-on .stepper-bar { animation-play-state: paused; }
.stepper-stage { position: relative; background: linear-gradient(180deg, #f8fafc, #fff); border: 1px solid var(--line-2); border-radius: 16px; min-height: 300px; overflow: hidden; }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; pointer-events: none; }
.stage.is-on { opacity: 1; }
/* stage 1: the form types itself, the QR card pops */
.st-type { clip-path: inset(0 100% 0 0); }
.stage.is-on .st-type { animation: stType .9s .3s steps(14, end) forwards; } .stage.is-on .st-type.d2 { animation-delay: 1.1s; }
@keyframes stType { to { clip-path: inset(0 0 0 0); } }
/* the public layout has no Bootstrap: the two utilities the page uses */
.text-center { text-align: center; } .mt-4 { margin-top: 28px; }
.stage.is-on .st-btn { animation: stPress .3s 2s ease-out; } @keyframes stPress { 50% { transform: translateY(2px); opacity: .85; } }
.st-pop { transform-origin: 308px 140px; transform: scale(0); opacity: 0; } .stage.is-on .st-pop { animation: stPop .5s 2.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes stPop { to { transform: scale(1); opacity: 1; } }
/* stage 2: the links draw, the chip and LED go green, a sheet comes out */
.st-link { stroke-dashoffset: 0; } .stage.is-on .st-link { animation: ilDash 1s linear infinite; }
.st-chip { transition: fill .3s; } .st-chip-dot { transition: fill .3s; } .stage.is-on .st-chip { animation: stChip .1s 1.6s forwards; } .stage.is-on .st-chip-dot { animation: stChipDot .1s 1.6s forwards; }
@keyframes stChip { to { fill: #d1fae5; } } @keyframes stChipDot { to { fill: #059669; } }
.stage.is-on .st-led { animation: stLed .1s 1.6s forwards, demoBlink .6s 1.7s infinite alternate; } @keyframes stLed { to { fill: #4ade80; } }
.st-sheet { opacity: 0; } .stage.is-on .st-sheet { animation: stSheet 1.4s 2.2s ease-out forwards; } @keyframes stSheet { 0% { transform: translateY(-16px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 1; } }
/* stage 3: scan line, files fly into the queue, rows appear */
.stage.is-on .st-scan { animation: stScan 1.6s ease-in-out infinite; } @keyframes stScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(58px); } }
.st-file { opacity: 0; } .stage.is-on .st-file { animation: stFile 1.3s ease-in-out forwards; }
.stage.is-on .st-file.f1 { animation-delay: .6s; } .stage.is-on .st-file.f2 { animation-delay: 1.5s; } .stage.is-on .st-file.f3 { animation-delay: 2.4s; }
@keyframes stFile { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(60px, -36px); opacity: 0; } }
.st-qrow { opacity: 0; } .stage.is-on .st-qrow { animation: stRow .4s ease-out forwards; }
.stage.is-on .st-qrow.r1 { animation-delay: 1.7s; } .stage.is-on .st-qrow.r2 { animation-delay: 2.6s; } .stage.is-on .st-qrow.r3 { animation-delay: 3.5s; }
@keyframes stRow { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ───────── video modal ───────── */
.video-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.video-modal[hidden] { display: none; }
.video-modal-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .75); }
.video-modal-box { position: relative; width: min(960px, 100%); background: #000; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.video-modal-box video { display: block; width: 100%; max-height: 80vh; }
.video-modal-x { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

/* ───────── responsive ───────── */
@media (max-width: 960px) {
  .stepper { grid-template-columns: 1fr; padding: 14px; }
  .stepper-stage { min-height: 240px; order: -1; }
  .stepper-item small { display: none; } .stepper-item.is-on small { display: block; }
}
@media (max-width: 520px) {
  .demo { grid-template-columns: 1fr; padding: 14px 12px 46px; }
  .demo-phone { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo [data-t], .demo-caption span[data-cap="5"], .reveal, .st-pop, .st-sheet, .st-file, .st-qrow { opacity: 1 !important; transform: none !important; animation: none !important; }
  .demo .demo-typing { display: none; } .demo-sheets i { opacity: 1; transform: translateY(30px); }
  .il-float, .il-shake, .il-dash, .il-fly, .il-sheet, .il-pop, .il-blink, .st-link, .st-scan, .stepper-bar, .demo-live i { animation: none !important; }
  .st-type { clip-path: none; }
}