/* itsori.com — Papaya coin cover (home stack + papaya.html hero).
   Ori's coin assets (Figma "cover animation assets" 167:109968). Like the original Papaya motion: whole coins slide
   out of frame and the next currency slides in, one slot at a time, with a touch of motion blur. Generated by gen_coins.py. */
.coins { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #ff3924; container-type: size; overflow: clip; --ux: 0px; --uy: 1cqh; }
.coin { --d: 82cqh; position: relative; flex: 0 0 auto; width: var(--d); aspect-ratio: 1480 / 1473; margin: 0 calc(var(--d) * -0.14); font-size: var(--d); }
.coin__face { position: absolute; inset: 0; animation: none 6s linear infinite; will-change: transform; }
.coin__face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coin__face:not(:first-child) { transform: translateY(200cqh); }

/* Papaya project hero — same coins, full bleed; portrait (mobile) stacks them and they slide sideways */
/* Papaya hero keeps the shared 30% ink shade and the white logo over the coins (project.css) */
.p-hero--coins { container-type: size; }
@container (max-aspect-ratio: 1/1) {
  .p-hero--coins .coins { flex-direction: column; --ux: 1cqi; --uy: 0px; }
  .p-hero--coins .coin { --d: min(36cqh, 82cqi); margin: calc(var(--d) * -0.14) 0; }
}
@media (prefers-reduced-motion: reduce) { .coin__face { animation: none !important; } }

@keyframes cf-L0 {
  0.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  3.333% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  7.500% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  11.667% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--L .coin__face:nth-child(1) { animation-name: cf-L0; }
@keyframes cf-L1 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  3.333% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  7.500% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  11.667% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  35.833% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  40.000% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  44.167% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
}
.coin--L .coin__face:nth-child(2) { animation-name: cf-L1; }
@keyframes cf-L2 {
  0.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  35.833% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  40.000% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  44.167% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  68.333% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  72.500% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  76.667% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--L .coin__face:nth-child(3) { animation-name: cf-L2; }
@keyframes cf-L3 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  68.333% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  72.500% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  76.667% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
}
.coin--L .coin__face:nth-child(4) { animation-name: cf-L3; }
@keyframes cf-M0 {
  0.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  25.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  29.167% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  33.333% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--M .coin__face:nth-child(1) { animation-name: cf-M0; }
@keyframes cf-M1 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  25.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  29.167% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  33.333% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  46.667% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  50.833% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  55.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--M .coin__face:nth-child(2) { animation-name: cf-M1; }
@keyframes cf-M2 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  46.667% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  50.833% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  55.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  90.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94.167% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  98.333% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
}
.coin--M .coin__face:nth-child(3) { animation-name: cf-M2; }
@keyframes cf-M3 {
  0.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  90.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94.167% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  98.333% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
}
.coin--M .coin__face:nth-child(4) { animation-name: cf-M3; }
@keyframes cf-R0 {
  0.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  14.167% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  18.333% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  22.500% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--R .coin__face:nth-child(1) { animation-name: cf-R0; }
@keyframes cf-R1 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  14.167% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  18.333% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  22.500% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  57.500% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  61.667% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  65.833% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
}
.coin--R .coin__face:nth-child(2) { animation-name: cf-R1; }
@keyframes cf-R2 {
  0.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  57.500% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  61.667% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  65.833% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  79.167% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  83.333% { transform: translate(calc(-50 * var(--ux)), calc(-50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  87.500% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(-100 * var(--ux)), calc(-100 * var(--uy))); filter: blur(0px); }
}
.coin--R .coin__face:nth-child(3) { animation-name: cf-R2; }
@keyframes cf-R3 {
  0.000% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); }
  79.167% { transform: translate(calc(100 * var(--ux)), calc(100 * var(--uy))); filter: blur(0px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  83.333% { transform: translate(calc(50 * var(--ux)), calc(50 * var(--uy))); filter: blur(0.012em); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  87.500% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
  100.000% { transform: translate(calc(0 * var(--ux)), calc(0 * var(--uy))); filter: blur(0px); }
}
.coin--R .coin__face:nth-child(4) { animation-name: cf-R3; }

/* Home stack slot — coins sit to the right and bleed off the right edge (Ori's ref) */
.stack .coins { justify-content: flex-end; --uy: 1.25cqh; }
.stack .coin { --d: 112cqh; margin: 0 calc(var(--d) * -0.045); }
.stack .coin:last-child { margin-right: calc(var(--d) * -0.28); }
@media (max-width: 760px) {   /* Figma mobile: three smaller coins above the card, right-aligned */
  .stack .coins { align-items: flex-start; padding-top: 6.5cqh; }
  .stack .coin { --d: 59cqi; margin: 0 calc(var(--d) * -0.07); }
  .stack .coin:last-child { margin-right: calc(var(--d) * -0.3); }
}