/* The card itself. Shared by the editor and by the file it downloads, so the
   card someone receives is exactly the card that was made. Colour here belongs
   to the card (the foil and the paper the maker picked), not to the site. */
.fc-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; perspective: 2000px; touch-action: none; -webkit-user-select: none; user-select: none; overflow: hidden; }
.fc-card {
  --turn: 0deg; --shift: 0px; --sc: 1; --cover: 0deg;
  position: relative; width: var(--w, 300px); height: var(--h, 420px);
  transform-style: preserve-3d;
  transform: scale(var(--sc)) rotateY(var(--turn)) translateX(var(--shift));
  transition: transform 1s cubic-bezier(.22, .8, .25, 1);
  cursor: grab; outline: none;
}
.fc-card:focus-visible { outline: 2px solid rgba(0, 0, 0, .5); outline-offset: 10px; }
.fc-card.fc-dragging { transition: none; cursor: grabbing; }
.fc-cover, .fc-page { position: absolute; inset: 0; transform-style: preserve-3d; }
.fc-cover { transform-origin: 0 50%; transform: translateZ(1.5px) rotateY(var(--cover)); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
.fc-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--paper);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 14px 34px -14px rgba(0, 0, 0, .35);
}
.fc-back, .fc-inside-left { transform: rotateY(180deg); }
/* the faint tooth of card stock, over every face */
.fc-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fc-inside-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, rgba(0, 0, 0, .07)); }
.fc-inside::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .08), transparent 14%); }
.fc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Foil: a metallic gradient seen only through the mask, with a sheen that
   follows the light. The wrapper's two shadows raise it off the paper. */
.fc-foilwrap { position: absolute; inset: 0; filter: drop-shadow(0 -.6px 0 rgba(255, 255, 255, .55)) drop-shadow(0 .8px .7px rgba(0, 0, 0, .38)); pointer-events: none; }
.fc-foil, .fc-ink {
  background-image: var(--foil);
  background-size: 320% 100%, 240% 240%;
  background-position: var(--sx, 50%) 0, var(--bx, 50%) var(--by, 50%);
}
.fc-foil {
  position: absolute; inset: 0;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat;
}
.fc-ink { -webkit-background-clip: text; background-clip: text; color: transparent; }

.fc-letter {
  position: absolute; inset: 13% 11%; display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.32; color: var(--paper-ink);
}
.fc-made { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: var(--paper-ink); }
.fc-made small { display: block; font: 600 calc(var(--w) * .024)/1 system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; opacity: .55; margin-bottom: .6em; }
.fc-made span { display: inline-block; font-size: calc(var(--w) * .088); line-height: 1.2; padding: 0 .25em; filter: drop-shadow(0 .6px 0 rgba(0, 0, 0, .4)); }

@media (prefers-reduced-motion: reduce) {
  .fc-card, .fc-cover { transition-duration: .01s; }
}