/* The flight recorder on the desk: a real six-sided box with a hinged lid.
   Box is 260 × 170 × 64. Every face is centred on the box and pushed out to its side. */
.evidence{perspective:1100px}
.recorder{position:relative;width:260px;height:170px;transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-22deg)}
.recorder::before{content:"";position:absolute;inset:-18px -30px;transform:translateZ(-34px);background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(10px)}
.bx{position:absolute;box-sizing:border-box}
.bx.bottom{left:0;top:0;width:260px;height:170px;transform:translateZ(-32px);background:#5E1E05;border-radius:6px}
.bx.back{left:0;top:53px;width:260px;height:64px;transform:rotateX(90deg) translateZ(85px);background:linear-gradient(#C8450F,#8E2C08)}
.bx.front{left:0;top:53px;width:260px;height:64px;transform:rotateX(-90deg) translateZ(85px);background:linear-gradient(#E0541A,#A8380B);transform-style:preserve-3d;display:flex;align-items:center;justify-content:space-between;padding:0 26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.18)}
.bx.left{left:98px;top:0;width:64px;height:170px;transform:rotateY(-90deg) translateZ(130px);background:linear-gradient(90deg,#9A3008,#C9400E)}
.bx.right{left:98px;top:0;width:64px;height:170px;transform:rotateY(90deg) translateZ(130px);background:linear-gradient(90deg,#B53A0C,#7A2606)}
.bx.floor{left:10px;top:10px;width:240px;height:150px;transform:translateZ(-30px);border-radius:4px;background:radial-gradient(circle at 50% 50%,#2E2820,#120F0C 78%);box-shadow:inset 0 0 24px #000;overflow:hidden}
.plate{font:700 10px var(--display);letter-spacing:.24em;color:#1A0A03;background:#E9DFC4;padding:2px 8px;border-radius:2px;opacity:.85}
.latch{width:20px;height:26px;border-radius:3px;background:linear-gradient(#E3DFD5,#8D8A82);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.4);transform-origin:50% 100%;transition:transform .25s ease}

/* the lid: hinged on the back edge, label on top, painted metal underneath */
.lid{position:absolute;left:0;top:0;width:260px;height:170px;transform-style:preserve-3d;transform-origin:50% 0;transform:translateZ(32px);transition:transform .8s cubic-bezier(.5,0,.2,1) .25s}
.lid-top,.lid-under{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid-top{background:linear-gradient(150deg,#FF7A3D,#FF5A1F 45%,#C9400E);display:grid;align-content:center;justify-items:center;gap:7px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),inset -20px -20px 40px rgba(0,0,0,.16)}
.lid-top b{font:800 22px var(--display);letter-spacing:.18em;text-transform:uppercase;color:#1A0A03}
.lid-top i{font:700 12px var(--display);letter-spacing:.3em;text-transform:uppercase;color:#1A0A03;opacity:.7;font-style:normal}
.rec-stripe{width:80%;height:11px;background:repeating-linear-gradient(90deg,#F4F1EA 0 10px,#C9C5BC 10px 20px);opacity:.9}
.rec-dent{position:absolute;left:30px;top:22px;width:46px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.3),transparent 70%)}
.lid-under{transform:rotateX(180deg);background:linear-gradient(#A8380B,#6E2205);box-shadow:inset 0 0 0 6px rgba(0,0,0,.18)}

/* opening: latches flip down, the lid swings up on its hinge, reels turn, tape runs out to the form */
.intake.opening .latch{transform:rotateX(-150deg)}
.intake.opening .lid{transform:translateZ(32px) rotateX(72deg)}

/* reel-to-reel deck on the floor: tape runs from the full left reel round the rollers and capstan onto the right one */
.deck{width:100%;height:100%;display:block}
.deck .spin{transform-box:fill-box;transform-origin:center}
.deck .tape{fill:none;stroke:#7A5530;stroke-width:4;stroke-linecap:round}
.deck .tape.run{stroke:#E2C391;stroke-width:1.2;stroke-dasharray:2 7;opacity:.7}
.deck .pack,.deck .tape{transition:r 1.4s ease-in-out .3s,d 1.4s ease-in-out .3s}
.intake.opening .deck .pack.l{r:22px}
.intake.opening .deck .pack.r{r:36px}
.intake.opening .deck .tape{d:path("M62,53 C82,53 84,11 92,11 L148,11 C158,11 160,39 178,39")}
.intake.opening .deck .spin.l{animation:spin 1.1s linear infinite}
.intake.opening .deck .spin.r{animation:spin .8s linear infinite}
.intake.opening .deck .spin.c{animation:spin .5s linear infinite}
.intake.opening .deck .spin.c2{animation:spin .35s linear infinite reverse}
.intake.opening .deck .tape.run{animation:tapeRun .4s linear infinite}
@keyframes tapeRun{to{stroke-dashoffset:-9}}

/* the evidence tag lies on the desk, tied by a string to a ring on the front of the box */
.tag-ring{position:absolute;right:50px;bottom:2px;width:12px;height:11px;box-sizing:border-box;border:2px solid #D8D3C8;border-bottom:0;border-radius:6px 6px 0 0}
.recorder .tag-string{left:202px;top:170px;width:69px;height:2px;transform-origin:0 50%;transform:translateZ(-31px) rotate(124.4deg)}
.recorder .evidence-tag{left:150px;top:205px;right:auto;bottom:auto;transform-origin:13px 22px;transform:translateZ(-31px) rotate(14deg);box-shadow:3px 4px 0 rgba(0,0,0,.35)}
.recorder .evidence-tag::before{top:22px}

/* header search: open another case from anywhere */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top-search{flex:1;max-width:520px;display:flex;gap:8px}
.top-search input{flex:1;min-width:0;background:rgba(238,232,216,.06);border:1px solid #4A4236;border-radius:3px;color:var(--on-desk);font:700 14px var(--type);padding:9px 12px;outline:none}
.top-search input::placeholder{color:#8A8170}
.top-search input:focus{border-color:var(--orange);background:rgba(238,232,216,.1)}
.top-search button{font:800 13px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);background:var(--paper);border:2px solid var(--stamp);border-radius:3px;padding:0 14px;cursor:pointer}
.top-search button:hover{background:var(--stamp);color:var(--paper)}

@media (max-width:900px){
  .recorder{transform:scale(.8) rotateX(52deg) rotateZ(-22deg)}
  .top{flex-wrap:wrap}
  .top-search{order:3;flex-basis:100%;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .lid,.latch,.deck .pack,.deck .tape{transition:none}
  }