/* Menty website v3: demo page only (2 Oct 2026, simplified). Loads after site.css.
   Centred head, then one panel with two equal halves: Scan | or | Tap. */
.demo-sec{padding-block:40px 48px}
.demo-head{margin-bottom:36px}
.demo-head h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.04em;line-height:1.05}
.demo-panel{display:grid;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.half{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;gap:20px}
.half-vis{width:100%;height:400px;display:grid;place-items:center}
.half .btn,.half-p{min-height:46px;display:flex;align-items:center}
.half-h{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.half-h span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--ink);font-size:13px}
.half-p{color:var(--ink2);font-size:15px}
.qr{width:250px;height:250px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;place-items:center;flex:none}
.qr svg,.qr img{width:100%;height:100%}
.qr-local{font-size:12.5px;color:var(--ink3);max-width:22em}
.or{display:flex;align-items:center;justify-content:center;position:relative;padding:0 24px}
.or::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1px;background:var(--line)}
.or span{position:relative;background:#fff;padding:4px 12px;font-size:13px;color:var(--ink3)}

/* the tap stage */
.tap-stage{position:relative;height:100%;aspect-ratio:1/1.1;background:var(--alt);border-radius:18px;overflow:hidden}
.tap-card{position:absolute;width:34%;left:9%;bottom:9%;filter:drop-shadow(0 14px 18px rgba(17,17,19,.22));transition:opacity .4s}
.ripple{position:absolute;left:26%;bottom:46%;width:0;height:0}
.ripple i{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.tapping .ripple i{animation:ring 1s ease-out .45s 2}
.tapping .ripple i:nth-child(2){animation-delay:.65s}.tapping .ripple i:nth-child(3){animation-delay:.85s}
@keyframes ring{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.tap-phone{position:absolute;right:9%;top:7%;width:42%;aspect-ratio:9/19;border-radius:30px;background:#1A1A1D;padding:6px;transition:all .7s cubic-bezier(.3,.7,.2,1);box-shadow:0 24px 50px -26px rgba(17,17,19,.5)}
.tap-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:30%;height:14px;border-radius:10px;background:#1A1A1D;z-index:6}
.tap-phone .scr{width:100%;height:100%;border-radius:25px;overflow:hidden;position:relative;background:#F2F1EE}
.tapping .tap-phone{transform:translate(-64%,24%) rotate(-12deg)}
.idle{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.idle-t{font-size:26px;font-weight:600;letter-spacing:-.03em}
.idle-nfc{width:34px;height:34px;border-radius:50%;border:2px dashed var(--line2)}
.tap-phone iframe{position:absolute;top:0;left:0;width:182%;height:182%;border:0;background:#FFD23F;transform:scale(.55);transform-origin:0 0}
.opened .tap-phone{width:56%;right:22%;top:5%}
.opened .tap-card{opacity:0}

@media (min-width:860px){
  .demo-sec{padding-block:48px 56px}
  .demo-panel{grid-template-columns:1fr auto 1fr}
  .half{padding:40px}
  .or{flex-direction:column;padding:32px 0}
  .or::before{left:50%;right:auto;top:32px;bottom:32px;width:1px;height:auto}
  .qr{width:270px;height:270px}
}
/* once opened, a clear button over the small phone brings the menu forward again */
.tap-open{position:absolute;inset:0;z-index:7;border:0;border-radius:30px;background:transparent;cursor:zoom-in}
.tap-open:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* the phone, brought forward to the centre of the screen (11 Oct 2026) */
html.focus-on{overflow:hidden}
.focus{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(17,17,19,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .45s ease,backdrop-filter .45s ease}
.focus.in{background:rgba(17,17,19,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.focus-phone{position:relative;flex:none;border-radius:44px;background:#1A1A1D;padding:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform-origin:0 0;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.focus-phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:14px;background:#1A1A1D;z-index:6}
.focus-phone .scr{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;background:#FFD23F}
.focus-phone iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#FFD23F}
.focus-x{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:0;background:#fff;color:#111;font:600 15px/1 inherit;cursor:pointer;opacity:0;transition:opacity .3s .2s}
.focus-hint{margin:0;color:#fff;font-size:14px;opacity:0;transition:opacity .3s .25s;text-align:center;padding:0 16px}
.focus.in .focus-x,.focus.in .focus-hint{opacity:1}
.focus.out .focus-x,.focus.out .focus-hint{transition-delay:0s}
@media (max-height:640px){.focus-hint{display:none}}
@media (max-width:599px){.focus{gap:12px}.focus-x{position:static;order:-1;align-self:flex-end;margin-inline-end:4vw}}
@media (prefers-reduced-motion:reduce){ .tap-phone,.tap-card,.focus,.focus-phone,.focus-x,.focus-hint{transition:none} }