/* A cover as a card of glass, gold dust behind it (public/glass-card.js): the share sheet's and the onboarding's song.
   The card's size, corners and shadow are its page's own; here, its lean (--rx / --ry) and its glass. */
.gc-card { position: relative; z-index: 1; transform: perspective(var(--gc-depth, 600px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.gc-card img { -webkit-user-drag: none; user-select: none; } /* a song's card, not a picture to drag off the page */
/* the glass: a bright edge along its top, a fixed sheen across it, and a light that follows the lean (--gx / --gy) */
.gc-glare { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 38%, transparent 62%),
    linear-gradient(125deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* gold dust: grains from the card's centre out to (--x, --y), glinting on the way (its box: positioned, the card's centre at `top`) */
.gc-dust { position: absolute; left: 50%; width: 0; height: 0; pointer-events: none; }
.gc-dust i { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: #ffe7a8; box-shadow: 0 0 calc(var(--s) * 2) calc(var(--s) * .4) rgba(255, 184, 72, .75); }
.gc-dust .g1 { animation: gc-dust1 var(--t) cubic-bezier(.2, .6, .4, 1) var(--w) infinite; }
.gc-dust .g2 { animation: gc-dust2 var(--t) cubic-bezier(.2, .6, .4, 1) var(--w) infinite; }
@keyframes gc-dust1 { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: .9; } 30% { opacity: .35; } 45% { opacity: 1; }
  62% { opacity: .4; } 78% { opacity: .85; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
@keyframes gc-dust2 { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: .6; } 36% { opacity: 1; } 52% { opacity: .3; }
  70% { opacity: .9; } 86% { opacity: .5; } 100% { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gc-dust { display: none; } }