/* ==========================================================================
   Golden Dragon Technology — m3d.css
   The tiles the home page's products are drawn into on phones (PhoneShowcase
   in hero.js). hero.js adds them and sets .m3d-on, only below 860px, so wider
   screens never see a rule of this.
   ========================================================================== */

.m3d { pointer-events: none; user-select: none; }
.m3d__cv { display: block; width: 100%; height: 100%; }

/* Landing: behind the type, the full size of the screen it sits in. */
.m3d-land { position: absolute; inset: 0; z-index: -1; }

/* Chapter: a place of its own under the strapline. */
.m3d-ch { position: relative; width: 92vw; height: 36vh; margin: 3vh auto 0; }

/* Label card: the upper face, with the soft glow the wide layout has. */
.m3d-face { position: absolute; top: 10%; left: 5%; right: 5%; height: 54%; }
.m3d-face::before {
  content: ''; position: absolute; inset: 4% 8%;
  background: radial-gradient(closest-side, rgba(224, 162, 30, .16), rgba(224, 162, 30, 0));
}
.m3d-face .m3d__cv { position: relative; }

/* Checkout: the delivery fills the gap between headline and button. */
.m3d-pallet { position: relative; width: 100%; height: 100%; }

/* The one live canvas, laid over whichever tile is most on screen; the tile's
   own still sits underneath it, hidden while it is there. */
.m3d .m3d__gl { position: absolute; inset: 0; }