/* Shop: the gift box on the desk at night, a finished globe beside it, the price on a hanging tag. */
body[data-view="shop"]{background:#120a07}
.shop{padding-bottom:40px;background:linear-gradient(#1a0d08,#120a07 60%,#0e0806)}
.sp-hero{--H:clamp(560px,100svh,1000px);--sw:calc(var(--H) * .7468);position:relative;height:var(--H);overflow:hidden;isolation:isolate;background:#120a07}
/* her shop picture, at its own proportions and the full height of the screen: on a phone the sides are cropped, on a wide
   screen a blurred copy fills the sides. Everything on the counter is placed in % of the picture, so it stays on the counter. */
.sp-blur{position:absolute;inset:-40px;z-index:-1;background:url(/img/scene/shop-bg.webp) 50% 50%/cover;filter:blur(26px) brightness(.45)}
.sp-scene{position:absolute;top:0;left:50%;width:var(--sw);height:var(--H);transform:translateX(-50%);background:url(/img/scene/shop-bg.webp) 0 0/100% 100% no-repeat}
.sp-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(10,5,3,.78),rgba(10,5,3,.2) 24%,rgba(10,5,3,0) 34%,rgba(10,5,3,0) 70%,rgba(10,5,3,.55))}
.sp-head{position:absolute;z-index:2;top:calc(14px + env(safe-area-inset-top));left:50%;width:min(100vw,440px);transform:translateX(-50%);padding:0 18px;text-align:center}
.sp-k{margin:0 0 8px;font:400 11px/1.4 var(--mono);letter-spacing:.24em;color:var(--amber)}
.sp-head h1{margin:0;font-size:clamp(32px,10vw,50px);font-weight:400;color:var(--cream);text-shadow:0 2px 3px rgba(20,8,4,.85),0 0 22px rgba(20,8,4,.7)}
.sp-head h1 .ftr-sign i{color:var(--amber)}
.sp-tag{margin:10px auto 0;max-width:34ch;font:300 14.5px/1.55 var(--thai);color:rgba(242,237,228,.9);text-wrap:balance;text-shadow:0 1px 6px rgba(10,5,3,.9)}
/* the counter top is at 61.5% of her picture: the box and the globe stand there */
.sp-stage{position:absolute;inset:0;z-index:3;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-box{position:absolute;left:36%;bottom:38.6%;transform:translateX(-50%)}
.sp-box .xbox{--bw:calc(var(--sw) * .38);transition:translate .35s var(--ease);animation:spidle 2.8s ease-in-out infinite}
@keyframes spidle{50%{translate:0 -4px}}
.sp-stage:hover .sp-box .xbox,.sp-stage:focus-visible .sp-box .xbox{translate:0 -8px}
.sp-stage:focus-visible{outline:none}
.sp-stage:focus-visible .sp-box{outline:2px solid var(--amber);outline-offset:8px;border-radius:12px}
/* a soft gold halo that breathes round the box: it is the thing to tap */
.sp-ring{position:absolute;left:-12%;right:-12%;top:-8%;bottom:-6%;z-index:-1;border-radius:40%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(247,200,110,.42),rgba(247,200,110,.12) 60%,rgba(247,200,110,0));animation:spring 2.2s ease-in-out infinite}
@keyframes spring{50%{opacity:.35;transform:scale(.94)}}
.sp-globe{position:absolute;left:70%;bottom:38.5%;transform:translateX(-50%)}
.sp-globe .globe{--g:calc(var(--sw) * .2)}
.sp-globe.is3d{left:70%;bottom:calc(38.2% - var(--sw) * .31 * 1.14 * .166)}   /* the canvas has room under the base (16.6% of its height): the base sits right on the counter, over the tag's pin */
/* the tap hint sits on the cabinet front under the box: clear of the tagline above at every screen height */
.sp-tap{position:absolute;left:36%;top:66%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;white-space:nowrap;
  background:rgba(18,9,6,.88);border:1px solid rgba(247,200,110,.65);color:var(--cream);font:400 14px/1 var(--thai);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:sptap 1.6s ease-in-out infinite}
.sp-tap svg{width:16px;height:16px;transform:rotate(-90deg);color:var(--amber)}
@keyframes sptap{50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.sp-tap,.sp-ring,.sp-box .xbox{animation:none}}
.sp-pricetag{position:absolute;left:calc(70% - 46px);top:calc(61.8% + 30px);z-index:3;display:flex;flex-direction:column;align-items:center;width:92px;padding:15px 6px 9px;
  color:var(--ink);isolation:isolate;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));transform-origin:50% -18px;transform:rotate(-6deg);animation:sway 2.6s ease-in-out .7s both}
.sp-pricetag::before{content:"";position:absolute;top:5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#3a2418}
.sp-pricetag>span{font:400 10.5px/1.25 var(--thai);color:#5a4434;text-align:center}
.sp-pricetag b{display:flex;justify-content:center;width:100%;margin:4px 0;padding:4px 0 3px;border-radius:3px;background:radial-gradient(120% 140% at 50% 0%,#3b2216,#22120a);
  font:900 23px/1 var(--dot);color:#f7c843;text-shadow:0 0 5px rgba(247,200,67,.55)}
@keyframes sway{25%{rotate:7deg}55%{rotate:-4deg}80%{rotate:2deg}}
.soldout{position:absolute;z-index:4;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 14px;border-radius:12px;
  background:rgba(60,18,10,.9);border:1px solid rgba(255,160,120,.5);box-shadow:0 6px 16px rgba(0,0,0,.45);text-align:center;white-space:nowrap}
.soldout b{font:600 15px/1.3 var(--thai);color:#ffd2bd}
.soldout span{font:300 12px/1.35 var(--thai);color:#ffe9d2}

.sp-sec{width:min(calc(100% - 32px),440px);margin:26px auto 0}
.sp-sec h2{margin:0 0 12px;font:500 22px/1.3 var(--thai)}
.receipt{position:relative;z-index:3;width:min(calc(100% - 32px),340px);margin:34px auto 0;padding:20px 22px 16px;color:var(--ink);transform:rotate(-1deg);
  background:var(--grain-soft),linear-gradient(var(--paper),var(--paper-2));box-shadow:0 14px 30px -10px rgba(0,0,0,.7);
  -webkit-mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/14px 100%;mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/14px 100%}
.receipt h2{margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px dashed rgba(26,20,16,.35);text-align:center;font:500 16px/1.3 var(--thai)}
.receipt ol{margin:0;padding:0;list-style:none;counter-reset:r}
.receipt li{counter-increment:r;display:flex;gap:10px;padding:5px 0;font:400 15px/1.5 var(--thai)}
.receipt li::before{content:counter(r) ".";min-width:1.4em;font:700 14px/1.6 var(--mono);color:var(--rust)}
.receipt .r-foot{margin:10px 0 4px;padding-top:8px;border-top:1.5px dashed rgba(26,20,16,.35);text-align:center;font:400 12px var(--mono);color:#5a4a3c}
.foot{text-align:center;margin-top:34px;color:rgba(242,237,228,.62);font:400 22px/1.2 var(--script)}

/* the string and the brass pin it hangs from (pin on the counter's front edge, 30px above the tag) */
.sp-pricetag .pin{position:absolute;left:50%;top:-34px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7e2a8,#a8792e);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.sp-pricetag .string{position:absolute;left:50%;top:-29px;width:1.5px;height:34px;margin-left:-.75px;background:linear-gradient(#d8c3a0,#b9a27c);transform-origin:50% 0}
.sp-pricetag{transform-origin:50% -30px}
.sp-pricetag .sp-for{width:100%;text-wrap:balance;word-break:keep-all;line-break:strict}
.sp-pricetag::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px 5px 3px 3px;background:var(--grain-soft),linear-gradient(#f4ecdc,#e4d6bd);clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%)}   /* the tag's shape: on its own layer, so the string above it isn't clipped */
.sp-tag span{display:inline-block;margin:0 .14em}