/* 03 · the hand device: its own light, its own room */
@property --hda{syntax:'<angle>';inherits:false;initial-value:0deg}

/* the room: a quiet field of light behind the device, edge to edge */
#device{position:relative;isolation:isolate}
#device::before{content:'';position:absolute;z-index:-1;top:40px;bottom:-80px;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 55% at 30% 62%,rgba(70,140,255,.13),transparent 70%),radial-gradient(45% 50% at 78% 58%,rgba(158,240,255,.06),transparent 70%);
  animation:hdroom 14s ease-in-out infinite alternate}
#device::after{content:'';position:absolute;z-index:-1;top:40px;bottom:-80px;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(127,188,255,.22) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask:radial-gradient(70% 60% at 50% 60%,#000 20%,transparent 75%);mask:radial-gradient(70% 60% at 50% 60%,#000 20%,transparent 75%);
  animation:hddots 40s linear infinite}
@keyframes hdroom{0%{opacity:.75;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.04)}}
@keyframes hddots{to{background-position:26px 52px}}

/* the frame: light blue, breathing, with one slow light that walks around it */
.device.hd{position:relative;border-color:rgba(158,240,255,.55);animation:hdpulse 4.8s ease-in-out infinite}
.device.hd::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--hda),transparent 0deg,transparent 280deg,rgba(158,240,255,.0) 300deg,rgba(220,250,255,.95) 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:hdwalk 9s linear infinite}
@keyframes hdpulse{0%,100%{box-shadow:0 0 0 6px #070a1c,0 40px 80px rgba(0,0,0,.55),0 0 14px rgba(127,188,255,.12)}50%{box-shadow:0 0 0 6px #070a1c,0 40px 80px rgba(0,0,0,.55),0 0 34px rgba(127,188,255,.38)}}
@keyframes hdwalk{to{--hda:360deg}}

/* the moment it worked: the device lights up slowly, its button with it */
.device.hd.lit{animation:hdlit 3.4s ease-in-out both}
@keyframes hdlit{0%{box-shadow:0 0 0 6px #070a1c,0 40px 80px rgba(0,0,0,.55),0 0 14px rgba(127,188,255,.12);border-color:rgba(158,240,255,.55)}
  40%,60%{box-shadow:0 0 0 6px #0b1838,0 40px 80px rgba(0,0,0,.55),0 0 70px rgba(158,240,255,.55);border-color:#dffbff}
  100%{box-shadow:0 0 0 6px #070a1c,0 40px 80px rgba(0,0,0,.55),0 0 14px rgba(127,188,255,.12);border-color:rgba(158,240,255,.55)}}
.device.hd.lit .tabs button.on,.device.hd .btns button.lit,.device.hd .notes.lit .nt.ok{animation:hdbtn 3.4s ease-in-out both}
@keyframes hdbtn{0%,100%{box-shadow:none}40%,60%{box-shadow:0 0 22px rgba(158,240,255,.6);color:#fff;border-color:#dffbff}}

/* amounts: a Max beside every one */
.amt{display:flex;align-items:stretch;gap:8px}
.amt input{flex:1;min-width:0;margin:0}
.amt .max{flex:none;padding:0 14px;border:1px solid #2a4a7a;background:transparent;color:#9ef0ff;font-family:Mono,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:border-color .25s,background .25s,color .25s}
.amt .max:hover{border-color:#9ef0ff;background:rgba(61,112,195,.14);color:#fff}
.amt .max:disabled{opacity:.5;cursor:wait}
.ntshow{margin-top:8px;border:1px solid #2a4a7a;background:transparent;color:#9ef0ff;font-family:Mono,monospace;font-size:12px;padding:10px 12px;width:100%;text-align:left;cursor:pointer}
.ntshow:hover{border-color:#9ef0ff}

/* the console steps back, and a mark made of numbers says it is done */
.conwrap{position:relative;display:flex;flex-direction:column;min-width:0}
.conwrap .console{flex:1;transition:opacity .7s ease,filter .7s ease}
.conwrap.hush .console{opacity:.25;filter:blur(2px)}
.zok{position:absolute;inset:0;background:rgba(3,4,12,.92);border:1px solid rgba(158,240,255,.28);border-radius:12px;box-shadow:inset 0 0 60px rgba(70,140,255,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none;opacity:0;transition:opacity .6s ease}
.conwrap.hush .zok{opacity:1}
.zok pre{margin:0;font-family:Mono,monospace;font-size:13px;line-height:1.05;letter-spacing:.04em;color:#9ef0ff;text-shadow:0 0 12px rgba(158,240,255,.55)}
.zok pre i{font-style:normal;opacity:0;animation:zokin .5s ease forwards}
.zok b{font-family:Disp,'Inter Display',sans-serif;font-weight:300;font-size:26px;color:#e8f6ff;opacity:0;animation:zokin .8s ease .9s forwards}
.zok small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#6f9fd8;opacity:0;animation:zokin .8s ease 1.2s forwards}
@keyframes zokin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.zok{overflow:hidden}
@media (max-width:980px){.conwrap{transition:min-height .6s ease}.conwrap.hush{min-height:300px}}
@media (max-width:560px){.zok pre{font-size:10px}.zok b{font-size:22px}}

@media (prefers-reduced-motion:reduce){.device.hd,.device.hd::before,#device::before,#device::after{animation:none}}

/* the device keeps one rhythm: the console stays the height of the Zip view, whatever is chosen */
.app{align-items:start!important}
@media (min-width:981px){
  .app .conwrap{height:var(--conH,420px)}
  .app .conwrap .console{contain:none!important;height:100%;min-height:0;max-height:none;overflow:auto}
}
.app .device.grow{transition:height .9s cubic-bezier(.45,0,.2,1)!important}
.app .pane.on{animation:pin2 .8s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes pin2{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.app .tabs .tind{transition:transform .8s cubic-bezier(.2,.8,.2,1),width .8s cubic-bezier(.2,.8,.2,1)!important}
/* notes show where they are needed: unzip, speak, knock */
#hd[data-tab=buy] #notes,#hd[data-tab=zip] #notes{display:none}
/* the notes beside the console, in their own colour */
.cnotes{position:absolute;top:12px;right:12px;z-index:2;width:min(320px,72%);display:grid;gap:6px;padding:10px 12px;background:rgba(4,14,12,.92);border:1px solid rgba(95,227,161,.35);opacity:0;transform:translateY(-6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cnotes.on{opacity:1;transform:none;pointer-events:auto}
.cnotes small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#5fb98d}
.cn{display:grid;grid-template-columns:8px auto 1fr;align-items:center;gap:8px;font-size:11.5px;color:#bfe9d3}
.cn i{width:7px;height:7px;border-radius:50%}
.cn b{font-weight:500;color:#e6fff3}
.cn span{color:#7fb89d;font-size:10.5px;text-align:right}
.cn.ok i{background:#5fe3a1;box-shadow:0 0 8px #5fe3a1}
.cn.wait i{background:#ffcf9a;animation:chk 1.4s ease-in-out infinite}
.cn.sent i{background:#9ef0ff;animation:chk 1.4s ease-in-out infinite}
.conwrap.hush .cnotes{opacity:.15}
/* smooth: only the compositor moves things (no repaint every frame) */
.device.hd{animation:none!important;box-shadow:0 0 0 6px #070a1c,0 40px 80px rgba(0,0,0,.55),0 0 26px rgba(127,188,255,.24)}
#device::after{animation:hddots2 40s ease-in-out infinite alternate!important;will-change:transform}
@keyframes hddots2{from{transform:translateX(-50%)}to{transform:translateX(calc(-50% + 26px)) translateY(52px)}}
#device::before{will-change:transform,opacity}
.app .pane.on{animation:pin3 .7s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes pin3{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the walking light, turned by the compositor: a masked ring with a rotating light inside */
.device.hd::before{display:none!important}
.hdring{position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;overflow:hidden;z-index:3;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hdring b{position:absolute;inset:-80%;background:conic-gradient(transparent 0deg,transparent 280deg,rgba(158,240,255,0) 300deg,rgba(220,250,255,.95) 340deg,transparent 360deg);animation:hdspin 9s linear infinite;will-change:transform}
@keyframes hdspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hdring b{animation:none}}
/* the console: black, with a quiet pattern of its own: a field of points like a ledger, a hex trace, and a slow light reading down */
.conwrap{border-radius:12px;overflow:hidden;background:#020309;isolation:isolate}
.conwrap::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:12px;
  background-image:radial-gradient(rgba(127,188,255,.26) 1px,transparent 1.4px),linear-gradient(rgba(127,188,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(127,188,255,.06) 1px,transparent 1px);
  background-size:16px 16px,64px 64px,64px 64px;background-position:8px 8px,0 0,0 0;
  -webkit-mask:radial-gradient(120% 90% at 70% 30%,#000 10%,rgba(0,0,0,.35) 70%);mask:radial-gradient(120% 90% at 70% 30%,#000 10%,rgba(0,0,0,.35) 70%)}
.conwrap::after{content:'';position:absolute;left:0;right:0;top:-40%;height:40%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(158,240,255,.06) 60%,rgba(158,240,255,.16) 98%,transparent);animation:conread 9s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
@keyframes conread{0%{transform:translateY(0)}100%{transform:translateY(350%)}}
.conwrap .console{position:relative;z-index:1;background:transparent!important}
.conwrap .cnotes,.conwrap .zok{z-index:2}
@media (prefers-reduced-motion:reduce){.conwrap::after{animation:none;display:none}}