/* coin3d.css — the Coach Jeff Calming Coin as a layered 3D disc. Used by /shop and the front page.
   Markup: .stage > .shadow + .lift > .coin > .face.front + .face.back (each with img + .sheen).
   The page sets --d (coin diameter) on .stage. coin3d.js builds the edge layers. */
.cj3d-stage {
  position: relative;
  height: calc(var(--d) * 1.2);
  display: grid; place-items: center;
  perspective: 1500px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.cj3d-stage.coin-wait { opacity: 0; }
.cj3d-stage { transition: opacity .6s ease; }
.cj3d-stage::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--d) * 1.55); height: calc(var(--d) * 1.55);
  transform: translate(-50%, -52%);
  background: radial-gradient(circle, rgba(201,168,117,0.20), rgba(74,124,140,0.10) 45%, rgba(4,11,23,0) 70%);
  opacity: var(--glow, 1);
  pointer-events: none;
}
.cj3d-stage.drag { cursor: grabbing; }
.cj3d-stage:focus-visible { outline: 2px solid #e0c490; outline-offset: 2px; }
.cj3d-stage .shadow { position: absolute; left: 50%; top: calc(50% + var(--d) * .56); width: calc(var(--d) * .8); height: calc(var(--d) * .09); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.75), rgba(0,0,0,0) 70%); transform: translateX(-50%); pointer-events: none; }
.cj3d-stage .lift { width: var(--d); height: var(--d); transform-style: preserve-3d; position: relative; }
.cj3d-stage .coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.cj3d-stage .face, .cj3d-stage .layer { position: absolute; border-radius: 50%; }
.cj3d-stage .face { inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cj3d-stage .face img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; max-width: none; }
.cj3d-stage .face.front { transform: translateZ(calc(var(--T) / 2 + .5px)); }
.cj3d-stage .face.back  { transform: rotateY(180deg) translateZ(calc(var(--T) / 2 + .5px)); }
.cj3d-stage .sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--so, 0);
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
              linear-gradient(var(--sa, 110deg), rgba(255,255,255,0) 38%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 62%); }
/* Reeded edge, rebuilt from photos of the real coin's edge. */
.cj3d-stage .layer { left: .85%; top: .85%; width: 98.3%; height: 98.3%; background: repeating-conic-gradient(#3b403f 0deg .9deg, #959b98 .9deg 3deg); }
.cj3d-stage .layer.bevel { background: #9ca29f; }