/* The Aurelius coin: obverse = restaurant (the horseman), reverse = hotel (laurel + stars).
   Pure CSS 3D; coin.js drives --a (rotateY), tilt, lift and the light. */

.coin-stage { position: relative; display: grid; place-items: center; perspective: 1400px; }
.coin {
  --size: clamp(220px, 41vmin, 430px);
  --t: calc(var(--size) * .034);
  --a: 0deg; --rx: 0deg; --lift: 0px; --lx: 35%; --ly: 28%;
  position: relative; width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.coin:active { cursor: grabbing; }
.coin:focus-visible { outline: none; }
.coin:focus-visible .coin__face { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.coin__body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(calc(var(--lift) * -1)) rotateX(var(--rx)) rotateY(var(--a));
}
.coin__shadow {
  position: absolute; left: 50%; bottom: calc(var(--size) * -.16); width: calc(var(--size) * .78); height: calc(var(--size) * .1);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  transform: translateX(-50%) scale(calc(1 - var(--lift) / 260px)); opacity: calc(.9 - var(--lift) / 240px); pointer-events: none;
}
:root[data-side="soba"] .coin__shadow { background: radial-gradient(closest-side, rgba(40, 30, 10, .35), transparent); }

.coin__face, .coin__edge i {
  position: absolute; inset: 0; border-radius: 50%;
}
.coin__face {
  overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 246, 210, .85), rgba(255, 240, 190, 0) 42%),
    radial-gradient(circle at 50% 50%, transparent 66%, rgba(90, 60, 18, .5) 67.5%, transparent 69%),
    conic-gradient(from calc(var(--a) * -.5 + 20deg), #b8893a, #f1d68a, #a77a2f, #e6c06a, #8c6223, #f3d888, #b8893a);
  box-shadow: inset 0 0 0 calc(var(--size) * .012) rgba(255, 232, 160, .45), inset 0 0 calc(var(--size) * .06) rgba(70, 45, 10, .55);
}
.coin__face--front { transform: translateZ(calc(var(--t) / 2)); }
.coin__face--back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.coin__edge { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin__edge i { background: linear-gradient(90deg, #6e4c18, #b98c3b 50%, #6e4c18); }

/* engraving on both faces */
.coin__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin__ring text { font-family: var(--f-display); font-weight: 600; fill: #5c4012; letter-spacing: 2px; }
.coin__ring .beads { fill: none; stroke: #6e4c18; stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 11.6; opacity: .75; }
.coin__ring .rim { fill: none; stroke: rgba(92, 64, 18, .55); stroke-width: 1.5; }
.coin__ring .shine { fill: none; stroke: rgba(255, 240, 190, .55); stroke-width: 1; }
.coin__relief { position: absolute; inset: 0; filter: drop-shadow(1px 1.5px 0 rgba(255, 244, 205, .55)) drop-shadow(-1px -1px 0 rgba(70, 46, 10, .55)); }
.coin__horse {
  position: absolute; left: 50%; top: 49%; width: 46%; height: 49%; transform: translate(-50%, -50%);
  background: linear-gradient(160deg, #e8c46a, #9c712a 55%, #d7b25c);
  -webkit-mask: url(../img/konjanik.png) center / contain no-repeat; mask: url(../img/konjanik.png) center / contain no-repeat;
}
.coin__laurel { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin__laurel .leaf { fill: #a57a2e; }
.coin__laurel .stem { fill: none; stroke: #8f6625; stroke-width: 2.4; }
.coin__laurel .word { font-family: var(--f-display); font-weight: 700; fill: #8a6023; letter-spacing: 7px; }
.coin__laurel .small { font-family: var(--f-display); font-weight: 600; fill: #7a5520; letter-spacing: 5px; }
.coin__laurel .star { fill: #96692a; }

.coin-hint {
  display: inline-flex; align-items: center; gap: .9rem; margin-top: calc(var(--size, 300px) * .02);
  font: 500 .7rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2);
}
.coin-hint svg { width: 34px; height: 12px; }
.coin-hint .l { animation: nudgeL 2.4s var(--ease-io) infinite; }
.coin-hint .r { animation: nudgeR 2.4s var(--ease-io) infinite; }
@keyframes nudgeL { 50% { transform: translateX(-4px); } }
@keyframes nudgeR { 50% { transform: translateX(4px); } }