.cd-collection{margin:55px 0 80px}.cd-section-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff25;padding-top:20px;margin-bottom:30px}.cd-section-heading .eyebrow{color:#ee3d40;text-transform:uppercase}.cd-section-heading>span{font:10px monospace;color:#aaa294}.cd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 35px}.cd-card{min-width:0}.cd-object{position:relative;aspect-ratio:1.1;perspective:1000px;isolation:isolate;transform:rotateX(var(--cd-rx,0deg)) rotateY(var(--cd-ry,0deg));transition:transform .18s ease-out}.cd-object:after{content:'';position:absolute;left:9%;right:15%;bottom:7%;height:12%;background:#0009;filter:blur(15px);border-radius:50%;z-index:-1}.cd-case{position:absolute;left:5%;top:7%;width:78%;height:84%;display:flex;background:linear-gradient(110deg,#ffffff66,#8e969a66 6%,#141719 9%,#ffffff55 10%,#62696d66 96%,#f9ffffaa);border:1px solid #b4bfc38a;border-radius:3px;box-shadow:2px 3px 0 #454b4e,4px 5px 0 #111,10px 18px 24px #0008;transform:rotate(-5deg);transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:2;padding:4px 5px 4px 3px}.cd-spine{width:9%;flex:none;background:repeating-linear-gradient(90deg,#ffffff12 0,#ffffff12 1px,#0008 1px,#0008 3px);border-right:1px solid #ffffff70;box-shadow:inset -3px 0 4px #0009;position:relative}.cd-spine:after{content:'COMPACT DISC';position:absolute;left:20%;bottom:13%;writing-mode:vertical-rl;transform:rotate(180deg);font:5px monospace;letter-spacing:1px;color:#d8dbdb88}.cd-cover{display:block;width:91%;height:100%;position:relative;border:1px solid #ddd5;background:#111;padding:0;cursor:zoom-in;border-radius:1px;overflow:hidden;transform-style:preserve-3d}.cd-cover>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .4s}.cd-reflection{position:absolute;inset:0;background:linear-gradient(120deg,#ffffff04 15%,#ffffff28 28%,#ffffff03 31%,transparent 45%,#ffffff22 70%,#ffffff05 73%);pointer-events:none;box-shadow:inset 0 0 0 2px #ffffff22,inset -4px 0 5px #0005;transition:opacity .4s}.cd-hinge{position:absolute;left:0;width:8px;height:14px;background:linear-gradient(90deg,#ccd5da66,#4448);border:1px solid #ffffff45}.cd-hinge.top{top:8%}.cd-hinge.bottom{bottom:8%}.cd-disc{position:absolute;left:13%;top:13%;width:73%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 20deg,#edf4f6,#69727b,#d6e6eb,#83aeaa,#dcd8f2,#fff,#6f858e,#e9f3ef);box-shadow:3px 8px 13px #0007;border:1px solid #ffffffa0;transform:translateX(8%) rotate(-12deg);transition:transform .65s cubic-bezier(.2,.75,.2,1);z-index:1}.cd-disc:before{content:'';position:absolute;inset:10px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0px,transparent 2px,#ffffff12 3px,transparent 4px),conic-gradient(from 20deg,#dbe2e8,#83949d,#edf4f6,#b5c9c5,#d8d4ed,#fff,#8b9fa9,#e3eae6)}.cd-disc:after{content:'';position:absolute;left:43%;top:43%;width:14%;height:14%;box-sizing:border-box;border:5px solid #bcc6cb;background:#141413;border-radius:50%;box-shadow:0 0 0 5px #e1e8e95c,0 0 0 6px #0005}.cd-disc>span{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 20%,#fff3 38%,transparent 41%,#acd3d144 58%,transparent 65%);z-index:1}.cd-card:hover .cd-disc,.cd-card:focus-within .cd-disc{transform:translateX(37%) rotate(35deg)}.cd-card:hover .cd-case,.cd-card:focus-within .cd-case{transform:rotate(-9deg) translate(-3px,-5px)}.cd-card:hover .cd-cover>img{filter:saturate(1)}.cd-info{padding:8px 9px 0 5%;display:flex;align-items:flex-start;gap:15px;justify-content:space-between;position:relative;z-index:4}.cd-info h3{font-size:13px;line-height:1.55;font-weight:500;letter-spacing:.2px;max-width:76%;margin:0}.cd-info>a{font-size:11px;color:#ee3d40;white-space:nowrap;padding:3px 0 7px;border-bottom:1px solid #ee3d4055}.cd-info>a:hover{color:#fff;border-color:#fff}.cd-info>a span{margin-left:9px}.cd-cover:focus-visible{outline:2px solid #ee3d40;outline-offset:4px}@media(max-width:900px){.cd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 25px}}@media(max-width:550px){.cd-grid{grid-template-columns:1fr;gap:35px}.cd-object{max-width:360px;margin:auto}.cd-info{padding-left:5%}.cd-section-heading>span{font-size:9px}}@media(prefers-reduced-motion:reduce){.cd-object{transform:none!important}.cd-case,.cd-disc{transition:none}}
/* Reflective silver CD with a transparent spindle hole. */
.cd-disc{background:conic-gradient(from 18deg,#c5cbd1 0deg,#f8fcff 25deg,#89949f 57deg,#e3e8ec 85deg,#acb7c0 120deg,#fff 151deg,#9da9b2 183deg,#e0e8ee 220deg,#84939d 253deg,#f6fcff 287deg,#bdc9d0 325deg,#c5cbd1 360deg);border:1px solid #f3faffb0;box-shadow:none;overflow:hidden;-webkit-mask-image:radial-gradient(circle at center,transparent 0 8.5%,#000 8.9%);mask-image:radial-gradient(circle at center,transparent 0 8.5%,#000 8.9%)}
.cd-disc:before{inset:0;background:repeating-radial-gradient(circle at center,#ffffff06 0px,#ffffff06 1px,#28364310 1.4px,transparent 2px),conic-gradient(from 15deg,transparent 0deg,#fff7 26deg,transparent 38deg,transparent 62deg,#56e8ef65 76deg,#9a7bff70 86deg,#ff86bf55 96deg,#f6d27770 106deg,#9af2d355 117deg,transparent 135deg,transparent 211deg,#6debd655 229deg,#86a6ff65 239deg,#e795f260 249deg,#f9d57460 260deg,transparent 279deg,transparent 330deg,#fff5 345deg,transparent 360deg);filter:none;box-shadow:inset 0 0 0 3px #fff5,inset 0 0 0 7px #53636d33}
.cd-disc:after{left:36%;top:36%;width:28%;height:28%;background:radial-gradient(circle at center,transparent 0 27%,#d9e2e980 28% 38%,#f6fbffb0 39% 43%,#7c8c9877 44% 47%,#dbe3e8bb 48% 65%,#ffffff70 66% 70%,#65768366 71% 73%,transparent 74%);border:0;box-shadow:none}
.cd-disc>span{inset:3%;background:conic-gradient(from 35deg,transparent 0deg,#ffffff30 25deg,transparent 40deg,transparent 160deg,#fff5 188deg,transparent 207deg,transparent);mix-blend-mode:screen;opacity:.65}
.cd-card:hover .cd-disc>span,.cd-card:focus-within .cd-disc>span{transform:rotate(20deg);opacity:.9;transition:transform .65s ease,opacity .4s}
@media(min-width:901px){.cd-grid{column-gap:70px}}
.cd-card:hover .cd-disc,.cd-card:focus-within .cd-disc{transform:translateX(54%) rotate(35deg)}
