/* CraftRank home hero in 3D (see assets/js/hero3d.js). Depth plan: Figma, page "36 Hero 3D depth plan". */
.h3d-art { position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: var(--pz-art-h, 900px); display: block; pointer-events: none; }
/* the poster now comes from the canvas; the dark gradients on top of it stay */
body.theme-modern.skin-poster.pa-home.h3d-on { --pz-art: linear-gradient(transparent, transparent); }

/* cards that tilt toward the pointer, with a light that follows it */
.h3d-tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s; transform-style: preserve-3d; will-change: transform; position: relative; }
.h3d-tilt.h3d-hot { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(124,247,176,.35); }
.h3d-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(124,247,176,.22), rgba(255,255,255,0) 60%); }
.h3d-tilt.h3d-hot::after { opacity: 1; }

@media (max-width: 899px), (prefers-reduced-motion: reduce) { .h3d-art { display: none; } }