/* Desk scene: top view of the wood table — big turntable bleeding off the top-left, the lamp peeking in top-right, the gift below. */
body[data-view="scene"]{overflow:hidden;background:#1d0c06}
.view{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#1d0c06}
.wood{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage{position:absolute;left:0;top:0;width:400px;height:800px;transform-origin:0 0}
.cam{position:absolute;inset:0;perspective:1500px;transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
/* the gift lives in .iso: tilted into 3D while it opens, flattened once everything is on the desk */
.iso{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.55,0,.2,1)}
.iso.tilt{transform:rotateX(54deg) rotateZ(-32deg)}
.iso.flat{transform:none;transform-style:flat}
/* the layer spans the whole stage: let taps through to the turntable underneath, except on the things themselves */
.iso{pointer-events:none}
.iso .thing,.iso .scene-box{pointer-events:auto}
.view.intro .cam{transform:var(--intro)}
.view:focus-visible{outline:none}

/* things */
.thing{position:absolute;left:0;top:0;cursor:grab;touch-action:none;will-change:transform}
.thing.lift{cursor:grabbing;filter:drop-shadow(8px 16px 14px rgba(0,0,0,.45))}
.thing:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.rec-thing.grab,.record.grab{animation:wiggle 1.6s ease-in-out .6s 2}
@keyframes wiggle{0%,100%{margin-top:0}50%{margin-top:-6px}}
.thing.nudge-me{animation:nudgeme .9s var(--ease)}
@keyframes nudgeme{20%{translate:0 -10px}45%{translate:0 0}65%{translate:0 -5px}85%{translate:0 0}}
.scene-box{position:absolute}
.view.intro .thing,.view.intro .tt{pointer-events:none}
.view.intro .scene-box{cursor:pointer}

/* desk lamp seen from above: linen shade, bright opening, warm pool on the wood (painted by wood.js) */
.desk-lamp{position:absolute;width:210px;height:210px;pointer-events:none;transition:opacity .9s .3s}
.desk-lamp .shade{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff6dc 0 18%,#ffe2a8 30%,#e9c58a 48%,#cfa66c 64%,#b48550 72%,#8a6038 73.5%,#d9b583 75%,#c49a64 100%);
  box-shadow:0 0 60px 30px rgba(255,190,110,.35),0 0 140px 60px rgba(255,170,90,.18),inset 0 0 0 2px rgba(120,80,40,.4)}
.desk-lamp .bulb{position:absolute;left:36%;top:36%;width:28%;height:28%;border-radius:50%;background:radial-gradient(circle,#fff,#ffe9bd 60%,rgba(255,220,160,0));filter:blur(1px)}
.view.intro .desk-lamp{opacity:0}

/* turntable (top-left), ivory plinth like a classic deck */
.tt{position:absolute;width:330px;height:300px;transform-origin:0 0;transform:scale(var(--tts,1));cursor:pointer;transition:opacity .8s .3s,transform 1s .2s var(--ease)}
.view.intro .tt{opacity:0;transform:translate(-30px,-30px) scale(var(--tts,1))}
.tt-plinth{position:absolute;inset:0;border-radius:8px;background:var(--grain-soft),linear-gradient(145deg,#efebe3,#d2cbbd);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(0,0,0,.12),0 18px 30px -8px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.25)}
.tt-platter{position:absolute;left:20px;top:22px;width:250px;height:250px;border-radius:50%;background:repeating-conic-gradient(#9b958a 0 2deg,#d8d2c6 2deg 4deg);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.tt-mat{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,#f2ede4 0 13%,#232020 13.5%,#151313);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tt-spindle{position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#888 60%,#444)}
.tt-dial{position:absolute;right:14px;bottom:14px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3634,#121010)}
.tt-btn{position:absolute;right:48px;bottom:16px;padding:4px 6px;border-radius:3px;background:linear-gradient(#f5f1ea,#d7d0c3);box-shadow:0 1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.12);font:400 7px var(--mono);color:#3a332c}
.tt-btn::before{content:"";display:inline-block;width:4px;height:4px;margin-right:4px;border-radius:50%;background:#7a7067;vertical-align:1px}
.tt.on .tt-btn::before{background:#ff8a4a;box-shadow:0 0 6px #ff8a4a}
.tt-pitch{position:absolute;right:18px;bottom:52px;width:13px;height:96px;border-radius:3px;background:linear-gradient(90deg,#bdb5a7,#e6e0d5);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.tt-pitch i{position:absolute;left:-3px;right:-3px;top:44%;height:8px;border-radius:2px;background:linear-gradient(#fff,#cfc8bb);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.tt-brand{position:absolute;left:44px;bottom:8px;font:700 7px var(--mono);color:#4a4239;letter-spacing:.04em}
.tt-time{position:absolute;right:118px;bottom:16px;font:700 9px var(--dot);color:#5b5248}
.tt.on .tt-time{color:#b4501f}
.tt-over{position:absolute;z-index:9000;width:330px;height:300px;transform-origin:0 0;transform:scale(var(--tts,1));pointer-events:none;transition:opacity .8s .3s,transform 1s .2s var(--ease)}
.view.intro .tt-over{opacity:0;transform:translate(-30px,-30px) scale(var(--tts,1))}
.tt-arm{position:absolute;left:290px;top:46px;width:0;height:0;transform-origin:0 0;z-index:5000;pointer-events:none}
.arm-base{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f2ee,#a9a49b 55%,#5d5952);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.arm-weight{position:absolute;left:-7px;top:-40px;width:14px;height:24px;border-radius:3px;background:linear-gradient(90deg,#6e6a64,#d9d5cd 45%,#7b766f)}
.arm-rod{position:absolute;left:-2px;top:0;width:4px;height:162px;border-radius:2px;background:linear-gradient(90deg,#8a867f,#f6f4f0 45%,#9b968e);box-shadow:2px 3px 4px rgba(0,0,0,.35)}
.arm-head{position:absolute;left:-9px;top:156px;width:16px;height:34px;border-radius:2px 2px 4px 4px;background:linear-gradient(90deg,#3d3936,#a6a19a 50%,#45413d);transform:rotate(14deg);transform-origin:50% 0;box-shadow:2px 3px 4px rgba(0,0,0,.4)}
.tt.nudge{animation:nudge .4s}
@keyframes nudge{25%{translate:-5px 0}75%{translate:5px 0}}

/* hint, preview bar, zoom, end card */
.hint{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:9500;transform:translateX(-50%);margin:0;max-width:92vw;padding:10px 16px;border-radius:999px;
  background:rgba(18,9,6,.8);border:1px solid var(--faint);color:var(--cream);font:400 14px var(--thai);white-space:nowrap;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hint:empty{display:none}
.hint.pop{animation:hintin .45s var(--ease)}
@keyframes hintin{from{opacity:0;transform:translate(-50%,10px)}}
.preview-bar{position:fixed;left:10px;top:calc(10px + env(safe-area-inset-top));z-index:25;display:flex;align-items:center;gap:10px;
  padding:4px 4px 4px 14px;border-radius:999px;background:rgba(18,9,6,.82);border:1px solid rgba(224,168,103,.35);font:400 12px var(--thai);color:var(--amber);white-space:nowrap}
.zoom{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(8,5,4,.72);opacity:0;transition:opacity .2s;cursor:zoom-out}
.zoom.in{opacity:1}
.zoom>.postcard,.zoom>.ticket{transform:scale(.9) rotate(-1.5deg);transition:transform .3s var(--ease)}
.zoom.in>.postcard,.zoom.in>.ticket{transform:rotate(-1deg)}
.zoom-x{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--faint);background:rgba(18,13,11,.6);cursor:pointer}
.endcard{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:9500;width:min(92vw,360px);padding:16px 16px 14px;border-radius:16px;
  background:var(--grain-soft),linear-gradient(#f3eee4,#ebe4d6);color:var(--ink);box-shadow:0 18px 40px -10px rgba(0,0,0,.8);
  text-align:center;transform:translate(-50%,calc(-100% - 140px));transition:transform .5s var(--ease)}
.view.has-bar .endcard{top:calc(64px + env(safe-area-inset-top))}
.endcard.in{transform:translate(-50%,0)}
.ec-x{position:absolute;right:6px;top:6px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#7a6a5c;cursor:pointer}
/* repack: small, in the top-right corner over the lamp (the preview bar sits top-left) */
.repack{position:fixed;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:9500;display:none;flex-direction:column;align-items:center;gap:2px;
  min-height:0;padding:7px 9px 6px;border-radius:14px;font-size:10.5px;line-height:1.2;color:var(--cream);background:rgba(18,9,5,.55)}
.repack .ic svg{width:18px;height:18px}
.view.at-desk .endcard.in ~ .repack{display:none}   /* the end card sits there; back once it is closed */
.view.at-desk .repack{display:flex}
.ec-from{margin:0;font:500 22px/1.3 var(--thai);color:var(--rust)}   /* sender's name: same face as the line below, rust like "from" */
.ec-from span{font:400 22px/1 var(--hand);margin-right:4px;color:var(--rust)}
.ec-line{margin:4px 0 12px;font:400 14px/1.5 var(--thai);color:#5a4a3c}
.ec-row{display:flex;gap:8px}.ec-row .btn{flex:1;min-height:46px;font-size:14px}
.endcard .btn.ghost{border-color:rgba(26,20,16,.25)}
.endcard .btn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}