/* Designariusz 3D business card (Info section)
   Portrait 50 x 90 mm, sharp corners like the printed chroma.pl card.
   All selectors are prefixed .dd-bcard so nothing leaks into the theme. */

.dd-bcard {
  --dd-bcard-w: min(62vw, 280px);
  --dd-bcard-edge: #d9d9e0;          /* paper edge colour seen while turning */
  --dd-bcard-shadow: rgba(20, 23, 31, .28);
  position: relative;
  width: 100%;
  min-height: calc(var(--dd-bcard-w) * 1.8 + 96px);
  display: grid;
  place-items: center;
  perspective: 1600px;
  touch-action: pan-y;               /* vertical page scroll keeps working on phones */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dd-bcard.is-dragging { cursor: grabbing; }
.dd-bcard:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.dd-bcard__floor {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--dd-bcard-w) * .9 + 18px);
  width: var(--dd-bcard-w);
  height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--dd-bcard-shadow), transparent);
  filter: blur(6px);
  pointer-events: none;
}

.dd-bcard__body {
  position: relative;
  width: var(--dd-bcard-w);
  aspect-ratio: 50 / 90;
  transform-style: preserve-3d;
  will-change: transform;
}

.dd-bcard__face,
.dd-bcard__core {
  position: absolute;
  inset: 0;
  border-radius: 0;                  /* sharp cut, matches the print */
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.dd-bcard__face img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.dd-bcard__face--front { transform: translateZ(1.2px); }
.dd-bcard__face--back  { transform: rotateY(180deg) translateZ(1.2px); }
.dd-bcard__core { background: var(--dd-bcard-edge); backface-visibility: visible; }

.dd-bcard__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(var(--ga, 115deg),
    rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  background-size: 220% 220%;
  background-position: var(--gx, 50%) 50%;
}

/* Dark mode: the theme's lamp sets html[data-theme="dark"] (functions.php, theme.js initThemeToggle) */
:root[data-theme="dark"] .dd-bcard {
  --dd-bcard-shadow: rgba(0, 0, 0, .6);
  --dd-bcard-edge: #2a2e38;
}