/* --------------------------------------------------------------------------
   Card wallpaper

   The backdrop behind every screen: a tiled field of playing cards, tinted in the skin's own
   pattern colour and drifting slowly across the viewport. It is the sibling Yahtzee project's
   dice wallpaper wearing Carbles' suit - same mechanism (a fixed pseudo-element masked by a
   repeating SVG, rotated so the tile lattice never lines up with the screen edges), different
   shapes.

   Drawn as a *mask* rather than a background image so the cards take a colour from skins.css
   instead of carrying their own, which is what lets one wallpaper follow all four skins.
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  isolation: isolate;
}

.page::before {
  content: "";
  position: fixed;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-card-pattern);
  opacity: var(--card-pattern-alpha);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='%23000'%3E%3Cg transform='translate(44 42) rotate(-14) scale(0.95)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 10 C -9 2 -9 -6 -3.6 -6 C -1.2 -6 0 -4.2 0 -3 C 0 -4.2 1.2 -6 3.6 -6 C 9 -6 9 2 0 10 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(132 34) rotate(22) scale(0.75)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 -10 C 9 -2 9 5 3.4 5 C 1.6 5 0.7 4.2 0.3 3.4 L 2.4 10 H -2.4 L -0.3 3.4 C -0.7 4.2 -1.6 5 -3.4 5 C -9 5 -9 -2 0 -10 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(138 126) rotate(-9) scale(1.0)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 -10 L 7 0 L 0 10 L -7 0 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(46 130) rotate(16) scale(0.8)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='0' cy='-5.2' r='4'/%3E%3Ccircle cx='-4.6' cy='2' r='4'/%3E%3Ccircle cx='4.6' cy='2' r='4'/%3E%3Cpath d='M-2 10 L 2 10 L 1 3 L -1 3 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='%23000'%3E%3Cg transform='translate(44 42) rotate(-14) scale(0.95)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 10 C -9 2 -9 -6 -3.6 -6 C -1.2 -6 0 -4.2 0 -3 C 0 -4.2 1.2 -6 3.6 -6 C 9 -6 9 2 0 10 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(132 34) rotate(22) scale(0.75)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 -10 C 9 -2 9 5 3.4 5 C 1.6 5 0.7 4.2 0.3 3.4 L 2.4 10 H -2.4 L -0.3 3.4 C -0.7 4.2 -1.6 5 -3.4 5 C -9 5 -9 -2 0 -10 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(138 126) rotate(-9) scale(1.0)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M0 -10 L 7 0 L 0 10 L -7 0 Z' fill='%23000'/%3E%3C/g%3E%3Cg transform='translate(46 130) rotate(16) scale(0.8)'%3E%3Crect x='-18' y='-26' width='36' height='52' rx='4' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='0' cy='-5.2' r='4'/%3E%3Ccircle cx='-4.6' cy='2' r='4'/%3E%3Ccircle cx='4.6' cy='2' r='4'/%3E%3Cpath d='M-2 10 L 2 10 L 1 3 L -1 3 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--card-tile-size) var(--card-tile-size);
  mask-size: var(--card-tile-size) var(--card-tile-size);
  transform: rotate(45deg);
  animation: card-drift var(--card-drift-duration, 120s) linear infinite;
  will-change: transform;
}

/* Motion turned off in settings (§12 2.2.2). carbles-settings.js stamps the attribute at load,
   before the drift has a frame to run in. The cards themselves stay: it is the movement the
   switch is about, not the wallpaper. */
[data-background-motion="off"] .page::before {
  animation: none;
}

/* Someone who has asked their device to reduce motion gets it held still without having to find
   this app's own switch. */
@media (prefers-reduced-motion: reduce) {
  .page::before {
    animation: none;
  }
}

/* The drift distance is a whole number of tiles (carbles-settings.js), so the layer arrives back
   at a position indistinguishable from where it started and the loop is seamless. Defaulting both
   to 0px keeps a script-less host from jumping at the wrap. */
@keyframes card-drift {
  from { transform: rotate(45deg) translate(0, 0); }
  to   { transform: rotate(45deg) translate(var(--card-drift-x, 0px), var(--card-drift-y, 0px)); }
}