/* Compact cardboard sleeve, clear picture-disc, and a mechanical tonearm. */
.lp-wrap{min-width:0;max-width:560px;width:100%}
.lp-scene{position:relative;perspective:1500px;perspective-origin:50% 45%;aspect-ratio:1.8;touch-action:pan-y;cursor:pointer;isolation:isolate;user-select:none;-webkit-user-select:none}
.lp-object{position:absolute;left:8%;top:15%;width:40%;aspect-ratio:1;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.lp-object.dragging{transition:none}
.sleeve{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(0);transition:transform .6s cubic-bezier(.16,.8,.25,1)}
.sleeve-front,.sleeve-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sleeve-front{transform:translateZ(5px);box-shadow:3px 5px 10px #0007,8px 16px 24px #0008;border:1px solid #c8e0e950}
.sleeve-front .cover{width:100%;height:100%;object-fit:cover;box-shadow:none}
.sleeve-front:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,#fff1,transparent 30%,#0001);box-shadow:inset -2px 0 2px #c2f3ff38}
.sleeve-back{transform:rotateY(180deg) translateZ(5px);border:1px solid #a8cbd550;background:#080d15}
.sleeve-back img{display:block;width:100%;height:100%;object-fit:cover}
.sleeve-spine{position:absolute;top:0;left:-5px;width:10px;height:100%;transform:rotateY(90deg);background:linear-gradient(90deg,#10202c,#557184 45%,#10212f)}
.sleeve-edge{position:absolute;backface-visibility:visible}
.sleeve-edge-top,.sleeve-edge-bottom{left:0;width:100%;height:10px;transform:rotateX(90deg);background:linear-gradient(#173344,#73818a 25%,#122230 75%)}
.sleeve-edge-top{top:-5px}.sleeve-edge-bottom{bottom:-5px}
.sleeve-edge-right{right:-5px;top:0;width:10px;height:100%;transform:rotateY(90deg);background:linear-gradient(90deg,#c3d7d6 0 9%,#03070c 10% 90%,#c3d7d6 91%);box-shadow:inset 0 0 4px #000}
.record-slide{position:absolute;inset:2%;transform-style:preserve-3d;transform:translateX(35.416667%);transition:transform .95s cubic-bezier(.22,.75,.2,1) .22s,opacity .35s}
/* 2% sleeve margin + a 96% disc: this offset exposes exactly a third of the disc. */
.lp-wrap[data-record="in"] .record-slide{transform:translateX(0)}
.lp-wrap[data-record="out"] .record-slide{transform:translateX(107.5%);transition-delay:0s}
.vinyl{position:absolute;inset:0;border-radius:50%;translate:none;transform:rotate(0deg);background:repeating-radial-gradient(circle at center,transparent 0 2px,#bce8ff25 2.4px,#10233412 3.2px,transparent 4.3px),radial-gradient(circle at center,#b9ecff18 0 32%,#07182b16 55%,#87cfe126 97%,#d7f8ff70 99%,transparent 100%);border:1px solid #c9f8ff85;box-shadow:0 6px 18px #0004,inset 0 0 20px #b0e5ff28;animation:galaxy-record-spin 12s linear infinite;animation-play-state:paused}
.vinyl:before{content:"";position:absolute;inset:0;border-radius:50%;background:url(assets/cover.png) 47% 29%/155% 155% no-repeat;opacity:.42;filter:saturate(1.2) brightness(1.24);pointer-events:none;z-index:-1}
.vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,transparent,#d4f8ff55 14%,transparent 26%,#9becff12 41%,transparent 47%,#d0e6ff4d 65%,transparent 79%);box-shadow:inset 0 0 0 5px #c1efff13;pointer-events:none}
.vinyl-label{position:absolute;inset:34%;border-radius:50%;background:linear-gradient(#04111c33,#04111c66),url(assets/cover.png) 47% 29%/250% 250%;border:1px solid #c0f6ff80;color:#f6fffe;text-shadow:0 1px 5px #00131d,0 0 9px #000;box-shadow:0 0 0 2px #78ddeb20,inset 0 0 15px #b3ebff22;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:1}
.vinyl-label span{font-size:clamp(6px,.8vw,11px);letter-spacing:.12em}.vinyl-label small{font-size:clamp(5px,.65vw,8px);letter-spacing:.1em;margin-top:10%}.vinyl-label i{position:absolute;width:7%;height:7%;border-radius:50%;top:47%;left:47%;background:#07121b;border:1px solid #d9faffb3}
.lp-wrap.is-spinning .vinyl{animation-play-state:running}
.tonearm{position:absolute;inset:-10%;width:120%;height:120%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .25s;transform:translateZ(8px)}
.lp-wrap[data-record="out"] .tonearm{opacity:1;transition-delay:.8s}
.tonearm-arm{transform-box:view-box;transform-origin:111px 16px;transform:rotate(-28deg);transition:transform .45s ease;filter:drop-shadow(1px 2px 1px #0008)}
.lp-wrap.is-cueing .tonearm-arm{transform:rotate(0deg);transition-delay:.95s;transition-duration:.55s}
.lp-wrap.is-playing .tonearm-arm{transform:rotate(0deg);transition-delay:0s}
.lp-wrap.back-view .record-slide{opacity:0;visibility:hidden}
.lp-ground{position:absolute;bottom:9%;left:8%;width:75%;height:6%;border-radius:50%;background:#000a;filter:blur(12px);z-index:-1;transition:opacity .5s,transform .5s}
.lp-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;position:relative;z-index:8;margin:0}
.lp-controls button{background:#0b1722df;border:1px solid #637b8d;color:var(--ivory);padding:7px 10px;font-size:12px;border-radius:3px;min-height:36px}
.lp-controls button:hover{background:#213f4c}
.lp-controls #lp-insert{border-color:#71dfdf88;color:#c8ffff}
.lp-wrap figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:10px;letter-spacing:.08em}
.lp-wrap figcaption span:last-child{font-size:9px}
.lp-scene:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:8px}
.energy-aura{position:absolute;inset:3% 0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 42% 50%,#71dfdf55,transparent 32%),radial-gradient(ellipse at 45% 50%,#f479c345,transparent 67%);filter:blur(13px);transition:opacity .5s;z-index:-1}
.energy-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.energy-word{position:absolute;left:42%;top:50%;width:max-content;max-width:88%;z-index:6;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .35s,transform .65s;font-size:clamp(22px,4vw,43px);font-weight:500;letter-spacing:.2em;line-height:1;color:#eeffff;text-shadow:0 0 8px #f0ffff,0 0 24px #71dfdf,0 0 60px #e94dbb}
.lp-scene.is-energized .energy-word{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lp-scene.is-energized .energy-aura{opacity:1}
.lp-scene.is-energized .sleeve{transform:translateZ(24px) translateY(-7px)}
.lp-scene.is-energized .lp-ground{opacity:.55;transform:scale(1.07)}
@media(hover:hover) and (pointer:fine){.lp-scene:hover .sleeve{transform:translateZ(24px) translateY(-7px)}.lp-scene:hover .energy-aura{opacity:.7}}
@keyframes galaxy-record-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:760px){
  .hero .lp-wrap{grid-column:1/-1;grid-row:3;width:100%;max-width:480px}
  .hero .intro{grid-column:1/-1;grid-row:4;font-size:25px;line-height:1.1}.hero .intro br{display:none}
  .hero .subline{display:none}.hero .primary{grid-row:5;margin-top:0}.hero .micro{grid-row:6}.hero .hero-foot{grid-row:7;margin-top:10px}
  .hero h1{font-size:14vw;margin-bottom:0}.hero{gap:12px 20px;padding-bottom:35px}
  .lp-scene{perspective:1100px;aspect-ratio:1.8}.lp-object{width:40%;left:8%;top:15%}
  .lp-controls{gap:5px}.lp-controls button{font-size:11px;padding:6px 9px;min-height:34px}
  .hero .lp-wrap figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:9px;line-height:1.5;margin-top:10px}
  .hero .lp-wrap figcaption span:last-child{font-size:8px}.energy-word{font-size:clamp(20px,5.5vw,34px)}
}
@media(max-width:420px){.nav{flex-wrap:wrap;gap:12px}.nav nav{gap:14px}.wordmark{font-size:17px;letter-spacing:.24em}.hero .intro{font-size:24px}}
@media(max-width:360px){.hero .intro{font-size:21px}.lp-controls button{font-size:10px;padding:5px 7px}.nav nav{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){
  .energy-canvas{display:none}.energy-word,.energy-aura{transition:none}
  .energy-word,.lp-scene.is-energized .energy-word{transform:translate(-50%,-50%)}
  .lp-scene.is-energized .sleeve,.lp-scene:hover .sleeve{transform:none}
  .lp-scene.is-energized .lp-ground{transform:none}.lp-scene.is-energized .energy-aura{opacity:.35}
  .lp-object,.sleeve,.record-slide,.tonearm,.tonearm-arm{transition:none!important}
  .lp-wrap .vinyl{animation:none!important}
}