/* Play stage. Opens from a cover click. Black screen, 3D deck, "Orbit" camera. About 4.9 s, then idle. */
.play{--stage:#0b0b0a;border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:var(--stage);color:var(--paper);display:none;flex-direction:column;overflow:hidden}
.play[open]{display:flex;animation:play-in .45s ease-out both}
.play::backdrop{background:#0b0b0a}
@keyframes play-in{from{opacity:0}}
.play button{appearance:none;background:transparent;border:1px solid #f3f0e733;color:var(--paper);font:10px/1.5 'Courier New',monospace;letter-spacing:1px;padding:9px 13px;cursor:pointer}
.play button:hover{background:var(--paper);color:var(--stage);border-color:var(--paper)}
.play button:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.play-top{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;gap:16px}
.play-top .eyebrow{color:#cbd2bf;font-size:10px}
.play-actions{display:flex;gap:6px}
#play-close{width:38px;height:38px;padding:0;font:20px/1 Arial,sans-serif}
.play-stage-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.play-stage{width:1000px;height:640px;flex:none;position:relative;transform:scale(var(--fit,1));transform-origin:center}
.play-meta{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:18px 32px 30px;opacity:0;transform:translateY(12px)}
.play[data-ready="true"] .play-meta{animation:play-rise .6s ease-out both}
@keyframes play-rise{to{opacity:1;transform:none}}
.play-meta .eyebrow{color:#cbd2bf;font-size:10px}
.play-meta h2{font:normal clamp(28px,3.4vw,44px)/1.05 Georgia,serif;letter-spacing:-1px;margin:8px 0 6px}
.play-meta p{margin:0;font-size:13px;color:#d3d8c9}
.play-meta a{font-size:12px;padding:10px 0;white-space:nowrap;color:var(--paper)}
.play-meta a:hover{color:#e0e8a7}

/* 3D deck. Deck space is 900×560 px; z points at the top-down camera. */
.deck-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#1a1a17 0,#0b0b0a 62%)}
.deck-scene .world{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 44%}
.deck-scene .idle{position:absolute;inset:0;transform-style:preserve-3d;animation:deck-idle 9s ease-in-out 5.2s infinite alternate}
@keyframes deck-idle{to{transform:scale(1.02) translateY(-5px)}}
.deck-scene .rig{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:deck-rig 5.4s both}
.deck-scene .deck{position:absolute;left:0;top:0;width:900px;height:560px;transform-style:preserve-3d}
.deck-scene .deck>*{position:absolute}
.deck-scene .plinth-top{left:0;top:0;width:900px;height:560px;border-radius:18px;background:#181816;box-shadow:inset 0 0 0 1px #f3f0e71f}
.deck-scene .plinth-front{left:0;top:560px;width:900px;height:46px;background:#111110;transform-origin:top;transform:rotateX(-90deg);border-radius:0 0 6px 6px;box-shadow:inset 0 -1px 0 #f3f0e714}
.deck-scene .plinth-side{left:900px;top:0;width:46px;height:560px;background:#0e0e0d;transform-origin:left;transform:rotateY(90deg)}
.deck-scene .platter-rim{left:400px;top:300px;width:400px;height:400px;margin:-200px;border-radius:50%;background:#1e1e1b;transform:translateZ(4px);box-shadow:inset 0 0 0 1px #f3f0e72e}
.deck-scene .platter{left:400px;top:300px;width:376px;height:376px;margin:-188px;border-radius:50%;background:#242421;transform:translateZ(10px)}
.deck-scene .mat{left:400px;top:300px;width:340px;height:340px;margin:-170px;border-radius:50%;background:#1a1a18;transform:translateZ(11px)}
.deck-scene .spindle{left:400px;top:300px;width:8px;height:8px;margin:-4px;border-radius:50%;background:#e8e4d6;transform:translateZ(24px)}
.deck-scene .disk-pose{left:0;top:0;width:300px;height:300px;margin:-150px;transform-style:preserve-3d;animation:deck-disk 3.25s both}
.deck-scene .disk-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:deck-spinup 1s cubic-bezier(.6,0,.9,.5) 3.4s both,deck-spin 1.6s linear 4.4s infinite}
.deck-scene .disk-spin>*{position:absolute}
.deck-scene .disk-body{inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#0e0e0d 0 2.2px,#161614 2.2px 4.4px);box-shadow:inset 0 0 0 1px #f3f0e73a,inset 0 0 70px #00000099}
.deck-scene .disk-label{left:50%;top:50%;width:104px;height:104px;margin:-52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px #f3f0e766;transform:translateZ(.6px)}
.deck-scene .disk-label img{display:block;width:100%;height:100%;object-fit:cover}
.deck-scene .disk-hole{left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#0b0b0a;transform:translateZ(1.2px)}
.deck-scene .disk-sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,transparent 0 20%,#f3f0e712 30%,transparent 40%,transparent 60%,#f3f0e70c 70%,transparent 80%);transform:translateZ(1.5px);pointer-events:none}
.deck-scene .arm-base{left:730px;top:120px;width:64px;height:64px;margin:-32px;border-radius:50%;background:#2a2a27;transform:translateZ(30px);box-shadow:inset 0 0 0 1px #f3f0e74a}
.deck-scene .arm-base-side{left:730px;top:120px;width:64px;height:64px;margin:-32px;border-radius:50%;background:#1c1c1a;transform:translateZ(14px)}
.deck-scene .arm-pivot{left:730px;top:120px;width:0;height:0;transform-style:preserve-3d;animation:deck-arm .9s cubic-bezier(.4,0,.2,1) 3.3s both}
.deck-scene .arm-pivot>*{position:absolute}
.deck-scene .arm-tube{left:-26px;top:-4px;width:300px;height:8px;border-radius:4px;background:#d8d4c7}
.deck-scene .arm-weight{left:-70px;top:-11px;width:44px;height:22px;border-radius:4px;background:#3a3a36;box-shadow:inset 0 0 0 1px #f3f0e74a}
.deck-scene .arm-head{left:264px;top:-9px;width:36px;height:18px;border-radius:3px;background:#e8e4d6;transform:rotate(-22deg)}
.deck-scene .sleeve-anchor{left:230px;top:60px;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-80deg)}
.deck-scene .sleeve{position:absolute;left:-150px;top:-300px;width:300px;height:300px;background:#151513;box-shadow:inset 0 0 0 1px #f3f0e75a}
.deck-scene .sleeve img{display:block;width:100%;height:100%;object-fit:cover}
.deck-scene .sleeve::after{content:"";position:absolute;top:0;right:0;width:24px;height:100%;background:linear-gradient(90deg,transparent,#00000090)}
.deck-scene .sleeve-shadow{position:absolute;left:-160px;top:-14px;width:320px;height:34px;border-radius:50%;background:radial-gradient(#00000099,transparent 70%);transform:rotateX(80deg) translateZ(-2px)}

@keyframes deck-rig{
  0%,31%{transform:translate3d(500px,330px,0) scale3d(1.5,1.5,1.5) rotateX(76deg) rotateZ(0deg) translate3d(-230px,-40px,-140px);animation-timing-function:cubic-bezier(.5,0,.25,1)}
  62%{transform:translate3d(500px,320px,0) scale3d(1,1,1) rotateX(54deg) rotateZ(-12deg) translate3d(-430px,-250px,-10px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{transform:translate3d(500px,345px,0) scale3d(1.1,1.1,1.1) rotateX(50deg) rotateZ(-14deg) translate3d(-400px,-225px,-10px)}
}
@keyframes deck-disk{
  0%,18%{transform:translate3d(230px,60px,0) rotateX(-80deg) translate3d(0,-150px,-3px);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  52%{transform:translate3d(230px,60px,0) rotateX(-80deg) translate3d(330px,-150px,-3px);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  82%{transform:translate3d(400px,300px,90px) rotateX(-14deg) translate3d(0,0,0);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{transform:translate3d(400px,300px,14px) rotateX(0deg) translate3d(0,0,0)}
}
@keyframes deck-arm{0%{transform:translateZ(34px) rotateZ(95deg)}85%{transform:translateZ(34px) rotateZ(132deg)}100%{transform:translateZ(34px) rotateZ(131.2deg)}}
@keyframes deck-spinup{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes deck-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(max-width:900px){.play-top{padding:16px 18px}.play-meta{padding:12px 18px 22px;flex-direction:column;align-items:start;gap:10px}.play-meta h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){
  .play[open]{animation:none}
  .play[data-ready="true"] .play-meta{animation:none;opacity:1;transform:none}
  .deck-scene *{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}
}
@media(forced-colors:active){.play{border:1px solid CanvasText}.play button{border-color:ButtonText}}

/* Sound: a preview line under the title, a sound toggle, and the arm lifting when the preview ends. */
.play-track{margin:6px 0 0;font:10px/1.5 'Courier New',monospace;letter-spacing:1px;text-transform:uppercase;color:#cbd2bf}
.play-track[hidden]{display:none}
.play button[aria-pressed="false"]{color:#a9ad9f;border-style:dashed}
.deck-scene.ended .arm-pivot{animation:deck-arm-lift 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes deck-arm-lift{from{transform:translateZ(34px) rotateZ(131.2deg)}to{transform:translateZ(34px) rotateZ(95deg)}}
.deck-scene.ended .disk-spin{animation-play-state:paused}