/* Reverse-holo foil + sparkles for the card back.
   Uses the same --pointer-* / --card-opacity / --background-* vars as the front. */

.back-portrait-foil {
  position: absolute;
  inset: 2.8%;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  background-image:
    repeating-linear-gradient(
      125deg,
      var(--sun1) 0%,
      var(--sun2) 10%,
      var(--sun3) 20%,
      var(--sun4) 30%,
      var(--sun5) 40%,
      var(--sun1) 50%
    ),
    url("../img/glitter.png");
  background-size: 240% 240%, 55% 55%;
  background-position: var(--background-x) var(--background-y), 40% 30%;
  mix-blend-mode: soft-light;
  opacity: calc(0.18 + var(--card-opacity) * 0.12);
}

.back-shine,
.back-glare,
.back-glitter,
.back-sparkles {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Foil lives mostly on the gold rim so the portrait stays readable. */
.back-shine {
  z-index: 5;
  background-image:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), #fff 8%, transparent 42%),
    repeating-linear-gradient(
      125deg,
      var(--sun1) 0%,
      var(--sun2) 8%,
      var(--sun3) 16%,
      var(--sun4) 24%,
      var(--sun5) 32%,
      var(--sun6) 40%,
      var(--sun1) 48%
    ),
    url("../img/glitter.png");
  background-blend-mode: screen, overlay, soft-light;
  background-size: 140% 140%, 260% 260%, 42% 42%;
  background-position:
    var(--pointer-x) var(--pointer-y),
    var(--background-x) var(--background-y),
    center;
  mix-blend-mode: soft-light;
  opacity: calc(0.42 + var(--card-opacity) * 0.22);
  -webkit-mask: radial-gradient(ellipse 62% 68% at 50% 48%, transparent 58%, #000 76%);
  mask: radial-gradient(ellipse 62% 68% at 50% 48%, transparent 58%, #000 76%);
}

.back-glare {
  z-index: 6;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(48, 100%, 90%, 0.55) 6%,
    hsla(48, 100%, 80%, 0.12) 24%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
  opacity: calc(0.35 + var(--card-opacity) * 0.2);
}

.back-glitter {
  z-index: 7;
  background-image: url("../img/glitter.png");
  background-size: 32% 32%;
  background-position: calc(var(--pointer-from-left) * 50%) calc(var(--pointer-from-top) * 50%);
  mix-blend-mode: screen;
  opacity: calc(0.34 + var(--card-opacity) * 0.28);
  filter: brightness(1.2) contrast(1.2) saturate(1.1);
  animation: back-glitter-pulse 2.4s ease-in-out infinite;
  -webkit-mask: radial-gradient(ellipse 64% 70% at 50% 48%, transparent 52%, #000 78%);
  mask: radial-gradient(ellipse 64% 70% at 50% 48%, transparent 52%, #000 78%);
}

.back-glitter--shift {
  z-index: 8;
  background-size: 70% 70%;
  background-position: var(--pointer-x) var(--pointer-y);
  mix-blend-mode: screen;
  opacity: calc(0.22 + var(--card-opacity) * 0.22);
  filter: brightness(1.15) contrast(1.15);
  animation-duration: 3.1s;
  animation-delay: -1.1s;
}

.back-sparkles {
  z-index: 9;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 18% 78%, #ffe9a6 70%, transparent 71%),
    radial-gradient(1.6px 1.6px at 27% 22%, #fff 70%, transparent 71%),
    radial-gradient(1.2px 1.2px at 36% 64%, #fff6c8 70%, transparent 71%),
    radial-gradient(1.5px 1.5px at 44% 9%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 52% 86%, #ffe08a 70%, transparent 71%),
    radial-gradient(1.7px 1.7px at 61% 31%, #fff 70%, transparent 71%),
    radial-gradient(1.2px 1.2px at 69% 71%, #fff6c8 70%, transparent 71%),
    radial-gradient(1.4px 1.4px at 78% 16%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 86% 58%, #ffe9a6 70%, transparent 71%),
    radial-gradient(1.6px 1.6px at 93% 38%, #fff 70%, transparent 71%),
    radial-gradient(1.2px 1.2px at 12% 48%, #fff6c8 70%, transparent 71%),
    radial-gradient(1.3px 1.3px at 23% 91%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 33% 41%, #ffe08a 70%, transparent 71%),
    radial-gradient(1.5px 1.5px at 48% 53%, #fff 70%, transparent 71%),
    radial-gradient(1.2px 1.2px at 57% 14%, #fff6c8 70%, transparent 71%),
    radial-gradient(1.4px 1.4px at 74% 88%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 82% 7%, #ffe9a6 70%, transparent 71%),
    radial-gradient(1.6px 1.6px at 91% 81%, #fff 70%, transparent 71%),
    radial-gradient(1.2px 1.2px at 5% 67%, #fff6c8 70%, transparent 71%),
    radial-gradient(1.3px 1.3px at 41% 27%, #fff 70%, transparent 71%),
    radial-gradient(1.1px 1.1px at 66% 47%, #ffe08a 70%, transparent 71%);
  mix-blend-mode: screen;
  opacity: calc(0.55 + var(--card-opacity) * 0.35);
}

.back-star {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fffce8;
  clip-path: polygon(50% 0%, 58% 38%, 100% 50%, 58% 62%, 50% 100%, 42% 62%, 0 50%, 42% 38%);
  filter: drop-shadow(0 0 5px #ffe08a) drop-shadow(0 0 10px rgba(255, 244, 200, 0.7));
  animation: back-twinkle 1.7s ease-in-out infinite;
  opacity: 0.88;
}

.back-star:nth-child(1)  { top: 6%;  left: 8%;  animation-delay: 0s; }
.back-star:nth-child(2)  { top: 11%; right: 10%; width: 8px; height: 8px; animation-delay: -0.25s; }
.back-star:nth-child(3)  { top: 28%; left: 4%;  width: 9px; height: 9px; animation-delay: -0.5s; }
.back-star:nth-child(4)  { top: 24%; right: 5%; animation-delay: -0.7s; }
.back-star:nth-child(5)  { top: 48%; left: 7%;  width: 7px; height: 7px; animation-delay: -0.9s; }
.back-star:nth-child(6)  { top: 52%; right: 8%; width: 10px; height: 10px; animation-delay: -1.1s; }
.back-star:nth-child(7)  { top: 71%; left: 6%;  animation-delay: -1.3s; }
.back-star:nth-child(8)  { top: 68%; right: 6%; width: 8px; height: 8px; animation-delay: -1.45s; }
.back-star:nth-child(9)  { top: 88%; left: 14%; width: 9px; height: 9px; animation-delay: -0.15s; }
.back-star:nth-child(10) { top: 86%; right: 13%; animation-delay: -0.85s; }
.back-star:nth-child(11) { top: 38%; left: 88%; width: 7px; height: 7px; animation-delay: -1.6s; }
.back-star:nth-child(12) { top: 14%; left: 46%; width: 8px; height: 8px; animation-delay: -0.4s; }

@keyframes back-glitter-pulse {
  50% { opacity: calc(0.82 + var(--card-opacity) * 0.28); }
}

@keyframes back-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .back-glitter,
  .back-glitter--shift,
  .back-star {
    animation: none;
  }
  .back-star { opacity: 0.75; }
}