/* © 2026 Roy Borkin. All rights reserved. See LICENSE. */
/* ==========================================================================
   Vinyl view looks — record designs (classic | clear | flat), record colour, tone-arm designs.
   js/views/vinyl.js puts these on .view-vinyl:
     .vd-classic / .vd-clear / .vd-flat   record design
     --vc        record colour (#rrggbb)     .vc-custom  colour isn't the default black (#111111)
     --vc-ink    #000 on light colours, #fff on dark     .vc-light  light colour   .vc-pale  near-white
   and .arm-classic / .arm-s-arm / .arm-minimal on the .tonearm svg.
   Performance: everything detailed lives inside .vinyl-disc (one composited layer that only
   rotates) or in static layers; no filters or blend modes are added on anything that moves.
   ========================================================================== */
.vinyl-under, .vinyl-swirl { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; display: none; }

/* ---------------- Classic, coloured (black #111111 keeps the original look untouched) ---------------- */
.view-vinyl.vd-classic.vc-custom {
  --g-a: color-mix(in srgb, var(--vc) 66%, #000);   /* groove floor */
  --g-b: color-mix(in srgb, var(--vc) 84%, #000);   /* groove wall catching light */
  --gap: color-mix(in srgb, var(--vc) 40%, #000);   /* smooth band between tracks */
  --rim: color-mix(in srgb, var(--vc) 50%, #000);
}
.view-vinyl.vd-classic.vc-light {
  --g-a: color-mix(in srgb, var(--vc) 80%, #000);
  --g-b: color-mix(in srgb, var(--vc) 94%, #000);
  --gap: color-mix(in srgb, var(--vc) 62%, #000);
  --rim: color-mix(in srgb, var(--vc) 68%, #000);
}
.view-vinyl.vd-classic.vc-custom .vinyl-disc {
  background: var(--g-a);
  box-shadow: inset 0 0 0 .6cqmin var(--rim), inset 0 0 6cqmin rgb(0 0 0 / .6);
}
.view-vinyl.vd-classic.vc-custom .vinyl-grooves {
  background: repeating-radial-gradient(circle at 50% 50%, var(--g-a) 0, var(--g-a) .28cqmin, var(--g-b) .42cqmin, var(--g-a) .56cqmin);
}
.view-vinyl.vd-classic.vc-custom .vinyl-bands {
  background: radial-gradient(circle, transparent 0 43.6%, var(--gap) 43.9% 44.5%, transparent 44.8% 53.6%, var(--gap) 53.8% 54.4%, transparent 54.6% 62.8%, var(--gap) 63% 63.6%, transparent 63.8%);
}
.view-vinyl.vd-classic.vc-custom .vinyl-label { box-shadow: 0 0 0 .5cqmin color-mix(in srgb, var(--vc) 30%, #000), 0 0 0 1.4cqmin var(--rim); }
.view-vinyl.vd-classic.vc-custom .vinyl-sheen {
  background: conic-gradient(from 20deg, transparent 0deg, rgb(255 255 255 / .16) 18deg, transparent 42deg, transparent 180deg, rgb(255 255 255 / .12) 200deg, transparent 226deg, transparent 360deg);
}

/* ---------------- Clear: tinted see-through vinyl ---------------- */
/* Static light table under the record: the tint lit from the top-left, deeper toward the rim.
   It stays still while the swirl + grooves above it turn, which is what reads as "see-through". */
.view-vinyl.vd-clear .vinyl-under {
  display: block;
  background:
    radial-gradient(ellipse 40% 34% at 31% 27%, color-mix(in srgb, var(--vc) 55%, #fff) 0%, color-mix(in srgb, var(--vc) 50%, transparent) 50%, transparent 100%),
    radial-gradient(ellipse 34% 28% at 72% 76%, color-mix(in srgb, var(--vc) 78%, #fff) 0%, transparent 100%),
    radial-gradient(circle closest-side at 50% 50%, color-mix(in srgb, var(--vc) 96%, #fff) 0 38%, var(--vc) 62%, color-mix(in srgb, var(--vc) 62%, #000) 100%);
}
.view-vinyl.vd-clear.vc-pale .vinyl-under {  /* crystal clear: mostly the platter shows through, lit from the top-left */
  background:
    radial-gradient(ellipse 40% 34% at 31% 27%, color-mix(in srgb, var(--vc) 80%, #fff) 0%, color-mix(in srgb, var(--vc) 30%, transparent) 55%, transparent 100%),
    radial-gradient(ellipse 34% 28% at 72% 76%, color-mix(in srgb, var(--vc) 45%, transparent) 0%, transparent 100%),
    radial-gradient(circle closest-side at 50% 50%, color-mix(in srgb, var(--vc) 62%, #3a3a40) 0 38%, color-mix(in srgb, var(--vc) 45%, #2a2a2f) 70%, color-mix(in srgb, var(--vc) 25%, #0c0c0e) 100%);
}
.view-vinyl.vd-clear .vinyl-under::before, .view-vinyl.vd-clear .vinyl-under::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
/* the platter seen (softly) through the record — it stays still while the record spins */
.view-vinyl.vd-clear .vinyl-under::before {
  background: radial-gradient(circle closest-side, transparent 0 30%, rgb(0 0 0 / .1) 31% 32%, transparent 33.5% 80.5%, rgb(0 0 0 / .16) 81.5% 82.5%, transparent 84%);
}
.view-vinyl.vd-clear .vinyl-under::after {   /* strobe dots on the platter rim */
  background: repeating-conic-gradient(rgb(0 0 0 / .22) 0 1.1deg, transparent 1.5deg 3.6deg, rgb(0 0 0 / .22) 4deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 91.6%, #000 92.2% 94.6%, transparent 95.2%);
  mask-image: radial-gradient(circle closest-side, transparent 0 91.6%, #000 92.2% 94.6%, transparent 95.2%);
}
.view-vinyl.vd-clear .vinyl-disc {
  background: color-mix(in srgb, var(--vc) 10%, transparent);
  box-shadow:
    inset 0 0 0 .3cqmin color-mix(in srgb, var(--vc) 40%, #fff),       /* the polished edge catches the light */
    inset 0 0 0 1.2cqmin color-mix(in srgb, var(--vc) 70%, transparent),
    inset 0 0 8cqmin rgb(0 0 0 / .4);
}
.view-vinyl.vd-clear .vinyl-grooves {
  inset: 2.4%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgb(0 0 0 / .075) 0 .14cqmin, transparent .2cqmin .36cqmin, rgb(255 255 255 / .045) .42cqmin .48cqmin, transparent .52cqmin .58cqmin);
}
.view-vinyl.vd-clear .vinyl-swirl {
  display: block; inset: 1%;
  background: center / 100% 100% no-repeat;
  opacity: .6;
}
.view-vinyl.vd-clear.vc-pale .vinyl-swirl { opacity: .38; }
.view-vinyl.vd-clear .vinyl-bands {
  background: radial-gradient(circle, transparent 0 43.6%, rgb(255 255 255 / .11) 43.9% 44.4%, transparent 44.7% 53.6%, rgb(255 255 255 / .1) 53.8% 54.3%, transparent 54.6% 62.8%, rgb(255 255 255 / .09) 63% 63.5%, transparent 63.8%);
}
.view-vinyl.vd-clear .vinyl-label { box-shadow: 0 0 0 .45cqmin rgb(0 0 0 / .28), 0 0 0 1.4cqmin color-mix(in srgb, var(--vc) 40%, transparent); }
.view-vinyl.vd-clear .vinyl-sheen {
  background:
    conic-gradient(from 20deg, transparent 0deg, rgb(255 255 255 / .2) 16deg, rgb(255 255 255 / .05) 30deg, transparent 44deg, transparent 182deg, rgb(255 255 255 / .16) 200deg, transparent 228deg, transparent 360deg);
}

/* ---------------- Flat: solid disc, a few crisp rings, no gloss ---------------- */
.view-vinyl.vd-flat .vinyl-disc { background: var(--vc); box-shadow: inset 0 0 0 .7cqmin color-mix(in srgb, var(--vc) 82%, var(--vc-ink)); }
.view-vinyl.vd-flat .vinyl-grooves {
  --r: color-mix(in srgb, var(--vc) 68%, var(--vc-ink));
  /* a few crisp rings (closest-side: % of the record's radius) */
  background: radial-gradient(circle closest-side,
    transparent 0 65.6%, var(--r) 65.9% 66.5%, transparent 66.8% 77.6%, var(--r) 77.9% 78.5%, transparent 78.8% 89.1%, var(--r) 89.4% 90%, transparent 90.3%);
}
.view-vinyl.vd-flat .vinyl-bands {
  /* the run-out area next to the label, one shade off */
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--vc) 90%, var(--vc-ink)) 0 calc(var(--lbl, 46) * 1.0417% + 8%), transparent calc(var(--lbl, 46) * 1.0417% + 8.3%));
}
.view-vinyl.vd-flat.big-label .vinyl-bands { display: none; }
.view-vinyl.vd-flat .vinyl-label { box-shadow: 0 0 0 1cqmin var(--vc); }
.view-vinyl.vd-flat .vinyl-hole { background: #e7e7ea; box-shadow: 0 0 0 .5cqmin color-mix(in srgb, var(--vc) 70%, #000); }
.view-vinyl.vd-flat .vinyl-sheen { display: none; }

/* ---------------- tone-arm shadows ---------------- */
.view-vinyl .tonearm.arm-minimal { filter: drop-shadow(.7cqmin .9cqmin 0 rgb(0 0 0 / .32)); }
.view-vinyl .tonearm.arm-minimal.lifted { filter: drop-shadow(1.6cqmin 2cqmin 0 rgb(0 0 0 / .22)); }
.view-vinyl.vc-light:not(.vc-pale.vd-clear) .tonearm.arm-minimal { --arm-ink: #26262b; --arm-mid: #55555c; --arm-base: #d9d9de; }

/* ---------------- options: record colour swatches ---------------- */
.vc-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5cqmin; max-width: 58cqmin; }
.vc-sw {
  position: relative; width: 6.6cqmin; height: 6.6cqmin; border-radius: 50%; flex: none;
  background: var(--c, transparent); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .3);
  display: grid; place-items: center; overflow: visible;
  outline: .45cqmin solid transparent; outline-offset: .5cqmin; transition: outline-color .2s, transform .2s;
}
.vc-sw.on { outline-color: var(--accent); }
.vc-sw:active { transform: scale(.9); }
.vc-sw.any { background: var(--c, var(--glass)); font-size: 4cqmin; font-weight: 600; color: var(--fg); line-height: 1; }
.vc-sw.any.set { color: var(--sw-ink, #fff); }
.vc-sw.any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }