/* Rivnitz Pishka — self-contained 3D tzedakah-box animation.
   Drop in with pishka-anim.js. All classes are prefixed rp- / rp--. */

.rp-root {
  --rp-w: 260px;
  --rp-h: calc(var(--rp-w) * 1.8383);
  --rp-d: calc(var(--rp-w) * 0.43);
  --rp-base-w: calc(var(--rp-w) * 1.12);
  --rp-base-h: calc(var(--rp-h) * 0.055);
  --rp-base-d: calc(var(--rp-d) * 1.45);
  --rp-tilt: 12deg;
  --rp-drop-tilt: 28deg;
  --rp-gold: #e0b14a;
  --rp-ease-flip: cubic-bezier(0.37, 0.02, 0.16, 1);
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: block;
  direction: ltr;
  -webkit-tap-highlight-color: transparent;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.rp-root *,
.rp-root *::before,
.rp-root *::after {
  box-sizing: border-box;
}

/* Stage reserves room for the coin drop, the tall stone, the plinth, and the shadow. */
.rp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.38;
  perspective: calc(var(--rp-w) * 6.5);
  perspective-origin: 50% 42%;
  overflow: visible;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.rp-glow {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 70%;
  height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(232, 196, 110, 0.7) 0%,
    rgba(232, 196, 110, 0.28) 42%,
    rgba(232, 196, 110, 0) 72%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.9s ease;
}

.rp-root.is-prayer .rp-glow {
  opacity: 1;
  animation: rp-glow-pulse 3.2s ease-in-out infinite;
}

.rp-shadow {
  position: absolute;
  left: 50%;
  bottom: 3.2%;
  width: 64%;
  height: 5.2%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(40, 32, 24, 0.38) 0%,
    rgba(40, 32, 24, 0.16) 45%,
    rgba(40, 32, 24, 0) 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

/* Nested 3D: sway → tilt → flip → model */
.rp-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7.5%;
  transform-style: preserve-3d;
  z-index: 1;
}

.rp-sway,
.rp-tilt,
.rp-flip,
.rp-model,
.rp-body,
.rp-plinth {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.rp-sway {
  animation: rp-sway 10s ease-in-out infinite;
}

.rp-tilt {
  position: relative;
  transform: rotateX(var(--rp-tilt));
  transition: transform 0.5s ease;
}

.rp-root.is-dropping .rp-tilt {
  transform: rotateX(var(--rp-drop-tilt));
}

/* Fade the very peak of the front face so the slot on the top cap can
   show through during the drop. 4% is above the inscription and crown. */
.rp-root.is-dropping .rp-front {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4.5%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 4.5%);
}

.rp-root.is-prayer .rp-tilt {
  transform: rotateX(10deg);
}

.rp-flip {
  transition: transform 1.15s var(--rp-ease-flip);
  transform: rotateY(0deg);
}

.rp-root.is-prayer .rp-flip {
  transform: rotateY(180deg);
}

.rp-model {
  position: relative;
  width: var(--rp-base-w);
  height: calc(var(--rp-h) + var(--rp-base-h));
}

.rp-body,
.rp-plinth {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.rp-body {
  top: 0;
  width: var(--rp-w);
  height: var(--rp-h);
}

.rp-plinth {
  top: var(--rp-h);
  width: var(--rp-base-w);
  height: var(--rp-base-h);
}

/* Faces share a centered-in-the-box placement; each one is then
   rotated into position and pushed out along its local Z. */
.rp-face,
.rp-edge,
.rp-cap,
.rp-plinth-face {
  position: absolute;
  left: 50%;
  top: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Keep a tiny bit of the face visible during mid-flip in WebKit. */
  outline: 1px solid transparent;
}

.rp-front,
.rp-back {
  width: var(--rp-w);
  height: var(--rp-h);
  margin: calc(var(--rp-h) / -2) 0 0 calc(var(--rp-w) / -2);
  background-color: transparent;
}

.rp-front {
  transform: translateZ(calc(var(--rp-d) / 2));
}

.rp-back {
  /* rotateY(180deg) first (rightmost), then push along the rotated Z
     so the inscribed back sits on the far side and reads correctly
     (not mirrored) after the parent flips 180°. */
  transform: rotateY(180deg) translateZ(calc(var(--rp-d) / 2));
}

.rp-front img,
.rp-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.rp-edge {
  width: var(--rp-d);
  height: var(--rp-h);
  margin: calc(var(--rp-h) / -2) 0 0 calc(var(--rp-d) / -2);
  background-image: var(--rp-side);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.rp-edge-left {
  transform: rotateY(-90deg) translateZ(calc(var(--rp-w) / 2));
}

.rp-edge-right {
  /* The side texture is lit from its left (front) edge; flip it so
     the right side is also brighter toward the front. */
  transform: rotateY(90deg) translateZ(calc(var(--rp-w) / 2)) scaleX(-1);
}

.rp-cap {
  width: var(--rp-w);
  height: var(--rp-d);
  margin: calc(var(--rp-d) / -2) 0 0 calc(var(--rp-w) / -2);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.rp-cap-top {
  background-image: var(--rp-top);
  transform: rotateX(90deg) translateZ(calc(var(--rp-h) / 2 + 0.5px));
}

.rp-cap-bottom {
  background: #2a2a2c;
  transform: rotateX(-90deg) translateZ(calc(var(--rp-h) / 2));
}

.rp-plinth-face {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.rp-plinth-front,
.rp-plinth-back {
  width: var(--rp-base-w);
  height: var(--rp-base-h);
  margin: calc(var(--rp-base-h) / -2) 0 0 calc(var(--rp-base-w) / -2);
  background-image: var(--rp-base);
}

.rp-plinth-front {
  transform: translateZ(calc(var(--rp-base-d) / 2));
}

.rp-plinth-back {
  transform: rotateY(180deg) translateZ(calc(var(--rp-base-d) / 2));
}

.rp-plinth-left,
.rp-plinth-right {
  width: var(--rp-base-d);
  height: var(--rp-base-h);
  margin: calc(var(--rp-base-h) / -2) 0 0 calc(var(--rp-base-d) / -2);
  background-image: var(--rp-base-side);
}

.rp-plinth-left {
  transform: rotateY(-90deg) translateZ(calc(var(--rp-base-w) / 2));
}

.rp-plinth-right {
  transform: rotateY(90deg) translateZ(calc(var(--rp-base-w) / 2));
}

.rp-plinth-top,
.rp-plinth-bottom {
  width: var(--rp-base-w);
  height: var(--rp-base-d);
  margin: calc(var(--rp-base-d) / -2) 0 0 calc(var(--rp-base-w) / -2);
}

.rp-plinth-top {
  background-image: var(--rp-base-top);
  transform: rotateX(90deg) translateZ(calc(var(--rp-base-h) / 2));
}

.rp-plinth-bottom {
  background: #1c1c1e;
  transform: rotateX(-90deg) translateZ(calc(var(--rp-base-h) / 2));
}

/* Coin — lives in the tilted 3D group (but not the flip) so it stays
   lined up with the slot as the stone leans forward to receive it. */
.rp-coin {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--rp-w) * 0.18);
  height: calc(var(--rp-w) * 0.18);
  margin-left: calc(var(--rp-w) * -0.09);
  background-image: var(--rp-coin);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* Parked above and in front of the crown until the drop animation. */
  transform: translateY(-120%) translateZ(calc(var(--rp-d) * 0.6));
}

.rp-root.is-dropping .rp-coin {
  animation: rp-coin-drop 0.85s cubic-bezier(0.4, 0.05, 0.75, 0.15) 0.12s both;
}

/* Soft hit when the coin reaches the slot. */
.rp-root.is-hit .rp-model {
  animation: rp-hit 0.18s ease-out;
}

.rp-root.is-prayer .rp-model {
  cursor: pointer;
}

/* Screen-reader live region. */
.rp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- motion ---------- */

@keyframes rp-sway {
  0%, 100% { transform: rotateY(0deg); }
  25%      { transform: rotateY(11deg); }
  75%      { transform: rotateY(-11deg); }
}

@keyframes rp-coin-drop {
  0% {
    opacity: 1;
    transform: translateY(-130%) translateZ(calc(var(--rp-d) * 0.7)) scale(1) rotate(-18deg);
  }
  58% {
    opacity: 1;
    transform: translateY(-70%) translateZ(calc(var(--rp-d) * 0.55)) scale(0.92) rotate(12deg);
  }
  86% {
    opacity: 1;
    transform: translateY(-14%) translateZ(calc(var(--rp-d) * 0.12)) scale(0.55) rotate(24deg);
  }
  100% {
    opacity: 0;
    transform: translateY(22%) translateZ(0) scale(0.25) rotate(36deg);
  }
}

@keyframes rp-hit {
  0%   { margin-top: 0; }
  40%  { margin-top: 3px; }
  100% { margin-top: 0; }
}

@keyframes rp-glow-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* ---------- reduced motion: crossfade, no sway, no flip ---------- */

.rp-root.rp-reduced .rp-sway {
  animation: none !important;
  transform: none !important;
}

.rp-root.rp-reduced .rp-tilt {
  transition: none !important;
  transform: rotateX(8deg) !important;
}

.rp-root.rp-reduced .rp-flip {
  transition: none !important;
  transform: none !important;
}

.rp-root.rp-reduced .rp-front,
.rp-root.rp-reduced .rp-back {
  transition: opacity 0.55s ease;
}

/* Place the back face on the same plane as the front and fade it in. */
.rp-root.rp-reduced .rp-front {
  z-index: 1;
}
.rp-root.rp-reduced .rp-back {
  transform: translateZ(calc(var(--rp-d) / 2 + 1px));
  opacity: 0;
  z-index: 2;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.rp-root.rp-reduced.is-prayer .rp-front {
  opacity: 0;
}

.rp-root.rp-reduced.is-prayer .rp-back {
  opacity: 1;
}

.rp-root.rp-reduced .rp-coin,
.rp-root.rp-reduced.is-dropping .rp-coin {
  animation: none !important;
}

.rp-root.rp-reduced.is-dropping .rp-coin {
  /* A short, simple fade so the donor still sees a coin, without motion. */
  animation: rp-coin-fade 0.7s ease both !important;
}

@keyframes rp-coin-fade {
  0%   { opacity: 0; transform: translateY(-20%) scale(1); }
  30%  { opacity: 1; transform: translateY(-20%) scale(1); }
  100% { opacity: 0; transform: translateY(-20%) scale(1); }
}

.rp-root.rp-reduced .rp-glow,
.rp-root.rp-reduced.is-prayer .rp-glow {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .rp-root:not(.rp-motion-ok) .rp-sway {
    animation: none;
  }
}