/* A trading card you can spin, with holo effects that depend on its rarity.
   Rotation lives in --rx/--ry; registering them lets the card (and its shine) animate smoothly. */
@property --rx { syntax:'<angle>'; inherits:true; initial-value:0deg }
@property --ry { syntax:'<angle>'; inherits:true; initial-value:0deg }

/* contain:layout keeps a spun card's 3D corners from making the page or a dialog scroll, without clipping them */
.holo-card{position:absolute; inset:0; display:block; perspective:1100px; touch-action:none; cursor:grab; contain:layout;
  transition:--rx .6s cubic-bezier(.3,.7,.3,1), --ry .6s cubic-bezier(.3,.7,.3,1);
  /* how strongly the light catches the card: brightest when tilted */
  --tilt:min(1, calc((max(sin(var(--ry)), -1 * sin(var(--ry))) + max(sin(var(--rx)), -1 * sin(var(--rx)))) * 2.4));
  --mx:calc(50% + sin(var(--ry)) * 55%);
  --my:calc(50% - sin(var(--rx)) * 55%)}
.holo-card.hc-hover{transition:--rx .15s ease-out, --ry .15s ease-out}
.holo-card.hc-dragging,.holo-card.hc-instant{transition:none; cursor:grabbing}
.hc-inner{position:absolute; inset:0; display:block; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry))}
.hc-face{position:absolute; inset:0; display:block; border-radius:4.5%/3.3%; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 10px 24px rgba(0,0,0,.4)}
.hc-front{background:#24306A}
.hc-front img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none}
/* the real card back (from Bulbapedia), with a soft sheen as it turns */
.hc-back{transform:rotateY(180deg); background:#1E4FA8 url(/shared/cardback.webp) center/cover no-repeat}
.hc-back::after{content:""; position:absolute; inset:0; mix-blend-mode:overlay; opacity:calc(.2 + var(--tilt) * .5);
  background:radial-gradient(farthest-corner circle at calc(100% - var(--mx)) var(--my), rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 25%, rgba(0,0,0,.3) 95%)}

/* every card gets a glossy glare that follows the light */
.hc-glare,.hc-holo{position:absolute; inset:0; display:block; pointer-events:none}
.hc-glare{mix-blend-mode:overlay; opacity:calc(.2 + var(--tilt) * .6);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.75) 0%, rgba(255,255,255,.25) 22%, rgba(0,0,0,.35) 95%)}

/* the holo layer: a colourless sheen that, like real foil under the ink, makes the card's own
   colours shine as it turns (a red and gold card glints red and gold) */
.hc-holo{display:none; mix-blend-mode:color-dodge; opacity:calc(.45 + var(--tilt) * .55);
  --foil:repeating-linear-gradient(115deg,#000 0%,#111 5%,#5a5a5a 9%,#929292 11%,#5a5a5a 13%,#111 17%,#000 24%,
    #000 30%,#2e2e2e 33%,#666 35%,#2e2e2e 37%,#000 40%);
  background-image:var(--foil); background-size:220% 220%;
  background-position:calc(50% + sin(var(--ry)) * 70%) calc(50% + sin(var(--rx)) * 70%)}
.holo-card:not([data-kind="none"]) .hc-holo{display:block}

/* where the artwork box sits: top, side margin, height, and the matching mask position.
   Pokémon, Trainer and Energy cards each lay it out differently. */
.holo-card{--at:10%; --ax:8%; --ah:37.5%; --apy:16%}
.holo-card[data-layout="trainer"]{--at:13.8%; --ax:8%; --ah:38%; --apy:22.3%}
.holo-card[data-layout="energy"]{--at:13.5%; --ax:3.8%; --ah:50.5%; --apy:27.3%}
/* holo rare / double rare: foil only in the artwork box */
.holo-card[data-kind="holo"] .hc-holo{clip-path:inset(var(--at) var(--ax) calc(100% - var(--at) - var(--ah)) var(--ax))}
/* reverse holo: foil everywhere except the artwork box */
.holo-card[data-kind="reverse"] .hc-holo{
  --art:linear-gradient(#000 0 0) 50% var(--apy)/calc(100% - 2 * var(--ax)) var(--ah) no-repeat;
  -webkit-mask:linear-gradient(#000 0 0), var(--art); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0), var(--art); mask-composite:exclude}
/* double rare (regular ex): Pokémon's SV card guide describes a foil border and a star-like sheen on the
   card, so a soft sheen over the whole card plus a brighter foil on the silver border */
.holo-card[data-kind="double"] .hc-holo{opacity:calc(.3 + var(--tilt) * .4)}
.holo-card[data-kind="double"] .hc-holo::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg,#000 0%,#3a3a3a 5%,#d0d0d0 10%,#3a3a3a 15%,#000 20%);
  background-size:220% 220%; background-position:calc(50% - sin(var(--ry)) * 70%) calc(50% - sin(var(--rx)) * 70%);
  --edge:linear-gradient(#000 0 0) 50% 50%/91% 93.5% no-repeat;
  -webkit-mask:linear-gradient(#000 0 0), var(--edge); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0), var(--edge); mask-composite:exclude}
/* Ascended Heroes' reverse holos come in foil patterns (Energy, Poké Ball, Love Ball…):
   the pattern is drawn into the foil, drifting a little as the card turns */
.holo-card[data-kind="reverse"][data-pattern] .hc-holo{
  background-image:var(--pat), var(--foil); background-size:22px 22px, 220% 220%;
  background-position:calc(sin(var(--ry)) * 8px) calc(sin(var(--rx)) * 8px),
    calc(50% + sin(var(--ry)) * 70%) calc(50% + sin(var(--rx)) * 70%)}
.holo-card[data-pattern="pokeball"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='.6' fill='none' stroke='%23ffffff' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M5 12h4.4M14.6 12H19'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.holo-card[data-pattern="friendball"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='.6' fill='none' stroke='%238dffb8' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M5 12h4.4M14.6 12H19'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.holo-card[data-pattern="loveball"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='.6' fill='none' stroke='%23ff9bd8' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M5 12h4.4M14.6 12H19'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.holo-card[data-pattern="quickball"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='.6' fill='none' stroke='%238fd8ff' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M5 12h4.4M14.6 12H19'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.holo-card[data-pattern="duskball"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='.6' fill='none' stroke='%23a6f08a' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M5 12h4.4M14.6 12H19'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.holo-card[data-pattern="team-rocket"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctext opacity='.6' x='12' y='17' text-anchor='middle' font-family='Arial%2Csans-serif' font-weight='900' font-size='15' fill='%23ff7070'%3ER%3C/text%3E%3C/svg%3E")}
.holo-card[data-pattern="energy"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 4l1.6 6.4L20 12l-6.4 1.6L12 20l-1.6-6.4L4 12l6.4-1.6z' opacity='.55'/%3E%3C/svg%3E")}
/* ultra rare full art: etched lines over the whole card */
.holo-card[data-kind="etched"] .hc-holo{
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.6) 0 1px,transparent 1px 4px), repeating-linear-gradient(45deg,rgba(0,0,0,.4) 0 1px,transparent 1px 5px), var(--foil);
  background-size:auto, auto, 220% 220%}
/* illustration rares: smooth foil over the whole card, with a second soft band of light
   sliding the other way so it shimmers more than a plain holo */
.holo-card[data-kind="glitter"] .hc-holo{
  background-image:repeating-linear-gradient(65deg,transparent 0%,transparent 13%,rgba(255,255,255,.22) 18%,transparent 23%,transparent 32%), var(--foil);
  background-size:260% 260%, 220% 220%;
  background-position:calc(50% - sin(var(--ry)) * 80%) calc(50% - sin(var(--rx)) * 80%),
    calc(50% + sin(var(--ry)) * 70%) calc(50% + sin(var(--rx)) * 70%)}
/* hyper rares: the card is already pale gold, so brightening would wash out its embossed art.
   Overlay deepens the gold and lifts the highlights instead, with fine etched lines. */
.holo-card[data-kind="gold"] .hc-holo{mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.5) 0 1px,transparent 1px 4px), var(--foil);
  background-size:auto, 220% 220%; opacity:calc(.35 + var(--tilt) * .45)}

/* a little wiggle when a holo is revealed, to show off the foil */
@keyframes hc-showoff{
  0%{--ry:0deg; --rx:0deg} 30%{--ry:-22deg; --rx:8deg} 65%{--ry:20deg; --rx:-6deg} 100%{--ry:0deg; --rx:0deg}}
.holo-card.hc-showoff{animation:hc-showoff 1.5s ease-in-out}

@media (prefers-reduced-motion:reduce){
  .holo-card{transition:none}
  .holo-card.hc-showoff{animation:none}}