/* The HOLY SMOKES CD: a printed disc in a clear jewel case. The bare disc surface is iridescent
   and its rainbow turns with the tilt (--sx), the print carries the raccoon and the wordmark,
   glitter foil sits on top, and the case throws moving reflections. js/cd.js builds and tilts it. */

.cd-stage { --rx: 0deg; --ry: 0deg; --sx: 0; --sy: 0; --mx: 50%; --my: 50%; perspective: 900px; display: grid; place-items: center; }
.jewel {
  position: relative; width: var(--cd-size, 300px); aspect-ratio: 1.1 / 1; transform-style: preserve-3d;
  transform: rotateY(var(--rx)) rotateX(var(--ry)); transition: transform 0.15s ease-out;
  filter: drop-shadow(0 30px 40px rgba(0, 10, 40, 0.55));
}

/* case: back tray, then disc, then the clear front lid */
.jewel-tray {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(135deg, rgba(20, 30, 50, 0.92), rgba(4, 10, 24, 0.95));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.jewel-tray::before { /* the tray's clip ring */
  content: ''; position: absolute; left: 54.5%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.25) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 72%);
}
.jewel-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9%; border-radius: 6px 0 0 6px; transform: translateZ(4px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.22) 60%, rgba(255, 255, 255, 0.05));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
}
.jewel-spine::after { /* hinge knuckles */
  content: ''; position: absolute; left: 30%; right: 30%; top: 4%; bottom: 4%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 7%, transparent 7% 46%);
}

/* the disc */
.cd {
  position: absolute; left: 54.5%; top: 50%; width: 84%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  transform: translateZ(2px);
  -webkit-mask: radial-gradient(circle, transparent 7.5%, #000 8%);
  mask: radial-gradient(circle, transparent 7.5%, #000 8%);
}
@keyframes cdSpin { to { rotate: 360deg; } }
.cd-surface { /* bare polycarbonate: rainbow that turns with the tilt + fine grooves */
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
    /* two opposing rainbow flares on silver, like light on a real disc; they swing with the tilt */
    conic-gradient(from calc(var(--sx) * 70deg + var(--sy) * 35deg + 30deg),
      #c9d2dc 0deg, #ff6fc8 18deg, #f3a72e 30deg, #fff3a8 40deg, #d4ec2c 50deg, #4fe3ff 62deg, #7f9bff 74deg, #b98cff 84deg, #c9d2dc 100deg,
      #e8edf2 140deg, #aab4c0 170deg,
      #c9d2dc 180deg, #ff6fc8 198deg, #f3a72e 210deg, #fff3a8 220deg, #d4ec2c 230deg, #4fe3ff 242deg, #7f9bff 254deg, #b98cff 264deg, #c9d2dc 280deg,
      #e8edf2 320deg, #c9d2dc 360deg);
  filter: saturate(1.25) brightness(1.05);
}
.cd-surface::after { /* a second, counter-turning rainbow for the shimmer between the two */
  content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: color-dodge; opacity: 0.55;
  background: conic-gradient(from calc(var(--sx) * -220deg + var(--sy) * 90deg),
    transparent, rgba(255, 255, 255, 0.9) 4%, transparent 9%, transparent 45%, rgba(255, 255, 255, 0.8) 50%, transparent 55%);
}

/* the print: retro CD art on the label ring */
.cd-print {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: 0.68; animation: cdSpin 18s linear infinite;
  background:
    radial-gradient(circle at 50% 50%, transparent 15%, #04070d 15.4%, #04070d 16.4%, transparent 16.8%),
    radial-gradient(circle at 30% 70%, rgba(212, 236, 44, 0.95), rgba(212, 236, 44, 0) 45%),
    radial-gradient(circle at 75% 20%, rgba(226, 72, 60, 0.85), rgba(226, 72, 60, 0) 40%),
    linear-gradient(160deg, #2a7fcb, #7cc6f2 60%, #d6f0ff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.cd-print::before { /* halftone dots, like a screen-printed disc */
  content: ''; position: absolute; inset: 0; opacity: 0.25;
  background: radial-gradient(circle, #04070d 28%, transparent 30%) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(200deg, transparent 35%, #000 80%); mask: linear-gradient(200deg, transparent 35%, #000 80%);
}
.cd-mascot { position: absolute; left: 50%; top: 9%; width: 27%; translate: -50% 0; filter: drop-shadow(0 3px 4px rgba(0, 10, 30, 0.45)); }
.cd-word { position: absolute; left: 22%; right: 22%; bottom: 17%; --hs-paper: #fff; --hs-ink: #04070d; --hs-script: #04070d; }
.cd-word svg, .cd-word img { width: 100%; height: auto; display: block; }
.cd-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-ring text { font: 700 5.6px 'Lexend Exa', sans-serif; letter-spacing: 1.6px; fill: #04070d; text-transform: uppercase; }

/* foil: glitter + a sweeping light band, over disc and print alike */
.cd-foil {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: color-dodge;
  background:
    url(../img/brand/glitter.png) center / 26% auto,
    linear-gradient(calc(110deg + var(--sx) * 40deg), transparent 30%, rgba(255, 240, 200, 0.75) 46%, rgba(160, 230, 255, 0.6) 52%, transparent 66%);
  filter: brightness(1.15) contrast(1.4);
  opacity: 0.8;
}
.cd-hub { /* the clear centre ring around the spindle hole */
  position: absolute; inset: 37%; border-radius: 50%;
  background: radial-gradient(circle, transparent 21%, rgba(255, 255, 255, 0.55) 22%, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.35) 62%, transparent 64%);
}

/* clear front lid */
.jewel-lid {
  position: absolute; inset: 0; border-radius: 6px; transform: translateZ(6px); pointer-events: none;
  background:
    linear-gradient(calc(118deg + var(--sx) * 25deg), transparent 18%, rgba(255, 255, 255, 0.28) 27%, transparent 31%, transparent 58%, rgba(255, 255, 255, 0.16) 64%, transparent 70%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 55%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), inset 0 0 18px rgba(200, 235, 255, 0.25);
}
.jewel-lid::after { /* a whisper of foil on the plastic edge */
  content: ''; position: absolute; inset: 0; border-radius: 6px; mix-blend-mode: color-dodge; opacity: 0.5;
  background: url(../img/brand/glitter.png) center / 30% auto;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  padding: 5px;
}

body.no-motion .cd { animation: none; }
@media (prefers-reduced-motion: reduce) { .cd { animation: none; } }

/* placements */
.pv-downloads .cd-stage { position: absolute; inset: 0; --cd-size: 46%; }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.dl-hero .cd-stage { --cd-size: clamp(220px, 24vw, 360px); padding: 10px 20px; }
@media (max-width: 900px) { .dl-hero { grid-template-columns: 1fr; } .dl-hero .cd-stage { --cd-size: min(78vw, 320px); } }