/* Original case-opening choreography and solid printed disc. */
.cd-transition-layer { background:transparent; perspective:none; }
.cd-transition-camera { position:absolute; perspective:1600px; overflow:visible; }
.cd-transition-layer .cd-opening-case { transform-style:preserve-3d; }
.cd-transition-layer .cd-opening-tray { padding:0; background:transparent; transform-style:preserve-3d; border:5px solid var(--light-blue); box-shadow:inset 0 0 0 2px #f9f7f733,5px 8px 20px #112d4e22; }
.cd-transition-layer .cd-opening-tray:before { content:''; position:absolute; inset:0; background:var(--light-blue); transform:translateZ(-4px); pointer-events:none; }
.cd-transition-layer .cd-lid-inside { background:var(--paper); color:var(--navy); border-color:var(--light-blue); }
.cd-transition-layer .cd-inside-edition { border-color:var(--blue); }
.cd-transition-layer .cd-opening-disc { inset:5%; display:block; background:var(--album-color); box-shadow:none; transform:translateZ(1px); transition:none; transform-origin:center; overflow:visible; }
.cd-transition-layer .cd-opening-disc:before,.cd-transition-layer .cd-opening-disc:after { display:none; }
.cd-disc-print { position:absolute; inset:0; border-radius:50%; color:var(--paper); }
.cd-disc-rim { position:absolute; inset:0; border:2px solid #f9f7f7b3; border-radius:50%; box-shadow:inset 0 0 0 2px #dbe2ef55; }
.cd-transition-layer .cd-disc-label { color:var(--paper); top:18%; left:12%; right:12%; font-size:clamp(15px,2.1vw,32px); }
.cd-transition-layer .cd-disc-signature { color:var(--paper); bottom:18%; font-size:8px; }
.cd-disc-hub { position:absolute; left:50%; top:50%; width:13%; aspect-ratio:1; border:2px solid #f9f7f780; border-radius:50%; background:var(--light-blue); transform:translate(-50%,-50%); box-shadow:0 0 0 8px #f9f7f71a,0 0 0 9px #f9f7f733; }
.cd-transition-layer .cd-disc-flying { position:absolute; inset:auto; z-index:5; margin:0; border:0; border-radius:50%; pointer-events:none; will-change:transform; }
.cd-is-opening .cd-album:not(.is-selected) { opacity:.13; }
.cd-collection .is-selected .cd-object>.cd-disc { transform:translateZ(-2px); }
.cd-transition-layer .cd-opening-case:after { display:none; }
.cd-transition-shadow { position:absolute; left:0; bottom:-35px; width:100%; height:14px; background:#112d4e44; border-radius:50%; filter:blur(10px); transform:rotateX(65deg); pointer-events:none; }
.cd-transition-caption { position:absolute; display:grid; place-items:center; font:10px/1.5 'Space Grotesk',sans-serif; color:var(--blue); text-align:center; letter-spacing:.03em; }
.cd-is-opening .cd-help { visibility:hidden; }
.cd-controls,.cd-catalogue,.cd-current-link,.cd-flip { transition:opacity .35s; }
.cd-is-opening .cd-controls>button,.cd-is-opening .cd-catalogue,.cd-is-opening .cd-current-link,.cd-is-opening .cd-flip { opacity:.2; pointer-events:none; }
@media(max-width:767px) { .cd-transition-layer .cd-disc-label { font-size:clamp(12px,3.4vw,19px); }.cd-transition-layer .cd-disc-signature { font-size:5px; }.cd-disc-hub { border-width:1px; box-shadow:0 0 0 4px #f9f7f71a,0 0 0 5px #f9f7f733; }.cd-transition-caption { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .cd-transition-layer * { animation:none!important; transition:none!important; } }
/* The project itself is revealed through the disc, as in the reference. */
.cd-reader-preview { position:absolute; inset:0; z-index:8; overflow:hidden; background:var(--paper); pointer-events:none; will-change:clip-path; }
.cd-reader-preview iframe { display:block; width:100%; height:100%; border:0; background:var(--paper); }
.cd-reader-wash { position:absolute; inset:0; pointer-events:none; }
@media(prefers-reduced-motion:no-preference) {
 .cd-ready .cd-album { transition:transform 450ms var(--cd-reference-shelf,cubic-bezier(.4,0,.6,1)),opacity 450ms ease; }
 .cd-object { transition:transform 500ms var(--cd-reference-turn,cubic-bezier(.333333,0,.666667,1)); }
 .is-turning .cd-object { transition:none; }
}

/* Clear plastic and white ribs along the hinge, instead of a blue strip. */
.cd-spine { background:#f9f7f799; }
.cd-front:before { background:repeating-linear-gradient(0deg,#ffffffb3 0 1px,#f9f7f755 1px 3px); border-right-color:#ffffffb3; }

/* Artwork, title and a small volume number are all the front needs. */
.cd-cover { padding-bottom:30px; }
.cd-cover h2 { font-size:clamp(16px,1.6vw,23px); margin-bottom:4px; }
.cd-volume { position:absolute; bottom:12px; right:14px; font:500 7px var(--heading-font); letter-spacing:.12em; }
body[data-page=projecten] .cd-collection { grid-template-rows:auto minmax(0,1fr) 1px auto; }
@media(max-width:767px) { .cd-cover { padding-bottom:25px; }.cd-cover h2 { font-size:17px; }.cd-volume { right:12px; bottom:10px; font-size:6px; } }
@media(min-width:768px) and (max-height:500px) {
 body[data-page=projecten] .cd-collection { grid-template-rows:minmax(0,1fr) 1px auto; }
 body[data-page=projecten] .cd-heading { grid-row:1; }
 body[data-page=projecten] .cd-stage { grid-row:1; }
 body[data-page=projecten] .cd-progress { grid-row:2; }
 body[data-page=projecten] .cd-controls { grid-row:3; }
 body[data-page=projecten] .cd-cover h2 { font-size:12px; }
 .cd-volume { font-size:5px; right:8px; bottom:7px; }
}

/* More readable ribs in clear plastic, with a disc that slips back into its sleeve. */
.cd-front:before { background:repeating-linear-gradient(0deg,#112d4e69 0 1px,#ffffffed 1px 2px,#dbe2efb3 2px 4px); border-left:1px solid #ffffffd9; border-right-color:#112d4e40; box-shadow:inset 2px 0 3px #112d4e20; }
.cd-collection .cd-object>.cd-disc { transform:translateX(0) translateZ(-2px) rotate(0deg); transition:transform 200ms cubic-bezier(.4,0,.6,1); }
.cd-collection .is-selected.is-disc-peeking .cd-object>.cd-disc { transform:translateX(24%) translateZ(-2px) rotate(24deg); transition:transform 650ms cubic-bezier(.22,.75,.2,1); }
.cd-collection .cd-object>.cd-disc,.cd-transition-layer .cd-opening-disc { background:repeating-radial-gradient(circle,transparent 0 3px,#ffffff26 3px 4px),var(--album-color); }
@media(prefers-reduced-motion:reduce) { .cd-collection .cd-object>.cd-disc { transition:none; } }
