/* Shared SSR print templates. Load after card-backs.css.
 * The picture is never colour-washed. Every metallic texture is stencil-masked
 * and the subject area stays clear. Only flat leaves may mask/blend/clip. */
.word-card[data-ssr-finish] {
  --foil-x: 50%;
  --foil-y: 35%;
  --ssr-depth: var(--inspection-depth-factor, 1);
  --ssr-beam-angle: calc(150deg + var(--ssr-angle, -40deg));
  --ssr-center-guard: radial-gradient(ellipse 54% 52% at 50% 48%,
    transparent 0 60%, #0003 76%, #000a 90%, #000 100%);
  --ssr-edge-guard: radial-gradient(ellipse 55% 53% at 50% 48%,
    transparent 0 66%, #0002 81%, #0009 94%, #000 100%);
  --ssr-etched-lines: repeating-linear-gradient(24deg,
    transparent 0 4.1px, #0009 4.35px 4.7px, transparent 5px 8.6px);
  --ssr-micro-lines: repeating-linear-gradient(24deg,
    transparent 0 4.6px, #0007 4.85px 5.1px, transparent 5.4px 8.6px);
  --ssr-cosmos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='.65'%3E%3Ccircle cx='22' cy='34' r='2.2'/%3E%3Ccircle cx='63' cy='18' r='1.1'/%3E%3Ccircle cx='129' cy='25' r='1.7'/%3E%3Ccircle cx='232' cy='17' r='2.8'/%3E%3Ccircle cx='274' cy='52' r='1.2'/%3E%3Ccircle cx='251' cy='113' r='2.3'/%3E%3Ccircle cx='283' cy='158' r='3.4'/%3E%3Ccircle cx='264' cy='237' r='1.8'/%3E%3Ccircle cx='284' cy='292' r='1.2'/%3E%3Ccircle cx='234' cy='333' r='3'/%3E%3Ccircle cx='177' cy='344' r='1.3'/%3E%3Ccircle cx='101' cy='324' r='2.1'/%3E%3Ccircle cx='28' cy='333' r='1.4'/%3E%3Ccircle cx='49' cy='272' r='3.2'/%3E%3Ccircle cx='16' cy='215' r='1.7'/%3E%3Ccircle cx='38' cy='147' r='1.1'/%3E%3Ccircle cx='18' cy='91' r='2.5'/%3E%3Cpath d='M44 60h6m-3-3v6M184 21h4m-2-2v4M265 83h5m-2.5-2.5v5M272 200h6m-3-3v6M254 310h4m-2-2v4M60 341h5m-2.5-2.5v5M21 252h4m-2-2v4M24 176h5m-2.5-2.5v5'/%3E%3C/svg%3E");
  --ssr-pins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360' preserveAspectRatio='none' fill='white'%3E%3Cpath d='m31 45 .75 3.1 3.1.75-3.1.75-.75 3.1-.75-3.1-3.1-.75 3.1-.75ZM254 39l.6 2.5 2.5.6-2.5.6-.6 2.5-.6-2.5-2.5-.6 2.5-.6ZM278 125l.85 3.6 3.6.85-3.6.85-.85 3.6-.85-3.6-3.6-.85 3.6-.85ZM267 272l.7 3 3 .7-3 .7-.7 3-.7-3-3-.7 3-.7ZM73 326l.8 3.3 3.3.8-3.3.8-.8 3.3-.8-3.3-3.3-.8 3.3-.8ZM23 228l.65 2.7 2.7.65-2.7.65-.65 2.7-.65-2.7-2.7-.65 2.7-.65Z'/%3E%3Ccircle cx='89' cy='21' r='.55'/%3E%3Ccircle cx='155' cy='32' r='.45'/%3E%3Ccircle cx='215' cy='25' r='.65'/%3E%3Ccircle cx='281' cy='72' r='.5'/%3E%3Ccircle cx='261' cy='177' r='.65'/%3E%3Ccircle cx='286' cy='224' r='.4'/%3E%3Ccircle cx='263' cy='328' r='.55'/%3E%3Ccircle cx='196' cy='337' r='.75'/%3E%3Ccircle cx='130' cy='332' r='.5'/%3E%3Ccircle cx='33' cy='309' r='.6'/%3E%3Ccircle cx='26' cy='282' r='.4'/%3E%3Ccircle cx='44' cy='193' r='.65'/%3E%3Ccircle cx='18' cy='132' r='.45'/%3E%3Ccircle cx='47' cy='105' r='.6'/%3E%3C/svg%3E");
  --ssr-constellation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='.55'%3E%3Cpath d='m25 39 18 38-20 27M264 46l12 41-24 35M275 222l-20 31 23 48M30 259l18 34-13 34M101 336l43 9 37-15' stroke-opacity='.42'/%3E%3Ccircle cx='25' cy='39' r='1.4'/%3E%3Ccircle cx='43' cy='77' r='1'/%3E%3Ccircle cx='23' cy='104' r='2.1'/%3E%3Ccircle cx='264' cy='46' r='1.2'/%3E%3Ccircle cx='276' cy='87' r='1.8'/%3E%3Ccircle cx='252' cy='122' r='1'/%3E%3Ccircle cx='275' cy='222' r='1.1'/%3E%3Ccircle cx='255' cy='253' r='1.9'/%3E%3Ccircle cx='278' cy='301' r='1.3'/%3E%3Ccircle cx='30' cy='259' r='1.5'/%3E%3Ccircle cx='48' cy='293' r='1'/%3E%3Ccircle cx='35' cy='327' r='2'/%3E%3Ccircle cx='101' cy='336' r='1.1'/%3E%3Ccircle cx='144' cy='345' r='1.8'/%3E%3Ccircle cx='181' cy='330' r='1.1'/%3E%3C/svg%3E");
  --ssr-print-mask: var(--ssr-etched-lines);
  --ssr-grain-mask: var(--ssr-micro-lines);
  /* This restrained colour travel is visible only through the tiny print marks. */
  --ssr-metal-ink: linear-gradient(var(--ssr-beam-angle), #8b9792 5%,
    #c2cbc5 35%, #eff1e9 47%, #b7cdd0 50%, #c4bfcc 52%, #d6c9ac 55%,
    #ccd4c8 60%, #edf0e7 74%, #8c9d97 100%);
  --ssr-neutral-strip: linear-gradient(var(--ssr-beam-angle), transparent 47%,
    #e5eee726 48.6%, #f5f6ed70 49.5%, #fffdf399 50%, #dce8e44d 50.6%,
    #bfcfd21a 51.5%, transparent 53%);
}
.word-card[data-ssr-finish='holo'] {
  --ssr-print-mask: var(--ssr-cosmos);
  --ssr-grain-mask: var(--ssr-pins);
}
.word-card[data-ssr-finish='depth'] {
  --ssr-print-mask: var(--ssr-constellation);
  --ssr-grain-mask: var(--ssr-pins);
}

/* Gold remains gold; only a very small silver-blue reflection travels the rim. */
.word-card[data-ssr-finish] > .card-volume > .card-foil { display: none; }
.word-card[data-ssr-finish] > .card-volume > .card-frame {
  border-color: #f2e0b2;
  box-shadow: 0 0 0 1px #aa8a50, 0 1px 1px #4e3c2530,
    inset 0 1px 0 #fff7df, inset 0 -1px 0 #a77e4a66;
}
.word-card[data-ssr-finish] > .card-volume > .card-frame::after {
  inset: -2px;
  padding: 1.3px;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(var(--ssr-beam-angle), #a68b51 3%, #e4c889 30%,
    #f5e5b8 46%, #d7ded6 49%, #b5cbd0 50%, #eee5c5 52%, #d2b778 70%, #a98a4e);
  background-size: 230% 200%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.76 + var(--ssr-rim, 0) * .18);
}
.word-card[data-ssr-finish] .frame-crest {
  background: linear-gradient(125deg, #93703b, #e5cc90 28%, #fff1c7 47%, #b3ac85 52%, #d9bd7a 73%, #a18143);
}
.word-card[data-ssr-finish] .ssr-edition {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin: 7px 0 0;
  color: #927a4e;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 6.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 1.35px;
  text-transform: uppercase;
  white-space: nowrap;
}
.word-card[data-ssr-finish] .ssr-edition::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: .5px solid #b89a62;
  transform: rotate(45deg);
  background: #ece1bf;
}
.word-card[data-ssr-finish] .card-bottom .ssr-edition { margin: 0; }

/* Geometry: shared 3D holders have no grouping effects. The photo alone clips. */
.word-card[data-ssr-finish] .card-art.ssr-premium-art {
  position: relative;
  overflow: visible;
  isolation: auto;
  background: transparent;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.word-card[data-ssr-finish] .card-art.ssr-premium-art::after { display: none; }
.ssr-premium-art > .ssr-image-plane,
.ssr-premium-art > .ssr-holo-plane {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ssr-premium-art > .ssr-image-plane {
  overflow: hidden;
  background: #d4ded6;
  transform: translateZ(0);
}
.word-card[data-ssr-finish] .ssr-image-plane > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: translate(calc(var(--parallax-x, 0px) * .4 * var(--ssr-depth)),
    calc(var(--parallax-y, 0px) * .4 * var(--ssr-depth))) scale(1.045);
  user-select: none;
  -webkit-user-drag: none;
}
.ssr-premium-art > .ssr-holo-plane {
  overflow: visible;
  isolation: auto;
  transform-style: preserve-3d;
}
.ssr-premium-art > .ssr-holo-rear { transform: translateZ(calc(.2px * var(--ssr-depth))); }
.ssr-premium-art > .ssr-holo-mid { transform: translateZ(calc(.65px * var(--ssr-depth))); }
.ssr-premium-art > .ssr-holo-front { transform: translateZ(calc(1.1px * var(--ssr-depth))); }
.word-card[data-ssr-finish='depth'] .ssr-holo-mid {
  inset: .8%;
  transform: translate3d(calc(var(--ssr-shift-x, 0px) * -.2),
    calc(var(--ssr-shift-y, 0px) * -.2), calc(3px * var(--ssr-depth)));
}
.word-card[data-ssr-finish='depth'] .ssr-holo-front {
  inset: 1.6%;
  transform: translate3d(calc(var(--ssr-shift-x, 0px) * -.45),
    calc(var(--ssr-shift-y, 0px) * -.45), calc(6px * var(--ssr-depth)));
}

/* Opt-in leaves: the image has no overlay, and no four-fold glare stack exists. */
.ssr-premium-art .ssr-material-foil,
.ssr-premium-art .ssr-material-glare,
.ssr-premium-art .ssr-material-etch {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ssr-premium-art .ssr-holo-rear > .ssr-material-etch {
  display: block;
  background: #63756e;
  -webkit-mask-image: var(--ssr-grain-mask), var(--ssr-center-guard);
  mask-image: var(--ssr-grain-mask), var(--ssr-center-guard);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: calc(.1 + var(--ssr-light, .55) * .1);
}
.ssr-premium-art .ssr-holo-mid > .ssr-material-foil {
  display: block;
  background-image: radial-gradient(ellipse at var(--foil-x, 50%) var(--foil-y, 35%),
    #fffef77d, transparent 58%), var(--ssr-metal-ink);
  background-size: 100% 100%, 230% 190%;
  background-position: center, var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask-image: var(--ssr-print-mask), var(--ssr-center-guard);
  mask-image: var(--ssr-print-mask), var(--ssr-center-guard);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: calc(.2 + var(--ssr-light, .55) * var(--ssr-light, .55) * .62);
}
.ssr-premium-art .ssr-holo-front > .ssr-material-etch {
  display: block;
  background: linear-gradient(var(--ssr-beam-angle), #9eafaa 16%, #eff4eb 46%,
    #fffef4 49.5%, #bfd4d6 51%, #d8d2bd 54%, #a0b2aa 84%);
  background-size: 220% 180%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask-image: var(--ssr-pins), var(--ssr-edge-guard);
  mask-image: var(--ssr-pins), var(--ssr-edge-guard);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: calc(.12 + var(--ssr-light, .55) * var(--ssr-light, .55) * .65);
}
.word-card[data-ssr-finish='laser'] .ssr-holo-front > .ssr-material-etch { display: none; }
.ssr-premium-art .ssr-holo-front > .ssr-material-foil {
  display: block;
  padding: .6px;
  background: var(--ssr-metal-ink);
  background-size: 230% 190%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.17 + var(--ssr-light, .55) * .25);
}
.ssr-premium-art .ssr-holo-front > .ssr-material-glare {
  display: block;
  background: none;
}
.ssr-premium-art .ssr-holo-front > .ssr-material-glare::before,
.ssr-premium-art .ssr-holo-front > .ssr-material-glare::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--ssr-neutral-strip);
  background-size: 250% 180%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask-image: var(--ssr-edge-guard);
  mask-image: var(--ssr-edge-guard);
  mix-blend-mode: screen;
}
.ssr-premium-art .ssr-holo-front > .ssr-material-glare::before {
  opacity: calc(.08 + var(--ssr-light, .55) * var(--ssr-light, .55) * .25);
}
.ssr-premium-art .ssr-holo-front > .ssr-material-glare::after { opacity: 0; }
/* Two small specular points make the shared cosmic prints visibly catch light.
 * Their area stays fixed at the perimeter; no image-wide brightness changes. */
.word-card:is([data-ssr-finish='holo'], [data-ssr-finish='depth']) .ssr-holo-mid > .ssr-material-glare {
  display: block;
  -webkit-mask-image: var(--ssr-edge-guard);
  mask-image: var(--ssr-edge-guard);
}
.word-card:is([data-ssr-finish='holo'], [data-ssr-finish='depth']) .ssr-holo-mid > .ssr-material-glare::before,
.word-card:is([data-ssr-finish='holo'], [data-ssr-finish='depth']) .ssr-holo-mid > .ssr-material-glare::after {
  content: '';
  position: absolute;
  left: 7%;
  top: 15%;
  width: 4.4%;
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 9% 47% at 50% 50%, #fffef5 0 10%, #edf5eea6 26%, transparent 72%),
    radial-gradient(ellipse 47% 9% at 50% 50%, #fffef5 0 10%, #edf5eea6 26%, transparent 72%),
    radial-gradient(circle at 50% 50%, #fffdf5 0 5%, #dceef6b3 12%, #d5e3df33 24%, transparent 49%);
  mix-blend-mode: screen;
  opacity: clamp(0, calc((var(--ssr-light, .55) - .46) * 2.2), .94);
  transform: rotate(18deg);
}
.word-card:is([data-ssr-finish='holo'], [data-ssr-finish='depth']) .ssr-holo-mid > .ssr-material-glare::after {
  left: 90%;
  top: 78%;
  transform: rotate(-12deg) scale(.8);
}
.ssr-premium-art .ssr-depth-engraving { display: none; }
.word-card[data-ssr-finish='depth'] .ssr-depth-engraving {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: #e0e5d4;
  fill: none;
  stroke: currentColor;
  stroke-width: .45;
  -webkit-mask-image: var(--ssr-edge-guard);
  mask-image: var(--ssr-edge-guard);
  opacity: calc(.1 + var(--ssr-light, .55) * var(--ssr-light, .55) * .22);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.word-card[data-ssr-finish='depth'] .ssr-holo-front > .ssr-depth-engraving {
  color: #f2edda;
  opacity: calc(.15 + var(--ssr-light, .55) * var(--ssr-light, .55) * .28);
}

/* The three original alpha-separated works retain their actual foregrounds.
 * Their existing silhouettes intersect the same print and subject guard. */
.word-card[data-ssr-finish] .card-art-layered .art-foil-surface {
  background-image: var(--ssr-metal-ink);
  background-size: 230% 190%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  background-blend-mode: normal;
  mix-blend-mode: normal;
  -webkit-mask-image: var(--ssr-print-mask), var(--ssr-center-guard);
  mask-image: var(--ssr-print-mask), var(--ssr-center-guard);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: calc(.2 + var(--ssr-light, .55) * var(--ssr-light, .55) * .62);
  animation: none;
  transition: none;
}
.word-card[data-ssr-finish] .card-art-layered .art-foil-surface.art-foil-subject {
  -webkit-mask-image: var(--foil-mask), var(--ssr-print-mask), var(--ssr-center-guard);
  mask-image: var(--foil-mask), var(--ssr-print-mask), var(--ssr-center-guard);
  -webkit-mask-size: contain, 100% 100%, 100% 100%;
  mask-size: contain, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: calc(.12 + var(--ssr-light, .55) * var(--ssr-light, .55) * .38);
}
.word-card[data-ssr-finish] .card-art-layered .art-foil-glare::before,
.word-card[data-ssr-finish] .card-art-layered .art-foil-glare::after {
  background-image: var(--ssr-neutral-strip);
  background-size: 250% 180%;
  background-position: var(--foil-x, 50%) var(--foil-y, 35%);
  -webkit-mask-image: var(--ssr-edge-guard);
  mask-image: var(--ssr-edge-guard);
  animation: none;
  transition: none;
}
.word-card[data-ssr-finish] .card-art-layered .art-foil-glare::before {
  opacity: calc(.08 + var(--ssr-light, .55) * var(--ssr-light, .55) * .25);
}
.word-card[data-ssr-finish] .card-art-layered .art-foil-glare::after { opacity: 0; }
.word-card[data-ssr-finish] .card-art-layered .art-foil-fireflies { display: none; }
.word-card[data-ssr-finish] .card-art-layered .art-subject-plane {
  transform: translateZ(calc(14px * var(--ssr-depth)))
    translate(calc(var(--ssr-shift-x, 0px) * -.7), calc(var(--ssr-shift-y, 0px) * -.7));
}
.inspection-front .word-card[data-ssr-finish] .card-art-layered .art-subject-plane {
  transform: translateZ(calc(8px * var(--ssr-depth)))
    translate(calc(var(--ssr-shift-x, 0px) * -.6), calc(var(--ssr-shift-y, 0px) * -.6));
  transition: none;
}
.inspection-front .word-card[data-ssr-finish] .ssr-holo-plane,
.inspection-front .word-card[data-ssr-finish] .ssr-image-plane,
.inspection-front .word-card[data-ssr-finish] .ssr-image-plane > img { transition: none; }
.inspection-object[data-facing='back'] .ssr-premium-art,
.inspection-object[data-facing='back'] .ssr-premium-art * { visibility: hidden !important; }

/* One neutral reveal pass, owned by the existing queue; no idle animation. */
@media (prefers-reduced-motion: no-preference) {
  .is-foil-revealing .word-card[data-ssr-finish] .ssr-holo-front > .ssr-material-glare::after,
  .is-foil-revealing .word-card[data-ssr-finish] .card-art-layered .art-foil-glare::after {
    animation: ssr-material-reveal-sweep var(--reveal-foil-duration, 520ms)
      cubic-bezier(.18, .65, .3, 1) 1 both;
  }
  @keyframes ssr-material-reveal-sweep {
    0% { opacity: 0; background-position: 135% 50%; }
    22% { opacity: .16; }
    48% { opacity: .42; }
    76% { opacity: .2; }
    100% { opacity: 0; background-position: -35% 50%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-card[data-ssr-finish] .ssr-holo-plane,
  .word-card[data-ssr-finish] .ssr-image-plane > img,
  .word-card[data-ssr-finish] .art-subject-plane { transition: none; }
  .word-card[data-ssr-finish] .ssr-holo-front > .ssr-material-glare::after,
  .word-card[data-ssr-finish] .art-foil-glare::after { animation: none; display: none; }
}
@media (forced-colors: active) {
  .word-card[data-ssr-finish] .ssr-holo-plane,
  .word-card[data-ssr-finish] .art-foil-surface,
  .word-card[data-ssr-finish] .art-foil-glare,
  .word-card[data-ssr-finish] > .card-volume > .card-frame::after { display: none; }
  .word-card[data-ssr-finish] .ssr-edition { color: CanvasText; }
}