/* The record under the hand (tickets/T126-le-disque-sous-la-main.md): on a
   desktop, hovering the sleeve turns it into the record it holds, the one of
   What's been on. One number, --vinyl, runs from 0 to 1 and everything follows
   it — the corners, the image shrinking to the label, the grooves, the time —
   so the whole morph rides the same curve. ring.js reads it for the contour. */
@property --vinyl { syntax: "<number>"; inherits: true; initial-value: 0; }
/* How round the label stays on its way back upright: 1 while it is still well
   off, 0 in the last few degrees (sleeve-vinyl.js runs it beside `rotate`). */
@property --round { syntax: "<number>"; inherits: false; initial-value: 0; }

@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  /* .now .cover:not(:disabled): it has to carry immersive.css's two
     transitions as well, or it would drop them. */
  .now .cover:not(:disabled) {
    transition: transform var(--immersive-move) var(--immersive-ease), box-shadow 160ms ease,
      --vinyl var(--vinyl-out, 520ms) var(--vinyl-ease, cubic-bezier(0.32, 0.72, 0, 1));
  }
  /* The way back rides the label's turn back upright, on its duration and its
     curve (--vinyl-out, --vinyl-ease: sleeve-vinyl.js) — one movement. */
  /* JS starts both the morph and the spin on the same pointer event. */
  .cover:not(:disabled, .is-sleeve).is-vinyl { --vinyl: 1; }
  /* The incoming state owns its timing so a re-hover never inherits the
     return's slower curve. */
  .now .cover:not(:disabled).is-vinyl {
    transition: transform var(--immersive-move) var(--immersive-ease), box-shadow 160ms ease,
      --vinyl 520ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* One ring, not two: the hover's own (stage.css, T27) goes, and the
     record's contour turns blue to say the hand is on it. */
  .cover:not(:disabled):hover { box-shadow: none; }
  /* The hand's target stays the sleeve's square (23/10). The browser hit-tests
     the rounded corners: a hand in a corner left the record it had just made,
     the sleeve came back square under it, and the two took turns — a blink.
     The contour is a square 4 px out, inside the key, and never rounds off. */
  .cover__ring { transition: color 200ms ease; pointer-events: auto; }
  .cover:not(:disabled):hover .cover__ring { color: var(--primary); }
  .cover:not(:disabled):hover .cover__ring rect { stroke-opacity: 0.25; }
  .cover:not(:disabled):hover .cover__ring .cover__done { stroke-opacity: 1; }

  .cover { border-radius: calc(var(--radius-sleeve) + (50% - var(--radius-sleeve)) * var(--vinyl)); }
  /* The label is 0.5 of a 1.48 record (vinyl.js). */
  .cover__art {
    scale: calc(1 - 0.662 * var(--vinyl));
    /* It squares off with the sleeve, unless it is still well off upright
       (--round): a tilted square leaves the sleeve's corners empty. What tilt
       is left as it squares, the sleeve's clip takes (.cover__well). */
    border-radius: calc(var(--radius-sleeve) + (50% - var(--radius-sleeve)) * max(var(--vinyl), var(--round)));
  }

  /* The record, under the image: the very one the wheel's card paints for
     what is on (crate.css, .pick__art.is-now) — its sweeps of light, its
     grooves, its rim — with the radio's blue on the label for a sleeve with no
     picture. The light stays put while the label turns, as a lamp's would. */
  .cover::before,
  .cover::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--vinyl);
  }
  /* It keeps the sleeve's corners while they round off: it does not appear as
     a disc inside a square, the sleeve becomes it. */
  .cover::before {
    inset: 0;
    border-radius: inherit;
    background:
      conic-gradient(#0000 0deg, #ffffff1c 38deg, #0000 96deg, #0000 190deg, #ffffff12 224deg, #0000 274deg),
      radial-gradient(circle closest-side, var(--primary) 0 33.8%, #0b0b0d 33.8% 36%, transparent 36%),
      repeating-radial-gradient(circle at 50% 50%, #141417 0 1px, #050506 1px 2.5px),
      #0b0b0d;
    box-shadow: 0 0 0 1px #ffffff1a;
  }
  /* On the night's ground a black record vanishes: a faint white halo sets it
     off — the card's record has the same (crate.css). */
  :root[data-theme="dark"] .cover::before { box-shadow: 0 0 0 1px #ffffff1a, 0 0 64px 4px rgb(255 255 255 / 0.07); }
  /* The spindle hole, over the label. */
  .cover::after { inset: calc(50% - 3px); background: #0b0b0d; }

  /* The time leaves the corner, which falls outside the record, for the
     middle of its foot. */
  .cover__left {
    right: calc(4px + (50% - 4px) * var(--vinyl));
    translate: calc(50% * var(--vinyl)) 0;
    /* On the record it needs no veil: white straight on the grooves. */
    background: color-mix(in srgb, var(--bg) calc(72% * (1 - var(--vinyl))), transparent);
    color: color-mix(in srgb, var(--ink) calc(100% * (1 - var(--vinyl))), #fff);
  }
  /* The immersive mode scales the time from the corner (immersive.css): on
     the record it scales from its own middle, or it would slide off centre. */
  .is-immersive .now .cover__left { transform-origin: calc(100% - 50% * var(--vinyl)) bottom; }
}