/* ============================================================================
   PaiyCard 3D — a real trading-card: pointer tilt, tap-to-flip, card-stock
   thickness, holographic PaiyBit-blue border + sparkles, eggshell back with
   the PaiyBit logo. Shared by the Paiydoption page, the Binder and persona pages.
   Structure (built by paiycard-3d.js):
     .pc3d-scene > .pc3d-card > (7×.pc3d-ply, .pc3d-face.pc3d-front, .pc3d-face.pc3d-back)
   Size with --pc3d-w on .pc3d-scene (default 190px; use 100% to fill a cell).
   ========================================================================== */
.pc3d-scene {
  display:inline-block; width:var(--pc3d-w, 190px); max-width:100%;
  perspective:900px; cursor:pointer; outline:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));
  -webkit-tap-highlight-color:transparent;
}
.pc3d-scene:hover { filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(34,182,242,.28)); }
.pc3d-card {
  position:relative; width:100%; aspect-ratio:63/88; margin:0 auto;
  transform-style:preserve-3d; border-radius:12px; will-change:transform;
  transition:transform .75s cubic-bezier(.25,.7,.3,1);
}
/* stacked plies = the pokemon-card edge you see as the card turns */
.pc3d-ply { position:absolute; inset:0; border-radius:12px; }
.pc3d-ply:nth-child(1){ transform:translateZ(-2.6px); background:#ddd5c2; }
.pc3d-ply:nth-child(2){ transform:translateZ(-1.7px); background:#e4dcc9; }
.pc3d-ply:nth-child(3){ transform:translateZ(-0.8px); background:#eae2d0; }
.pc3d-ply:nth-child(4){ transform:translateZ(0);      background:#ece5d4; }
.pc3d-ply:nth-child(5){ transform:translateZ(0.8px);  background:#eae2d0; }
.pc3d-ply:nth-child(6){ transform:translateZ(1.7px);  background:#e4dcc9; }
.pc3d-ply:nth-child(7){ transform:translateZ(2.6px);  background:#ddd5c2; }
.pc3d-face {
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.pc3d-front { transform:translateZ(3px); }
.pc3d-front img { width:100%; height:100%; object-fit:cover; display:block; }
.pc3d-glare {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--gx,0)*60%) calc(45% + var(--gy,0)*60%),
    rgba(255,255,255,.26), rgba(255,255,255,.05) 38%, rgba(0,0,0,.12) 85%);
  mix-blend-mode:screen; opacity:0; transition:opacity .3s;
}
.pc3d-scene:hover .pc3d-glare { opacity:1; }

/* holographic PaiyBit-blue border ring */
.pc3d-holo {
  position:absolute; inset:0; border-radius:12px; padding:7px; pointer-events:none;
  background:
    repeating-linear-gradient(calc(115deg + var(--gx,0)*30deg), rgba(255,255,255,.4) 0 1px, rgba(255,255,255,0) 1px 3.2px),
    linear-gradient(calc(120deg + var(--gx,0)*55deg),
      #0b3f8f 0%, #1e7bf0 16%, #7fe0ff 30%, #f2fcff 44%, #22b6f2 54%, #2f6df0 68%, #6d5df6 83%, #0b3f8f 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:pc3dHolo 7s ease-in-out infinite alternate;
}
@keyframes pc3dHolo {
  from { filter:hue-rotate(-16deg) saturate(1.05) brightness(1); }
  to   { filter:hue-rotate(24deg)  saturate(1.35) brightness(1.15); }
}
/* twinkling foil glints */
.pc3d-sparks { position:absolute; inset:0; border-radius:12px; overflow:hidden; pointer-events:none; }
.pc3d-sparks i {
  position:absolute; width:14px; height:14px; opacity:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.95) 47% 53%, rgba(255,255,255,0) 56%),
    linear-gradient(0deg,  rgba(255,255,255,0) 44%, rgba(255,255,255,.95) 47% 53%, rgba(255,255,255,0) 56%),
    radial-gradient(circle, #fff 0 12%, rgba(127,224,255,.9) 24%, rgba(34,182,242,0) 62%);
  filter:drop-shadow(0 0 4px rgba(34,182,242,.9));
  animation:pc3dSpark 3s linear infinite;
}
@keyframes pc3dSpark {
  0%, 72% { opacity:0; transform:scale(0) rotate(var(--r,0deg)); }
  80%     { opacity:1; transform:scale(var(--s,1)) rotate(calc(var(--r,0deg) + 16deg)); }
  88%     { opacity:.65; }
  100%    { opacity:0; transform:scale(calc(var(--s,1)*.25)) rotate(calc(var(--r,0deg) + 32deg)); }
}
.pc3d-sparks i:nth-child(1){ left:6%;  top:9%;  --s:.9;  --r:0deg;   animation-delay:.3s;  animation-duration:2.7s; }
.pc3d-sparks i:nth-child(2){ left:86%; top:5%;  --s:.65; --r:30deg;  animation-delay:1.4s; animation-duration:3.6s; }
.pc3d-sparks i:nth-child(3){ left:91%; top:42%; --s:1.05;--r:10deg;  animation-delay:2.2s; animation-duration:3.1s; }
.pc3d-sparks i:nth-child(4){ left:8%;  top:76%; --s:.8;  --r:45deg;  animation-delay:.9s;  animation-duration:4.1s; }
.pc3d-sparks i:nth-child(5){ left:82%; top:87%; --s:.95; --r:20deg;  animation-delay:3s;   animation-duration:3.4s; }
.pc3d-sparks i:nth-child(6){ left:47%; top:3%;  --s:.6;  --r:15deg;  animation-delay:1.9s; animation-duration:2.9s; }
.pc3d-sparks i:nth-child(7){ left:3%;  top:40%; --s:.7;  --r:38deg;  animation-delay:3.8s; animation-duration:3.8s; }

/* the back: one eggshell slab with the PaiyBit mark */
.pc3d-back {
  transform:rotateY(180deg) translateZ(3px);
  display:flex; align-items:center; justify-content:center;
  background-color:#f4efe4;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) calc(30% + var(--gx,0)*22%), rgba(255,255,255,.22) calc(43% + var(--gx,0)*22%), rgba(255,255,255,0) calc(56% + var(--gx,0)*22%)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.31  0 0 0 0.26 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(140% 110% at 50% -8%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(130% 130% at 50% 115%, rgba(101,88,60,.14), rgba(101,88,60,0) 55%),
    linear-gradient(180deg, #f7f2e8, #efe9db);
}
.pc3d-back::after {
  content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -1px 2px rgba(96,82,52,.18),
              inset 1px 0 2px rgba(255,255,255,.35), inset -1px 0 2px rgba(96,82,52,.10);
}
.pc3d-backlogo { width:58%; height:auto; display:block; opacity:.94; user-select:none; -webkit-user-select:none; }

@media (prefers-reduced-motion: reduce) {
  .pc3d-card { transition:none; }
  .pc3d-holo { animation:none; }
  .pc3d-sparks i { animation:none; opacity:0; }
}