/* The rendered can (js/can-render.js) - the little that cannot live in the SVG itself.
   Nothing here animates: the can has no motion, so `prefers-reduced-motion` has nothing to say
   about it. What it does carry is the two preferences the finish can offend - translucency and
   contrast - plus print.

   This file is not linked by any page yet; the task that wires the cans into index.html adds
   <link rel="stylesheet" href="css/can.css"> next to the others. Without it the cans still draw
   correctly, they simply stop honouring the two preferences below. */

.can-render {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ---- Less transparency: the beading goes, and the cylinder stops veiling the print ----
   The sheen is alpha over the label, which is exactly the kind of film this preference asks to be
   turned down. The can still shades - a cylinder with no shading is a rectangle - but the type
   underneath comes back to full strength. */
@media (prefers-reduced-transparency: reduce) {
  .can-render .drops { display: none; }
  .can-render .can-sheen { opacity: .45; }
}

/* ---- More contrast: no veil at all, and a defined edge ----
   The cast shadow goes with the veil: at this setting the can is a graphic, and a soft grey pool
   under it is the first thing to muddy against a forced background. */
@media (prefers-contrast: more), (forced-colors: active) {
  .can-render .drops,
  .can-render .can-ground,
  .can-render .can-sheen { display: none; }
  .can-render .can-edge {
    stroke: currentColor;
    stroke-opacity: 1;
    stroke-width: 3;
  }
}

/* ---- Print: belt and braces. The print path should already be asking for `simple`, but a page
   printed before it does must not send a printer several hundred beads per can. ---- */
@media print {
  .can-render .drops { display: none; }
}