/* =========================================================================
   Miramar Brewing: the can
   Built by js/can.js, the same way for every can. The element's height sets everything:
   --H is the label body, --D the diameter (D = 100 : total 236). The body is a 3D cylinder of
   label faces; the SVG shell on top draws the aluminium silhouette and the light, clipped to the
   can outline. Flat fills only.
   ========================================================================= */
.can {
  --H: 360px;          /* label body height, set by JS */
  --D: 180px;          /* diameter, set by JS */
  position: relative; z-index: 3;
  width: var(--D);
  height: min(58vh, 560px);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

/* Label body: starts below the rim, neck and shoulder (24/236 of the can), and runs --tuck (1px)
   under the shell at both ends, so label and aluminium never share an edge */
.can__body {
  position: absolute; left: 0; right: 0;
  top: calc(var(--H) * .12 - var(--tuck, 0px)); height: calc(var(--H) + 2 * var(--tuck, 0px));
  overflow: hidden;    /* the faces' overlaps can't poke past the can's outline at its edges */
  /* No perspective: flat, like the rest of the site, and the label lines up exactly with the
     shell's outline at every turn (with perspective the front grew ~4% and hid its top and bottom
     edges, and the label's rounded corners, under the shoulder and the base). */
}
.can__spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--rot, 0deg)); }
.can__face {
  position: absolute; left: 50%; top: 0; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-repeat: no-repeat;
}
.can__face--seam { background: var(--alu); }      /* bare aluminium where the label's ends meet */

/* Shell: aluminium and light, drawn over the body and clipped to the outline */
.can__shell { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.can__alu { fill: var(--alu); }
.can__rim { fill: var(--alu-3); }
.can__base { fill: var(--alu-2); }
.can__dark { fill: #000000; fill-opacity: .16; }
.can__light { fill: #FFFFFF; fill-opacity: .26; }
.can__light--rim { fill-opacity: .7; }

/* Contact shadow: two flat ellipses centered on the base line, the base covers their top half */
.can__ground { position: absolute; left: 50%; top: 100%; z-index: -1; pointer-events: none; }
.can__ground i { position: absolute; left: 0; top: 0; border-radius: 50%; background: #000000; translate: -50% -50%; }
.can__ground i:nth-child(1) { width: calc(var(--D) * 1.36); height: calc(var(--D) * .18); opacity: .1; }
.can__ground i:nth-child(2) { width: calc(var(--D) * 1.04); height: calc(var(--D) * .12); opacity: .2; }

.can.is-grabbing { cursor: grabbing; }
.can.is-asleep .can__spin { display: none; }   /* off screen (js/can.js): 160 faces were 160 layers every frame drew, wherever you were on the page */