/* Tier frames shared by the reveal cards and /prezzy/<id>. Markup: <figure class="pz-frame" data-tier="top25"><img class="art"><figcaption class="pz-label">…</figcaption></figure> */
:root{
  --pz-ink:#141414; --pz-cream:#f7f5f0; --pz-orange:#f97316; --pz-orange-deep:#9a4408;
  --pz-bronze:#9c6230; --pz-bronze-hi:#d9a46c;   /* toned bronze */
  --pz-silver:#7f878e; --pz-silver-hi:#e3e6e8;   /* pewter, not chrome */
  --pz-gold:#a8841f;   --pz-gold-hi:#ecd27f;     /* brass/ochre, not coin gold */
}
.pz-frame{position:relative;margin:0;padding:0;border:2px solid var(--pz-ink);
  background:var(--pz-cream);box-shadow:6px 6px 0 var(--pz-ink)}
.pz-frame > img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:0;box-shadow:none}

/* metal tiers: the frame is a padded band; the sheen moves across the band only,
   because the art covers the middle */
.pz-frame[data-tier="top25"],.pz-frame[data-tier="top5"],.pz-frame[data-tier="top1"]{
  padding:6px;background:linear-gradient(120deg,var(--m) 0%,var(--m-hi) 22%,var(--m) 45%,var(--m) 60%,var(--m-hi) 78%,var(--m) 100%);
  background-size:220% 220%;background-position:100% 50%}
.pz-frame[data-tier="top25"]{--m:var(--pz-bronze);--m-hi:var(--pz-bronze-hi)}
.pz-frame[data-tier="top5"] {--m:var(--pz-silver);--m-hi:var(--pz-silver-hi)}
.pz-frame[data-tier="top1"] {--m:var(--pz-gold);--m-hi:var(--pz-gold-hi);padding:8px;
  outline:2px solid var(--pz-ink);outline-offset:-10px}   /* thin inner ink rule */
.pz-frame[data-tier="top25"] > img,.pz-frame[data-tier="top5"] > img,.pz-frame[data-tier="top1"] > img{
  border:2px solid var(--pz-ink)}

/* one-of-one: orange pinstripe band with an ink inner rule and a stamped tag */
.pz-frame[data-tier="one"]{padding:10px;
  background:repeating-linear-gradient(135deg,var(--pz-orange) 0 7px,var(--pz-orange-deep) 7px 9px)}
.pz-frame[data-tier="one"] > img{border:3px solid var(--pz-ink);outline:2px solid var(--pz-cream);outline-offset:-5px}

/* label: small mono tag sitting on the bottom-left of the frame */
.pz-label{position:absolute;left:12px;bottom:-12px;font:900 11px/1 Menlo,ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border:2px solid var(--pz-ink);
  background:var(--pz-cream);color:var(--pz-ink)}
.pz-frame[data-tier="top25"] .pz-label{background:var(--pz-bronze-hi)}
.pz-frame[data-tier="top5"]  .pz-label{background:var(--pz-silver-hi)}
.pz-frame[data-tier="top1"]  .pz-label{background:var(--pz-gold-hi)}
.pz-frame[data-tier="one"]   .pz-label{background:var(--pz-orange);transform:rotate(-4deg)}

@media (prefers-reduced-motion:no-preference){
  /* one sweep when the card lands (add .is-revealed), and again on hover */
  .pz-frame.is-revealed[data-tier^="top"]{animation:pz-sheen 1.4s ease-out 1 both}
  .pz-frame[data-tier="top1"].is-revealed{animation-duration:2s}
  @media (hover:hover){.pz-frame[data-tier^="top"]:hover{animation:pz-sheen 1.4s ease-out 1}}
  @keyframes pz-sheen{from{background-position:100% 50%}to{background-position:0% 50%}}
}
/* Inside the floating art wrapper the wrapper draws the shadow. */
.art-wrap .pz-frame{box-shadow:none}
.pz-frame[data-tier="all"] .pz-label:empty{display:none}