@property --shine-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.card-scene{perspective:1200px;cursor:pointer;--sp1:#ff7a75;--sp2:#ffed61;--sp3:#a8ff61;--sp4:#85fff7;--sp5:#7a95ff;--sp6:#d875ff;--glitter:url(https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/public/img/glitter.png);--grain:url(https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/public/img/grain.webp);display:inline-block}.card-scene[data-revealed]{cursor:default}.card-scene[data-size=sm]{width:140px}.card-scene[data-size=md]{width:240px}.card-scene[data-size=lg]{width:320px}.card-tilt{transform-style:preserve-3d}.card-flipper{aspect-ratio:350/600;transform-style:preserve-3d;border-radius:8px;width:100%;transition:transform .8s cubic-bezier(.34,1.56,.64,1);position:relative}.card-scene[data-revealed] .card-flipper{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:8px;position:absolute;inset:0}.card-back{background:var(--color-bg-surface);border:1px solid var(--color-border-default);justify-content:center;align-items:center;display:flex}.card-back-art{border:1px solid var(--color-border-default);opacity:.4;background:repeating-linear-gradient(45deg,#0000 0 10px,#c9933a14 10px 11px),repeating-linear-gradient(-45deg,#0000 0 10px,#c9933a14 10px 11px);position:absolute;inset:10px}.card-back-sigil{color:var(--color-border-default);opacity:.5;-webkit-user-select:none;user-select:none;font-size:2.5rem}.card-scene[data-size=sm] .card-back-sigil{font-size:1.5rem}.card-scene[data-size=lg] .card-back-sigil{font-size:3rem}.card-front{overflow:hidden;transform:rotateY(180deg)}.card-front img{object-fit:cover;width:100%;height:100%;display:block}.card-scene[data-reversed] .card-front img{transform:rotate(180deg)}.card-shine,.card-shine:before,.card-shine:after,.card-glare,.card-glare:after{pointer-events:none;border-radius:8px;position:absolute;inset:0;overflow:hidden}.card-shine{z-index:2;mix-blend-mode:color-dodge;opacity:0;will-change:transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;transition:opacity .3s}.card-shine:before,.card-shine:after{content:""}.card-glare{z-index:3;mix-blend-mode:overlay;opacity:0;background-image:radial-gradient(farthest-corner circle at calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), #fffc 10%, #ffffffa6 20%, #00000080 90%);will-change:transform, opacity, background-image;transition:opacity .3s}.card-scene[data-rarity="1"] .card-shine,.card-scene[data-rarity="1"] .card-glare{display:none}.card-scene[data-rarity="2"] .card-shine{background-image:repeating-linear-gradient(110deg, var(--sp1) 1%, var(--sp2) 3%, var(--sp3) 5%, var(--sp4) 7%, var(--sp5) 9%, var(--sp6) 11%, var(--sp1) 13%), repeating-linear-gradient(90deg, #8080800d 0px, #8080800d 1px, transparent 1px, transparent 3px);background-blend-mode:overlay;background-size:200% 700%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 300%), center;filter:brightness(.85)contrast(2.75)saturate(.65)}.card-scene[data-rarity="2"][data-revealed]:hover .card-shine{opacity:calc(.1 + var(--pointer-from-center,0) * .35)}.card-scene[data-rarity="2"][data-revealed]:hover .card-glare{opacity:.2}@keyframes holo-rotate{to{--shine-angle:360deg}}.card-scene[data-rarity="3"] .card-shine{background-image:var(--glitter), conic-gradient(from var(--shine-angle,0deg), var(--sp1), var(--sp2), var(--sp3), var(--sp4), var(--sp5), var(--sp6), var(--sp1)), repeating-linear-gradient(-30deg, var(--sp1) 0%, var(--sp2) 3.5%, var(--sp3) 7%, var(--sp4) 10.5%, var(--sp5) 14%, var(--sp6) 17.5%, var(--sp1) 21%);background-blend-mode:soft-light, overlay;background-size:25%,200% 200%,350% 350%;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 120% - 10%) calc(var(--ratio-y,.5) * 120% - 10%);filter:brightness(calc(.55 + var(--pointer-from-center,0) * .25)) contrast(2.2) saturate(.75);animation:6s linear infinite holo-rotate}.card-scene[data-rarity="3"][data-revealed] .card-shine{opacity:.15}.card-scene[data-rarity="3"][data-revealed]:hover .card-shine{opacity:calc(.25 + var(--pointer-from-center,0) * .55)}.card-scene[data-rarity="3"][data-revealed]:hover .card-glare{opacity:.4}.card-scene[data-rarity="3"] .card-shine:before{background-image:repeating-linear-gradient(133deg, var(--sp4) 0%, var(--sp5) 2%, var(--sp6) 4%, var(--sp1) 6%, var(--sp2) 8%, var(--sp3) 10%, var(--sp4) 12%);background-size:300% 300%;background-position:calc(100% - var(--ratio-x,.5) * 100%) calc(100% - var(--ratio-y,.5) * 100%);mix-blend-mode:difference;opacity:.35}.card-scene[data-rarity="4"] .card-shine{background-image:var(--glitter), repeating-linear-gradient(0deg, var(--sp1) 0%, var(--sp2) 2%, var(--sp3) 4%, var(--sp4) 6%, var(--sp5) 8%, var(--sp6) 10%, var(--sp1) 12%), repeating-linear-gradient(133deg, var(--sp4) 0%, var(--sp5) 2%, var(--sp6) 4%, var(--sp1) 6%, var(--sp2) 8%, var(--sp3) 10%, var(--sp4) 12%), radial-gradient(farthest-corner ellipse at calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), #0000001a 0%, #00000080 90%);background-blend-mode:soft-light, hue, hard-light, overlay;background-size:25%,200% 700%,300% 300%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 400%), calc(100% - var(--ratio-x,.5) * 100%) calc(100% - var(--ratio-y,.5) * 300%), center;filter:brightness(calc(.4 + var(--pointer-from-center,0) * .4)) contrast(1.4) saturate(2.25)}.card-scene[data-rarity="4"][data-revealed] .card-shine{opacity:.1}.card-scene[data-rarity="4"][data-revealed]:hover .card-shine{opacity:calc(.25 + var(--pointer-from-center,0) * .5)}.card-scene[data-rarity="4"][data-revealed]:hover .card-glare{opacity:.55}.card-scene[data-rarity="4"] .card-shine:before{mix-blend-mode:overlay;opacity:.6;background-image:repeating-linear-gradient(45deg,#ffffff12 0 1px,#0000 1px 5px),repeating-linear-gradient(-45deg,#ffffff12 0 1px,#0000 1px 5px)}@keyframes cosmos-drift{to{--shine-angle:360deg}}.card-scene[data-rarity="5"] .card-shine{background-image:var(--glitter), conic-gradient(from var(--shine-angle,0deg) at 50% 50%, #2f0d73 0%, #256af4 18%, #6ef7f7 28%, #c155f6 42%, #e830ab 57%, #3e09aa 72%, #477eeb 88%, #2f0d73 100%), radial-gradient(ellipse 130% 90% at calc(var(--ratio-x,.5) * 130% - 15%) calc(var(--ratio-y,.5) * 130% - 15%), #b3ccff 0%, #884cff 30%, #a112a1 60%, transparent 80%), radial-gradient(farthest-corner circle at calc(var(--ratio-x,.5) * 80% + 10%) calc(var(--ratio-y,.5) * 80% + 10%), #0000001a 0%, #000000b3 90%);background-blend-mode:soft-light, color-dodge, difference, overlay;background-size:25%,220% 220%,350% 350%,cover;background-position:calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), calc(var(--ratio-x,.5) * 160% - 30%) calc(var(--ratio-y,.5) * 160% - 30%), center;filter:brightness(calc(.35 + var(--pointer-from-center,0) * .45)) contrast(1.9) saturate(1.6);animation:5s linear infinite cosmos-drift}.card-scene[data-rarity="5"][data-revealed] .card-shine{opacity:.3}.card-scene[data-rarity="5"][data-revealed]:hover .card-shine{opacity:calc(.45 + var(--pointer-from-center,0) * .45)}.card-scene[data-rarity="5"][data-revealed]:hover .card-glare{opacity:.65}.card-scene[data-rarity="5"] .card-shine:before{background-image:radial-gradient(circle at calc(var(--ratio-x,.5) * 70% + 15%) calc(var(--ratio-y,.5) * 70% + 15%), #e6eeff99 0%, #eeccff4d 20%, transparent 60%), repeating-linear-gradient(calc(var(--shine-angle,0deg) + 30deg), #9966ff26 0%, #ccddff4d 1.5%, transparent 2.5%, #ff66ff1a 4%, transparent 6%);mix-blend-mode:screen;background-size:cover,350% 350%;background-position:center, calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%)}.card-scene[data-rarity="5"] .card-shine:after{background-image:radial-gradient(ellipse 85% 65% at calc(30% + var(--ratio-x,.5) * 40%) calc(30% + var(--ratio-y,.5) * 40%), #dd99ff80 0%, #6699ff4d 35%, transparent 70%);mix-blend-mode:color-dodge;opacity:.7}.card-scene[data-rarity="5"][data-revealed]:hover .card-glare:after{content:"";background:radial-gradient(farthest-corner circle at calc(var(--ratio-x,.5) * 100%) calc(var(--ratio-y,.5) * 100%), #ccddff8c 0%, #cc66ff59 25%, transparent 65%);mix-blend-mode:screen}.card-radiant-border{z-index:-1;opacity:.8;background:conic-gradient(#eab308,#f97316,#a855f7,#60a5fa,#eab308) 0 0/200% 200%;border-radius:10px;animation:3s linear infinite radiant-shimmer;position:absolute;inset:-3px}@keyframes reveal-glow{0%{box-shadow:0 0 #0000}40%{box-shadow:0 0 50px var(--rarity-color,#ffffff4d), 0 0 100px #ffffff1a}to{box-shadow:0 0 18px var(--rarity-color,#ffffff1a)}}.card-scene[data-revealed] .card-front{animation:1.2s ease-out .35s both reveal-glow}.card-reveal-hint{text-align:center;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-primary);opacity:.35;pointer-events:none;font-size:.65rem;animation:2s ease-in-out infinite hint-pulse;position:absolute;bottom:-2rem;left:0;right:0}@keyframes hint-pulse{0%,to{opacity:.35}50%{opacity:.6}}@media (prefers-reduced-motion:reduce){.card-flipper,.card-shine,.card-glare,.card-radiant-border,.card-reveal-hint{transition:none!important;animation:none!important}.card-scene[data-revealed] .card-flipper{transform:rotateY(180deg)!important}.card-scene[data-rarity="5"][data-revealed] .card-shine{opacity:.25}.card-scene[data-rarity="3"][data-revealed] .card-shine{opacity:.15}}
