/* Round 2 motion polish (assets/polish2.js). Transforms and opacity only.
   Everything here is inert without html.pl-js, which polish2.js never sets when the
   visitor asked for reduced motion. */

/* ── 1. section entrance: header first, then the cards, one orchestrated beat ── */
.pl-js .pl-sec:not(.pl-in) .pl-it{opacity:0}
.pl-js .pl-sec.pl-in .pl-it{animation:plRise .72s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--pl-i,0) * 70ms)}
.pl-js .pl-sec.pl-in .pl-it--card{animation-name:plDeal;animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.9,.25,1.12)}
@keyframes plRise{from{opacity:0;translate:0 22px}}
@keyframes plDeal{from{opacity:0;translate:0 46px;rotate:-2.5deg;scale:.94}60%{opacity:1}}

/* ── 2. off screen sections hold their loops (rays, floats, foils, pulses) ── */
.pl-off,.pl-off::before,.pl-off::after,.pl-off *,.pl-off *::before,.pl-off *::after{animation-play-state:paused!important}
.pl-off .pl-it{animation-play-state:running!important}

/* ── 3. holo layer injected into collectible cards ───────────────────────── */
.pl-holo{position:absolute;inset:0;z-index:6;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s ease}
.pl-holo i{position:absolute;display:block;pointer-events:none}
/* rainbow foil: a wide band that slides with the pointer (transform only) */
.pl-holo__foil{left:-50%;top:-50%;width:200%;height:200%;mix-blend-mode:overlay;opacity:.6;
  background:linear-gradient(115deg,transparent 30%,rgba(255,80,220,.55) 40%,rgba(80,230,255,.55) 47%,rgba(255,240,90,.55) 54%,rgba(120,255,160,.45) 60%,transparent 70%);
  transform:translate(calc((var(--pl-x,.5) - .5) * -38%),calc((var(--pl-y,.5) - .5) * -22%))}
/* glare: a soft light spot right under the pointer */
.pl-holo__glare{left:-50%;top:-50%;width:200%;height:200%;mix-blend-mode:soft-light;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 0,rgba(255,255,255,.22) 12%,transparent 28%);
  transform:translate(calc((var(--pl-x,.5) - .5) * 50%),calc((var(--pl-y,.5) - .5) * 50%))}
/* sweep: one bright diagonal pass, used on first sight and on tap */
.pl-holo__sweep{left:0;top:-20%;width:46%;height:140%;opacity:0;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.0) 20%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  transform:translateX(-120%) skewX(-14deg)}
.pl-hot>.pl-holo{opacity:1}
.pl-sweep>.pl-holo{opacity:1}
.pl-sweep>.pl-holo .pl-holo__foil,.pl-sweep>.pl-holo .pl-holo__glare{opacity:0}
.pl-hot.pl-sweep>.pl-holo .pl-holo__foil{opacity:.6}.pl-hot.pl-sweep>.pl-holo .pl-holo__glare{opacity:1}
.pl-sweep>.pl-holo .pl-holo__sweep{animation:plSweep 1.05s cubic-bezier(.45,.05,.3,1) both}
@keyframes plSweep{0%{opacity:0;transform:translateX(-120%) skewX(-14deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-14deg)}}
/* dark cards (plaques, dark plates) take a stronger, screen blended foil */
.h-plq>.pl-holo .pl-holo__foil,.sg-plate-d>.pl-holo .pl-holo__foil{mix-blend-mode:screen;opacity:.22}
.h-plq>.pl-holo .pl-holo__glare,.sg-plate-d>.pl-holo .pl-holo__glare{mix-blend-mode:screen;opacity:.35}
.pl-tilting{will-change:transform}

/* tap pop for cards that have no animation of their own */
.pl-pop{animation:plPop .46s cubic-bezier(.2,1.6,.4,1)}
@keyframes plPop{0%{scale:1}30%{scale:.965}100%{scale:1}}

/* ── 4. buttons: squash on press, bounce back on release ─────────────────── */
.pl-js .pl-press{scale:.94}
.pl-js .pl-rel{animation:plRel .42s cubic-bezier(.2,1.8,.4,1)}
@keyframes plRel{0%{scale:.94}55%{scale:1.05}100%{scale:1}}

/* count ups end with a small pop */
.pl-counted{animation:plCount .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes plCount{0%{scale:1}40%{scale:1.12}100%{scale:1}}

/* ── 6. rails while dragged with the mouse ───────────────────────────────── */
.pl-js .a-parade,.pl-js .l-shots__row,.pl-js [data-pl-rail]{cursor:grab}
.pl-dragging{cursor:grabbing!important;user-select:none}
.pl-dragging *{pointer-events:none}
.pl-dragging img{-webkit-user-drag:none}

@media (prefers-reduced-motion:reduce){
  .pl-holo{display:none}
  .pl-it,.pl-pop,.pl-rel,.pl-counted{animation:none!important;opacity:1!important}
}

/* JS driven tilt owns the transform while it runs, so no CSS transition fights it */
.pl-tilting{transition-property:opacity,box-shadow,background-color,filter,border-color!important}
/* big cards: a calmer foil so the text on the paper stays crisp */
.mt2-card>.pl-holo .pl-holo__foil,.sg-rcard>.pl-holo .pl-holo__foil,.px-tier>.pl-holo .pl-holo__foil{opacity:.32}