/* ═══ THE SCREEN (2026-10-17) — only under html.sx-screen (?surface=touch / ?kiosk=1). See showcase-screen.js. ═══ */

/* 4 · lock-down: a public screen is not a document — no selecting, no long-press callout, no page pinch or double-tap
   zoom (pans still scroll; a viewer that handles its own pinch still gets its pointer events) */
html.sx-screen{touch-action:pan-x pan-y}
html.sx-screen body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.sx-screen :is(input,textarea,select,[contenteditable]){-webkit-user-select:text;user-select:text}

/* 5 · "Take it with you" — one quiet line under Home's buttons, a 44px target */
.sx-take{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:14px auto 0;padding:0 16px;
  border-radius:999px;color:#EEF2F6;font:500 14px/1.2 var(--sans,-apple-system,sans-serif);opacity:.86;transition:opacity .2s cubic-bezier(.16,1,.3,1),background-color .2s cubic-bezier(.16,1,.3,1)}
.sx-take svg{width:20px;height:20px}
.sx-take:hover{opacity:1;background:rgba(238,242,246,.08)}
.sx-take:focus-visible{outline:2px solid #EEF2F6;outline-offset:2px}
#heroLayer .sx-take{display:flex;width:max-content}

/* the QR card for anything that would leave the screen */
.sx-qr{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;padding:24px;background:rgba(5,6,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:sxQrIn .3s cubic-bezier(.16,1,.3,1) both}
.sx-qr-card{position:relative;box-sizing:border-box;width:min(380px,100%);padding:30px 28px 24px;border-radius:24px;background:#101215;color:#EEF2F6;text-align:center;
  border:1px solid rgba(238,242,246,.14);font-family:var(--sans,-apple-system,sans-serif)}
.sx-qr-k{display:block;margin:0 0 10px;font:500 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.18em;text-transform:uppercase;color:#A9B2BC}
.sx-qr h2{margin:0 0 20px;font:400 28px/1.15 "Bodoni 72",Didot,"Cormorant Garamond",Georgia,serif;overflow-wrap:anywhere}
.sx-qr canvas{display:block;width:240px;max-width:100%;height:auto;margin:0 auto;padding:14px;border-radius:16px;background:#fff;box-sizing:content-box}
.sx-qr p{margin:18px 0 20px;font-size:15px;line-height:1.45;color:#CBD2D9}
.sx-qr-done{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:160px;min-height:48px;padding:0 26px;border-radius:999px;
  background:#EEF2F6;color:#16191D;font:600 16px/1 var(--sans,-apple-system,sans-serif)}
.sx-qr-x{all:unset;cursor:pointer;position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#CBD2D9}
.sx-qr-x svg{width:18px;height:18px}
.sx-qr :is(.sx-qr-done,.sx-qr-x):focus-visible{outline:2px solid #EEF2F6;outline-offset:2px}
@keyframes sxQrIn{from{opacity:0}to{opacity:1}}

/* 2 · the idle screen — the place is the only lit thing; the photos move, the controls never do (MOTION.md §0, §8) */
.sx-attract{position:fixed;inset:0;z-index:9500;overflow:hidden;cursor:pointer;background:#0b0c0e;opacity:0;transition:opacity .45s cubic-bezier(.7,0,.84,0)}
.sx-attract.on{opacity:1;transition:opacity .75s cubic-bezier(.16,1,.3,1)}
.sx-attract[hidden]{display:none}
.sx-at-pics i{position:absolute;inset:0;background:#0b0c0e center/cover no-repeat;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.sx-at-pics i.on{opacity:1;animation:sxKen 9s linear both}
@keyframes sxKen{from{transform:scale(1)}to{transform:scale(1.06)}}
.sx-at-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,12,.55) 0%,rgba(4,8,12,0) 26%,rgba(4,8,12,0) 36%,rgba(4,8,12,.62) 60%,rgba(4,8,12,.9) 100%)}
.sx-at-logo{position:absolute;top:clamp(22px,4.5vh,56px);left:50%;transform:translateX(-50%);height:clamp(36px,6vh,72px);width:auto;max-width:60vw;object-fit:contain}
.sx-at-mid{position:absolute;left:0;right:0;bottom:clamp(56px,13vh,160px);padding:0 clamp(20px,6vw,120px);text-align:center;
  animation:sxAtRise .75s cubic-bezier(.16,1,.3,1) .15s both}
.sx-at-title{margin:0 0 clamp(18px,3vh,32px);color:#fff;font:400 clamp(40px,6.2vw,104px)/1.02 "Bodoni 72",Didot,"Cormorant Garamond",Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.sx-at-l{display:block}
.sx-at-title em{font-style:italic;color:#EEF2F6}
.sx-at-cta{display:inline-flex;align-items:center;min-height:60px;padding:0 clamp(28px,2.4vw,40px);border-radius:999px;background:#EEF2F6;color:#16191D;
  font:600 clamp(17px,1.35vw,22px)/1 var(--sans,-apple-system,sans-serif)}
.sx-at-qr{position:absolute;right:clamp(16px,2.6vw,44px);bottom:clamp(16px,3vh,44px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 12px 10px;border-radius:16px;
  background:#fff;color:#16191D;font:600 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase}
.sx-at-qr canvas{display:block;width:clamp(92px,7.5vw,150px);height:auto}
@keyframes sxAtRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:760px){.sx-at-qr{display:none}.sx-at-mid{bottom:clamp(40px,10vh,90px)}}
@media (prefers-reduced-motion:reduce){.sx-at-pics i.on{animation:none}.sx-at-mid{animation:none}.sx-attract,.sx-attract.on,.sx-at-pics i{transition-duration:.2s}}