/* Hand-built record sleeve and vinyl. No generated imagery or moving wall. */
.ec-record-backdrop.scene-backdrop{background:#0c0e11;contain:layout paint;--record-size:min(850px,75vw);--record-x:83%;--record-y:48%;--record-ink:#121518;--record-label:#594a2e;--groove:rgba(187,174,146,.105)}
.ec-record-sleeve{position:absolute;left:47%;top:5%;width:clamp(500px,53vw,880px);height:clamp(500px,53vw,880px);transform:rotate(-13deg);background:#161819;border:1px solid #35332d;border-radius:3px;box-shadow:0 1px 0 #ffffff03 inset;opacity:.68}
.ec-record-sleeve:before{content:'';position:absolute;inset:18px;border:1px solid #9d825a13;pointer-events:none}
.ec-record-sleeve:after{content:'';position:absolute;left:20px;right:20px;top:19px;height:3px;background:#b787482d}
.ec-record-disc{position:absolute;left:var(--record-x);top:var(--record-y);width:var(--record-size);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #635c4c4a;background:var(--record-ink);box-shadow:0 14px 30px #0006,0 0 0 5px #090b0d,inset 0 0 0 2px #a9977210}
.ec-record-disc:before{content:'';position:absolute;inset:10px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 4px,var(--groove) 4.5px 5px,transparent 5.5px 9px);mask-image:radial-gradient(circle,#0000 0 24%,#000 25% 69%,#0000 70%);-webkit-mask-image:radial-gradient(circle,#0000 0 24%,#000 25% 69%,#0000 70%)}
.ec-record-disc:after{content:'';position:absolute;inset:6px;border-radius:50%;border:1px solid #c8b0851f;pointer-events:none}
.ec-record-label{position:absolute;inset:36%;border-radius:50%;background:var(--record-label);border:1px solid #bda37737;box-shadow:inset 0 0 0 6px #0000000b;opacity:.64;overflow:hidden}
.ec-record-label:before{content:'';position:absolute;inset:12%;border:1px solid #e2c79424;border-radius:50%}
.ec-record-label:after{content:'';position:absolute;left:25%;right:25%;top:34%;height:1px;background:#d2b78044;box-shadow:0 7px 0 #d2b7802e,0 14px 0 #d2b7801c}
.ec-record-spindle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#090b0e;box-shadow:0 0 0 1px #b39c6b22}
.ec-record-divider{position:absolute;left:20%;right:20%;bottom:29%;height:1px;background:#d2b78038}
.ec-record-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0c0e11 0%,#0c0e11eb 23%,#0c0e1180 51%,#0c0e1126 80%),linear-gradient(0deg,#0c0e11 0%,#0c0e1100 40%);pointer-events:none}
.app>.ec-record-backdrop{--record-size:min(1040px,100vw);--record-x:107%;--record-y:57%;--groove:rgba(187,174,146,.08)}
.app>.ec-record-backdrop .ec-record-disc{opacity:.5}
.app>.ec-record-backdrop .ec-record-sleeve{left:68%;top:18%;opacity:.25}
.app>.ec-record-backdrop .ec-record-shade{background:linear-gradient(90deg,#0c0e11 0%,#0c0e11e0 36%,#0c0e1199 72%,#0c0e1173)}
@media(max-width:860px){
 .ec-record-backdrop.scene-backdrop{--record-size:660px;--record-x:105%;--record-y:170px}
 .ec-record-sleeve{width:570px;height:570px;left:30%;top:-72px;opacity:.5;transform:rotate(-15deg)}
 .ec-record-disc{opacity:.85}
 .ec-record-shade{background:linear-gradient(90deg,#0c0e11c7,#0c0e1126 90%),linear-gradient(0deg,#0c0e11 8%,#0c0e11d9 30%,#0c0e111a 90%)}
 .app>.ec-record-backdrop{--record-size:760px;--record-x:155%;--record-y:47%}
 .app>.ec-record-backdrop .ec-record-sleeve{left:66%;top:10%;opacity:.18}
 .app>.ec-record-backdrop .ec-record-shade{background:linear-gradient(90deg,#0c0e11ed,#0c0e118c),linear-gradient(0deg,#0c0e11 0%,#0c0e1100 60%)}
}