/* ============================================================================
   DROP TRANSFER — transfer-system UI (asset-based scene)
   Palette, materials and motion are pinned by the client brief.
   ========================================================================== */

:root{
  /* --- pinned palette --- */
  --bg:#090D12;
  --module:#111821;
  --module-2:#151E28;
  --cyan:#46D9FF;
  --blue:#2F7FFF;
  --success:#2BE676;
  --amber:#F2B84B;
  --ink:#FFFFFF;
  --ink-2:#AEB9C7;

  /* --- derived, kept in one place --- */
  --edge:#25313f;
  --edge-hi:#3b4b5d;
  --ink-3:#7c8899;
  --cut:14px;
  --rail-h:20px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-mech:cubic-bezier(.32,.72,0,1);
  --t-quick:180ms;
  --t-base:340ms;
  --t-slow:560ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;overflow-x:clip}

body{
  font-family:'Saira',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the room: photographic hall on a fixed layer + dimming gradient + vignette */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--bg);
  background-image:url("scene/hall.webp");
  background-size:cover;
  background-position:center 62%;
  background-repeat:no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,#090d12b8 0%,#090d129e 38%,#090d12d6 78%,#090d12f2 100%),
    radial-gradient(120% 90% at 50% 45%,transparent 40%,#05080ccc 100%);
}

/* ---------------------------------------------------------------- shell -- */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes plateWake{from{opacity:0}to{opacity:1}}
.topbar,.head,.dock,.channel__guide,.bay,.assure,.foot{animation:riseIn var(--t-slow) var(--ease-out) backwards}
.topbar{animation-delay:0ms}
.head{animation-delay:70ms}
.dock{animation-delay:140ms}
.channel__guide{animation-delay:210ms}
.bay{animation-delay:270ms}
.assure{animation-delay:340ms}
.foot{animation-delay:400ms}
.item{animation:riseIn var(--t-slow) var(--ease-out) 190ms backwards}

.shell{position:relative;z-index:1;min-height:100dvh;display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:stretch}

.bottom{display:grid}
.bottom > *{grid-area:1/1}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2vw,22px) clamp(16px,3vw,38px);
}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark svg{display:block;width:26px;height:26px}
.mark b{font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.mark span{font-weight:400;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

.topbar__right{display:flex;align-items:center;gap:10px}

.chip{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 14px 7px 12px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);
  background:linear-gradient(180deg,#0f1a24,#0c141c);
  border:1px solid #21384a;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:color .4s ease,border-color .4s ease;
}
.chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;box-shadow:0 0 8px currentColor;
  animation:pulse 2.4s ease-in-out infinite;
}
.chip[data-tone="amber"]{color:var(--amber);border-color:#4a3a1c}
.chip[data-tone="green"]{color:var(--success);border-color:#1c4a2f}

.mute{
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--edge);color:var(--ink-3);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform 140ms var(--ease-out),color .25s ease,border-color .25s ease;
}
.mute:hover{color:var(--ink);border-color:var(--edge-hi)}
.mute:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mute:active{transform:scale(.94)}
.mute svg{width:17px;height:17px;display:block}
.mute .off{display:none}
.mute[aria-pressed="true"] .on{display:none}
.mute[aria-pressed="true"] .off{display:block}

/* ------------------------------------------------------------ headline -- */
.head{text-align:center;padding:clamp(2px,.6vw,8px) 20px clamp(4px,1vw,10px)}
.head h1{
  font-family:'Saira Condensed','Saira',system-ui,sans-serif;
  font-weight:700;text-transform:uppercase;line-height:.98;
  letter-spacing:.005em;
  font-size:clamp(26px,3.6vw,48px);
}
.head h1 em{font-style:normal;color:var(--cyan);display:block}
.head p{
  margin-top:10px;color:var(--ink-2);font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.03em;
}
.head .stage-note{margin-top:6px;color:var(--ink-3);font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:14px}

/* ---------------------------------------------------------------- deck -- */
.deck{
  position:relative;align-self:center;width:100%;
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(180px,1.05fr) minmax(250px,1fr);
  align-items:center;
  gap:clamp(10px,2vw,26px);
  padding:0 clamp(14px,3.4vw,54px) clamp(5px,1vw,11px);
  max-width:1580px;width:100%;margin:0 auto;
  touch-action:manipulation;
}

/* modules are now sprite-based: image fills the body box, height follows image ratio */
.module{
  position:relative;
  background:transparent;
  border:0;
  box-shadow:none;
}
.module::after{content:none}

/* modules are columns: captions on top, device sprite below */
.dock,.bay{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;
  max-width:clamp(340px,30vw,760px);
  margin:0 auto;
  padding:0;
}
.dock{transition:opacity .5s ease}

.dock__body,.bay__body{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.dock__body{background-image:url("scene/dock.webp")}
.bay__body{background-image:url("scene/bay.webp")}

/* ------------------------------------------------------------ source -- */
/* labels live in normal flow ABOVE the dock sprite, shadowed */
.dock__label{
  position:static;display:inline-block;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  text-shadow:0 1px 3px #000d,0 0 10px #0009;
}
.dock__name{
  position:static;
  font-weight:600;font-size:clamp(12px,1.15vw,15px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 3px #000d,0 0 10px #0009;
  white-space:nowrap;
}

/* the plate: invisible landing zone mapped to the cradle inside the dock sprite */
.plate{
  position:absolute;
  left:21%;top:60%;width:58%;height:13%;
  z-index:1;
  background:none;
  border:0;
  clip-path:none;
  box-shadow:none;
  padding:0;margin:0;
  display:grid;place-items:center;
}
.plate__guides{display:none}
.plate__glow{
  position:absolute;left:8%;right:8%;bottom:-14%;height:60%;
  background:radial-gradient(ellipse at center,#46d9ff7a,#46d9ff1e 52%,transparent 74%);
  filter:blur(6px);
  opacity:.9;
  transition:opacity .35s ease;
}
.plate__shadow{
  position:absolute;left:50%;bottom:-8%;width:80%;height:26%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,#000c,transparent 70%);
  filter:blur(3px);transition:opacity .3s ease,filter .3s ease;
}
/* tag lives on one line with .dock__label, floated right — never over the item */
.plate__tag{
  position:static;float:right;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
  opacity:.85;transition:opacity .3s ease;
  white-space:nowrap;
  text-shadow:0 1px 3px #000d,0 0 8px #46d9ff55;
}
[data-state="dragging"] .plate__tag,[data-state="near"] .plate__tag,
[data-state="placed"] .plate__tag,[data-state="progress"] .plate__tag,
[data-state="paused"] .plate__tag,[data-state="verified"] .plate__tag,
[data-state="complete"] .plate__tag{opacity:0}

/* -------------------------------------------------------------- picker -- */
/* the visible choice of three: the visitor picks the object, nothing is
   swapped under them. Same machined grammar as the chip: bevelled plate,
   one accent light on the active cell. */
.picker{
  display:flex;gap:9px;justify-content:center;
  margin-top:clamp(8px,1.2vw,14px);
  animation:riseIn var(--t-slow) var(--ease-out) 210ms backwards;
  transition:opacity .3s ease;
}
.cell{
  width:clamp(42px,4.4vw,60px);aspect-ratio:1;
  display:grid;place-items:center;padding:7px;
  background:linear-gradient(180deg,#0f1a24,#0c141c);
  border:1px solid #21384a;cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  opacity:.5;
  transition:opacity 180ms var(--ease-out),border-color 180ms ease,box-shadow 180ms ease,transform 140ms var(--ease-out);
}
.cell img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-drag:none}
.cell:hover{opacity:.82}
.cell:active{transform:scale(.95)}
.cell:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cell[aria-checked="true"]{
  opacity:1;border-color:#2f5f7a;
  box-shadow:0 0 14px #46d9ff33,inset 0 0 12px #46d9ff22;
}
body:not([data-state="ready"]) .picker{opacity:.28;pointer-events:none}

/* -------------------------------------------------------------- channel -- */
.channel{
  position:relative;z-index:3;height:clamp(180px,22vh,280px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2vh,28px);
}
.channel__guide{
  background:linear-gradient(90deg,transparent,#1d2a37 14%,#26374a 50%,#1d2a37 86%,transparent);
  box-shadow:0 1px 0 #0a1016;
}
.channel__guide::after{
  content:"";position:absolute;left:0;right:0;top:-7px;height:7px;
  background:repeating-linear-gradient(90deg,#16212c 0 2px,transparent 2px 11px);
  opacity:.75;
}
#flow{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}

/* pause status block: appears over the progress the moment the transfer halts */
.channel__stat{display:none;flex-direction:column;align-items:center;gap:4px}
.channel__stat b{
  font-family:'Saira Condensed','Saira',sans-serif;font-weight:700;
  font-size:clamp(13px,1.7vw,20px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);text-shadow:0 0 22px #f2b84b38;
}
.channel__stat span{
  font-size:clamp(9px,1vw,11.5px);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);
}

.pct{
  position:relative;z-index:1;font-family:'Saira Condensed','Saira',sans-serif;
  font-weight:700;font-size:clamp(38px,6.2vw,86px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--ink);opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),color .6s ease;
  text-shadow:0 0 34px #46d9ff40;
}
.pct sup{font-size:.42em;font-weight:600;vertical-align:super;margin-left:.06em;color:var(--ink-2)}

/* ------------------------------------------------------------------ bay -- */
/* bay header sits in normal flow ABOVE the sprite: label left, state right */
.bay__top{
  position:static;
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:5px;
}
.bay__label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  text-shadow:0 1px 3px #000d,0 0 10px #0009;
}
.bay__state{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
  text-shadow:0 1px 3px #000d,0 0 10px #0009;
}
.dock__name{margin-bottom:5px}

/* the receiving zone: invisible, mapped to the dark glass inside the bay sprite */
.bay__area{
  position:absolute;
  left:20%;top:30%;width:58%;height:42%;
  z-index:1;
  margin:0;
  display:grid;place-items:center;
  background:none;
  clip-path:none;
  transform-origin:center;
}
/* soft cyan underglow inside the glass — the only frame the bay has now */
.bay__area::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;border-radius:14px;
  background:radial-gradient(75% 75% at 50% 50%,#46d9ff2e,#46d9ff0d 55%,transparent 78%);
  box-shadow:inset 0 0 34px #46d9ff24;
  opacity:.25;
  transition:opacity .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.bay__ghost{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:62%;max-width:330px;opacity:.13;
  filter:grayscale(1) brightness(1.7);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
.bay__hint{
  position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  z-index:1;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);transition:color .3s ease,opacity .3s ease;
  text-align:center;
  text-shadow:0 1px 3px #000d,0 0 12px #000a;
}

/* ----------------------------------------------------------------- rail -- */
/* instrument-style scale: taller segments on a dark backed plate with a rim */
.rail{
  position:relative;z-index:1;
  width:min(560px,84%);flex:0 0 auto;
  height:var(--rail-h);display:flex;gap:3px;
  padding:4px;
  background:#0c131acc;
  border:1px solid var(--edge);
  box-shadow:0 6px 18px -8px #000c,inset 0 1px 0 #16212c;
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.rail i{
  flex:1;background:linear-gradient(180deg,#18222d,#0e161e);border-top:1px solid #223040;
  box-shadow:inset 0 -2px 4px -2px #000;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  transition:background 120ms linear,box-shadow 120ms linear;
}
.rail i.on{background:linear-gradient(180deg,var(--cyan),var(--blue));box-shadow:0 0 12px #46d9ff66}
.rail i.edge{background:linear-gradient(180deg,var(--amber),#b9822a);box-shadow:0 0 14px #f2b84b77}
.rail i.done{background:linear-gradient(180deg,var(--success),#18a352);box-shadow:0 0 12px #2be67666}

/* --------------------------------------------------------------- item -- */
/* the object reads as a physical thing against the dark hall: a tight rim
   light in the item's own hue plus a wider glow of the same colour, then
   the weight shadow. --rim is set per item from JS. */
.item{
  --rim:#46D9FF;
  position:absolute;left:0;top:0;z-index:6;
  width:var(--item-w,300px);
  cursor:grab;touch-action:none;
  filter:
    drop-shadow(0 0 2px var(--rim))
    drop-shadow(0 0 12px var(--rim))
    drop-shadow(0 18px 20px #000a)
    saturate(1.08) brightness(1.05);
  transition:filter 220ms var(--ease-out),width 300ms var(--ease-mech);
  will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-drag:none;
}
.item img{display:block;width:100%;height:auto;pointer-events:none;-webkit-drag:none;transition:opacity 160ms ease}
.item:active{cursor:grabbing}
.item:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.item.lift{
  filter:
    drop-shadow(0 0 3px var(--rim))
    drop-shadow(0 0 20px var(--rim))
    drop-shadow(0 34px 30px #000c)
    saturate(1.12) brightness(1.08);
}

.grabhint{
  position:absolute;z-index:7;display:flex;align-items:center;gap:8px;
  color:var(--ink-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  pointer-events:none;transition:opacity .4s ease;
}
.grabhint svg{width:22px;height:22px;display:block}
.grabhint .arrow{animation:nudge 2.6s var(--ease-out) infinite}

/* --------------------------------------------------------------- panel -- */
.assure{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,54px);align-self:center;
  padding-block:clamp(6px,1vw,12px);
  padding-inline:20px;
  transition:opacity .35s ease,transform .35s ease;
}
.assure li{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px;letter-spacing:.03em}
.assure svg{width:19px;height:19px;color:var(--cyan);opacity:.85;flex:0 0 auto}
.assure b{color:var(--ink-2);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.assure span{color:var(--ink-3);font-size:11.5px}
[data-state="paused"] .assure,[data-state="expired"] .assure,
[data-state="verified"] .assure,[data-state="complete"] .assure{opacity:0;transform:translateY(-6px);pointer-events:none}

.panel{
  display:grid;place-items:center;align-content:center;text-align:center;gap:9px;
  min-height:clamp(112px,13vh,150px);
  padding:clamp(10px,1.6vw,18px) 20px clamp(14px,2vw,24px);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.panel h2{
  font-family:'Saira Condensed','Saira',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);line-height:1;letter-spacing:.01em;
}
.panel p{color:var(--ink-2);font-size:clamp(12px,1.1vw,14.5px);max-width:46ch}
.timer{
  font-family:'Saira Condensed','Saira',sans-serif;font-variant-numeric:tabular-nums;
  font-size:clamp(13px,1.3vw,16px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);transition:color .5s ease,text-shadow .5s ease;
}
.timer b{font-weight:700}
.timer[data-tone="amber"]{color:var(--amber);text-shadow:0 0 18px #f2b84b4d}

.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px clamp(22px,2.6vw,38px);
  font-family:inherit;font-weight:700;font-size:clamp(12.5px,1.2vw,15px);
  letter-spacing:.13em;text-transform:uppercase;
  color:#04180c;border:0;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#3af08a,var(--success));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 16px 30px -14px #2be67685, inset 0 1px 0 #ffffff5c;
  transition:transform 140ms var(--ease-out),box-shadow 240ms var(--ease-out),filter 240ms ease;
}
.cta__icon{display:grid;place-items:center}
.cta svg{width:19px;height:19px;display:block}
@media (hover:hover) and (pointer:fine){
  .cta:hover{transform:scale(1.02);box-shadow:0 20px 38px -14px #2be676a8,0 0 26px #2be6764d,inset 0 1px 0 #ffffff70;filter:brightness(1.04)}
}
.cta:active{transform:scale(.98)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.panel small{color:var(--ink-3);font-size:11.5px;letter-spacing:.04em}

/* --------------------------------------------------------------- footer -- */
.foot{
  border-top:1px solid #131c25;
  padding:12px clamp(16px,3vw,38px) 16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;
  color:var(--ink-3);font-size:11.5px;line-height:1.55;text-align:center;
}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid #2a3844}
.foot a:hover{color:var(--ink)}
.foot .sep{opacity:.4}
.foot .age{
  display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;
  border:1px solid #2a3844;color:var(--ink-2);font-weight:600;font-size:11px;
}

/* ================================================================ states = */
/* ready: cradle glows softly under the item, bay idles dim */
[data-state="ready"] .plate__glow{opacity:.9}
[data-state="ready"] .bay__area::before{opacity:.25}

/* dragging / near: cradle light dies, bay wakes up */
[data-state="dragging"] .plate__glow,
[data-state="near"] .plate__glow,
[data-state="placed"] .plate__glow,
[data-state="progress"] .plate__glow,
[data-state="paused"] .plate__glow,
[data-state="verified"] .plate__glow,
[data-state="complete"] .plate__glow{opacity:0}

[data-state="dragging"] .bay__area::before,
[data-state="near"] .bay__area::before{
  opacity:1;
  background:radial-gradient(75% 75% at 50% 50%,#46d9ff66,#46d9ff26 55%,transparent 78%);
  box-shadow:inset 0 0 44px #46d9ff59,0 0 30px #46d9ff2e;
}
[data-state="dragging"] .bay__hint,
[data-state="near"] .bay__hint{color:var(--cyan)}
[data-state="near"] .bay__ghost{opacity:.3}
[data-state="dragging"] .grabhint,
[data-state="near"] .grabhint,
[data-state="placed"] .grabhint,
[data-state="progress"] .grabhint,
[data-state="paused"] .grabhint,
[data-state="verified"] .grabhint,
[data-state="complete"] .grabhint{opacity:0}

/* placed → the light closes around the item */
[data-state="placed"] .bay__area::before,
[data-state="progress"] .bay__area::before{
  opacity:1;
  background:radial-gradient(75% 75% at 50% 50%,#46d9ff8c,#46d9ff3d 55%,transparent 78%);
  box-shadow:inset 0 0 48px #46d9ff80;
}
[data-state="placed"] .bay__hint,
[data-state="progress"] .bay__hint,
[data-state="paused"] .bay__hint,
[data-state="verified"] .bay__hint,
[data-state="complete"] .bay__hint{opacity:0}
[data-state="placed"] .bay__ghost,
[data-state="progress"] .bay__ghost,
[data-state="paused"] .bay__ghost,
[data-state="verified"] .bay__ghost,
[data-state="complete"] .bay__ghost{opacity:0}

/* rail appears only once the item is fixed in the bay */
[data-state="placed"] .rail,
[data-state="progress"] .rail,
[data-state="paused"] .rail,
[data-state="verified"] .rail,
[data-state="complete"] .rail{opacity:1}

[data-state="progress"] .pct,
[data-state="paused"] .pct,
[data-state="verified"] .pct,
[data-state="complete"] .pct{opacity:1;transform:translateY(0)}

/* dock dims once its job is done */
[data-state="progress"] .dock,
[data-state="paused"] .dock,
[data-state="verified"] .dock,
[data-state="complete"] .dock{opacity:.78}

/* paused → the halt itself becomes the scene: status block over the number,
   bright run-up, wired empty tail, item locked in glow, timer promoted */
[data-state="paused"] .channel__stat{display:flex;animation:riseIn 340ms var(--ease-out) 120ms backwards}
[data-state="paused"] .pct{
  color:var(--ink);
  font-size:clamp(58px,9.5vw,138px);
  text-shadow:0 0 44px #f2b84b30;
  animation:pctPop 320ms var(--ease-mech) 60ms backwards;
}
[data-state="paused"] .pct sup{color:var(--amber)}
[data-state="paused"] .panel,
[data-state="expired"] .panel,
[data-state="complete"] .panel{opacity:1;transform:translateY(0);pointer-events:auto}
[data-state="paused"] .bay__area::before{
  background:radial-gradient(75% 75% at 50% 50%,#f2b84b66,#f2b84b26 55%,transparent 78%);
  box-shadow:inset 0 0 44px #f2b84b66;
}
/* short amber payoff the instant the run halts */
[data-state="paused"] .bay__area::after{
  background:radial-gradient(70% 70% at 50% 50%,#f2b84b55,transparent 72%);
  animation:bayFlash 520ms var(--ease-out);
}
/* the empty last 10% stay visibly live: amber edge and a breathing glow over dead segments */
[data-state="paused"] .rail i:nth-of-type(n+37):not(.on){
  background:linear-gradient(180deg,#4a3c1c,#241c0c);
  border-top-color:#9a7c34;
  box-shadow:inset 0 0 12px #f2b84b66,0 0 12px #f2b84b4d;
  animation:tailBreath 1.6s ease-in-out infinite;
}
[data-state="paused"] .rail__note{opacity:1}
/* the item locks into the bay: brighter, tighter rim, one long pulse */
[data-state="paused"] .item.locked{
  filter:
    drop-shadow(0 0 3px var(--rim))
    drop-shadow(0 0 22px var(--rim))
    drop-shadow(0 22px 24px #000b)
    saturate(1.22) brightness(1.16);
  animation:itemBreath 1.8s ease-in-out 600ms infinite;
}
[data-state="paused"] .timer{font-size:clamp(15px,1.9vw,22px)}
[data-state="paused"] .timer b{color:var(--amber);font-size:1.28em;text-shadow:0 0 16px #f2b84b4d}

/* verified / complete → the whole system turns green */
[data-state="verified"] .bay__area::before,
[data-state="complete"] .bay__area::before{
  opacity:1;
  background:radial-gradient(75% 75% at 50% 50%,#2be67680,#2be67633 55%,transparent 78%);
  box-shadow:inset 0 0 48px #2be6768c;
}
[data-state="complete"] .pct{color:var(--success);text-shadow:0 0 34px #2be67655}

.item.locked{cursor:default}
.item.scan{-webkit-mask-image:none}

.scanline{
  position:absolute;left:-4%;right:-4%;height:3px;z-index:7;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 14px #46d9ffcc;
}
[data-state="progress"] .scanline{opacity:.9;animation:scan 1.15s linear infinite}

@keyframes frameClamp{0%{transform:scale(1)}42%{transform:scale(.982)}100%{transform:scale(1)}}
@keyframes bayFlash{0%{opacity:0}30%{opacity:.5}100%{opacity:0}}
[data-state="placed"] .bay__area{animation:frameClamp 300ms var(--ease-mech)}
.bay__area .bayFlashLayer,
.bay__area::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 70% at 50% 50%,#46d9ff44,transparent 72%);
}
[data-state="placed"] .bay__area::after{animation:bayFlash 460ms var(--ease-out)}

/* run-up stays at full brightness in pause; only the dead tail is amber */
.rail__note{
  position:absolute;top:calc(100% + 7px);
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:opacity 220ms var(--ease-out) 260ms;
  white-space:nowrap;
}
.rail__note--right{right:0;color:var(--amber);text-shadow:0 0 14px #f2b84b4d}

/* --------------------------------------------- pause focus: compact scene -- */
/* when the panel owns the bottom of the screen, devices and channel shrink
   to free vertical room for the timer, CTA and its caption */
[data-state="paused"] .dock,
[data-state="expired"] .dock,
[data-state="verified"] .dock,
[data-state="complete"] .dock,
[data-state="paused"] .bay,
[data-state="expired"] .bay,
[data-state="verified"] .bay,
[data-state="complete"] .bay{max-width:min(30vh,34vw)}

[data-state="paused"] .channel{height:clamp(150px,21vh,250px)}
[data-state="expired"] .channel,
[data-state="verified"] .channel,
[data-state="complete"] .channel{height:clamp(120px,16vh,190px)}

[data-state="paused"] .head,
[data-state="expired"] .head,
[data-state="verified"] .head,
[data-state="complete"] .head{padding-bottom:clamp(2px,0.6vw,6px)}

@keyframes scan{0%{top:6%}100%{top:92%}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes nudge{0%,64%,100%{transform:translateX(0)}72%{transform:translateX(7px)}82%{transform:translateX(2px)}}
@keyframes nudgeV{0%,64%,100%{transform:rotate(90deg) translateX(0)}72%{transform:rotate(90deg) translateX(7px)}82%{transform:rotate(90deg) translateX(2px)}}
@keyframes amberBreath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes pctPop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
@keyframes tailBreath{0%,100%{box-shadow:inset 0 0 8px #f2b84b44,0 0 8px #f2b84b30}50%{box-shadow:inset 0 0 16px #f2b84b88,0 0 16px #f2b84b5e}}
@keyframes itemBreath{
  0%,100%{filter:drop-shadow(0 0 3px var(--rim)) drop-shadow(0 0 22px var(--rim)) drop-shadow(0 22px 24px #000b) saturate(1.22) brightness(1.16)}
  50%{filter:drop-shadow(0 0 5px var(--rim)) drop-shadow(0 0 30px var(--rim)) drop-shadow(0 22px 24px #000b) saturate(1.28) brightness(1.23)}
}

/* ============================================================== mobile == */
@media (max-width:900px){
  body::before{
    background-image:url("scene/hall_m.webp");
    background-position:center 50%;
  }
  .deck{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    align-items:center;
    gap:clamp(6px,1.6vw,14px);
    padding:0 14px 10px;
  }
  .channel{height:clamp(64px,13vh,120px);order:2}
  .channel__guide{left:50%;right:auto;top:-6%;bottom:-6%;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,#1d2a37 14%,#26374a 50%,#1d2a37 86%,transparent)}
  .channel__guide::after{left:-7px;right:auto;top:0;bottom:0;width:7px;height:auto;
    background:repeating-linear-gradient(180deg,#16212c 0 2px,transparent 2px 11px)}
  .rail{flex-direction:row;width:min(280px,80%);height:12px;
    padding:3px;background:#0c131a;border:1px solid #17222d}
  .dock,.bay{max-width:min(76vw,30vh)}
  .dock{order:1}
  .bay{order:3}
  .head h1{font-size:clamp(24px,6.6vw,34px)}
  .topbar{padding:10px 12px;gap:8px}
  .mark svg{width:22px;height:22px}
  .mark b,.mark span{font-size:12px;letter-spacing:.12em}
  .topbar__right{gap:7px}
  .chip{padding:5px 9px;font-size:9px;letter-spacing:.12em;gap:6px}
  .chip::before{width:5px;height:5px}
  .mute{width:30px;height:30px}
  .mute svg{width:15px;height:15px}
  .foot{font-size:11px;padding:14px 16px 20px}
  .dock__name{font-size:12px}

  /* column layout: the item travels DOWN to the bay, so the hint arrow
     must agree (buyer screen 08.09: arrow pointed right while the bay
     sits below the dock) */
  .grabhint .arrow{transform:rotate(90deg);animation-name:nudgeV}

  /* scene screens on a phone (ready → dragging → placed → progress): the dock,
     the channel and the bay must all close inside the viewport before the
     transfer can even start — the panel takes the same trade the pause focus
     below already makes (buyer 08.09: "не влазит" on tall phones, bay cut off) */
  [data-state="ready"] .dock,
  [data-state="dragging"] .dock,
  [data-state="near"] .dock,
  [data-state="placed"] .dock,
  [data-state="progress"] .dock,
  [data-state="ready"] .bay,
  [data-state="dragging"] .bay,
  [data-state="near"] .bay,
  [data-state="placed"] .bay,
  [data-state="progress"] .bay{max-width:min(20vh,56vw)}
  [data-state="ready"] .head p,
  [data-state="dragging"] .head p,
  [data-state="near"] .head p,
  [data-state="placed"] .head p,
  [data-state="progress"] .head p,
  [data-state="ready"] .foot,
  [data-state="dragging"] .foot,
  [data-state="near"] .foot,
  [data-state="placed"] .foot,
  [data-state="progress"] .foot{display:none}
  [data-state="ready"] .panel,
  [data-state="dragging"] .panel,
  [data-state="near"] .panel,
  [data-state="placed"] .panel,
  [data-state="progress"] .panel{min-height:auto;gap:7px;padding:8px 16px 12px}
  [data-state="ready"] .cta,
  [data-state="dragging"] .cta,
  [data-state="near"] .cta,
  [data-state="placed"] .cta,
  [data-state="progress"] .cta{padding:12px 22px}
  [data-state="ready"] .channel,
  [data-state="dragging"] .channel,
  [data-state="near"] .channel,
  [data-state="placed"] .channel,
  [data-state="progress"] .channel{height:clamp(56px,10vh,96px)}
  [data-state="ready"] #panelNote,
  [data-state="dragging"] #panelNote,
  [data-state="near"] #panelNote,
  [data-state="placed"] #panelNote,
  [data-state="progress"] #panelNote{display:none}

  /* pause focus on mobile: the panel owns the bottom of the phone screen */
  [data-state="paused"] .dock,
  [data-state="expired"] .dock,
  [data-state="verified"] .dock,
  [data-state="complete"] .dock,
  [data-state="paused"] .bay,
  [data-state="expired"] .bay,
  [data-state="verified"] .bay,
  [data-state="complete"] .bay{max-width:min(16vh,54vw)}

  /* pause drama on mobile: the halt gets a room of its own */
  [data-state="paused"] .channel{height:clamp(96px,13vh,126px);gap:8px}
  [data-state="paused"] .pct{font-size:clamp(40px,11vw,58px)}
  [data-state="paused"] .channel__stat b{font-size:11px;letter-spacing:.16em}
  [data-state="paused"] .channel__stat span{font-size:8.5px;letter-spacing:.18em}
  [data-state="paused"] .rail__note{font-size:8.5px;top:calc(100% + 4px)}
  [data-state="expired"] .channel,
  [data-state="verified"] .channel,
  [data-state="complete"] .channel{height:clamp(56px,9vh,90px)}

  /* every screen that carries the panel must close inside the viewport:
     subline and footer step aside, the panel tightens — the same trade the
     short-view query below already makes (owner-approved 02.09) */
  [data-state="paused"] .head p,
  [data-state="expired"] .head p,
  [data-state="verified"] .head p,
  [data-state="complete"] .head p{display:none}
  [data-state="paused"] .foot,
  [data-state="expired"] .foot,
  [data-state="verified"] .foot,
  [data-state="complete"] .foot{display:none}
  [data-state="paused"] .panel,
  [data-state="expired"] .panel,
  [data-state="verified"] .panel,
  [data-state="complete"] .panel{min-height:auto;gap:7px;padding:8px 16px 12px}
  [data-state="paused"] .cta,
  [data-state="expired"] .cta,
  [data-state="verified"] .cta,
  [data-state="complete"] .cta{padding:12px 22px}
}
@media (max-width:900px) and (max-height:720px){
  .head{padding-top:0;padding-bottom:4px}
  .head p{margin-top:5px}
}

/* --------------------------------------------------- short mobile view == */
@media (max-width:480px) and (max-height:700px){
  .head { padding-top:2px; padding-bottom:4px; }
  .head h1 { font-size:clamp(18px,5vw,23px); }
  .head p { font-size:11px; margin-top:4px; }
  .topbar { padding:6px 10px; }
  .assure { display:none; }
  .panel { min-height:clamp(84px,12vh,110px); gap:8px; }
  .foot { font-size:10px; padding:8px 10px 12px; }
  .deck { gap:4px; padding-left:10px; padding-right:10px; }

  [data-state="paused"] .dock,
  [data-state="expired"] .dock,
  [data-state="verified"] .dock,
  [data-state="complete"] .dock,
  [data-state="paused"] .bay,
  [data-state="expired"] .bay,
  [data-state="verified"] .bay,
  [data-state="complete"] .bay{max-width:min(15vh, 46vw)}

  [data-state="paused"] .channel{height:clamp(92px,15vh,126px);gap:5px}
  [data-state="paused"] .pct{font-size:clamp(30px,10vw,44px)}
  [data-state="paused"] .channel__stat b{font-size:10px}
  [data-state="paused"] .rail__note{font-size:8px;top:calc(100% + 3px)}
  [data-state="expired"] .channel,
  [data-state="verified"] .channel,
  [data-state="complete"] .channel{height:clamp(40px,7vh,64px)}

  .picker{gap:7px;margin-top:6px}
  .cell{width:38px}

  [data-state="paused"] .head h1,
  [data-state="expired"] .head h1,
  [data-state="verified"] .head h1,
  [data-state="complete"] .head h1{font-size:clamp(15px,4.2vw,19px)}

  [data-state="paused"] .head p,
  [data-state="expired"] .head p,
  [data-state="verified"] .head p,
  [data-state="complete"] .head p{display:none}

  [data-state="paused"] .panel,
  [data-state="expired"] .panel,
  [data-state="verified"] .panel,
  [data-state="complete"] .panel{min-height:auto;gap:6px}

  [data-state="paused"] .cta,
  [data-state="expired"] .cta,
  [data-state="verified"] .cta,
  [data-state="complete"] .cta{padding:11px 20px;font-size:12px}

  [data-state="paused"] .foot,
  [data-state="expired"] .foot,
  [data-state="verified"] .foot,
  [data-state="complete"] .foot{display:none}
}

/* motion-sensitive visitors: same effects, calmer — shorter entrances, slower
   loops, pulses settle into their resting glow; no status or progress is lost */
@media (prefers-reduced-motion:reduce){
  :root{--t-quick:100ms;--t-base:200ms;--t-slow:260ms}
  .chip::before,.grabhint .arrow{animation:none}
  .topbar,.head,.dock,.channel__guide,.bay,.assure,.foot,.item{animation-duration:var(--t-slow)}
  [data-state="placed"] .bay__area{animation-duration:150ms}
  [data-state="placed"] .bay__area::after{animation-duration:220ms}
  [data-state="paused"] .bay__area::after{animation-duration:240ms}
  [data-state="paused"] .pct{animation-duration:150ms}
  [data-state="progress"] .scanline{animation-duration:2.4s;opacity:.6}
  [data-state="paused"] .item.locked,[data-state="paused"] .rail i:nth-of-type(n+37):not(.on){animation:none}
  *{scroll-behavior:auto}
}