/* Vivere coin: the brand's signature motion.
   Front = MEMENTO MORI (the V and skull). Back = LIVE IT YOUR WAY (the triad and the path).
   One component, five uses: hero scroll spin, tap flip, nav hover flip, add-to-cart toss, loader.
   Animates transform/opacity only; every motion has a reduced-motion fallback. */

.vc-coin {
  --size: 320px;
  --thick: calc(var(--size) * 0.06);   /* coin thickness */
  --edge: #8a5534;                      /* copper edge, darker than the face */
  --edge-hi: #c98a5e;
  width: var(--size);
  aspect-ratio: 1;
  max-width: 100%;
  perspective: calc(var(--size) * 4);
  border: 0; padding: 0; background: none; cursor: pointer;
  display: inline-block; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.vc-coin:focus-visible { outline: 2px solid var(--edge-hi); outline-offset: 6px; border-radius: 50%; }

.vc-coin__body {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn, 0deg));
  transition: transform 900ms cubic-bezier(.2, .8, .2, 1);
}
.vc-coin[aria-pressed="true"] .vc-coin__body { --turn: 180deg; }

.vc-coin__face, .vc-coin__rim {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden;
}
.vc-coin__face { background-size: cover; }
.vc-coin__face--front { transform: translateZ(calc(var(--thick) / 2)); }
.vc-coin__face--back  { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); }

/* thickness: stacked copper rings between the two faces */
.vc-coin__rim {
  backface-visibility: visible;
  background: radial-gradient(circle, transparent 66%, var(--edge) 67%, var(--edge-hi) 70%, var(--edge) 72%);
  transform: translateZ(var(--z));
}

/* copper glint that sweeps across while turning */
.vc-coin__face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 226, 196, .38) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 120% 0;
  mix-blend-mode: screen; opacity: 0;
}
.vc-coin.is-turning .vc-coin__face::after { animation: vc-glint 900ms ease-out; }
@keyframes vc-glint { 0% { opacity: 0; background-position: 120% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }

/* soft contact shadow */
.vc-coin::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -9%; height: 8%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}

/* 1. hero: spins with the page scroll (no JS). Lands on the back by the end. */
@supports (animation-timeline: view()) {
  .vc-coin--scroll .vc-coin__body {
    transition: none;
    animation: vc-scroll-spin linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 60%;
  }
  @keyframes vc-scroll-spin { from { transform: rotateY(-25deg) rotateX(8deg); } to { transform: rotateY(540deg) rotateX(0deg); } }
}

/* 3. nav mini coin: flips on hover/focus */
.vc-coin--nav { --size: 44px; }
.vc-coin--nav .vc-coin__body { transition-duration: 600ms; }
.vc-coin--nav:hover .vc-coin__body,
.vc-coin--nav:focus-visible .vc-coin__body { --turn: 180deg; }
.vc-coin--nav::after { display: none; }

/* 5. loader: steady spin */
.vc-coin--loader .vc-coin__body { animation: vc-spin 1.6s linear infinite; transition: none; }
@keyframes vc-spin { to { transform: rotateY(360deg); } }

/* 4. toss is driven by coin.js (Web Animations API) */

@media (prefers-reduced-motion: reduce) {
  .vc-coin__body { transition: none; animation: none !important; transform: none; }
  .vc-coin__face--back { transform: none; opacity: 0; transition: opacity 200ms; }
  .vc-coin[aria-pressed="true"] .vc-coin__face--back,
  .vc-coin--nav:hover .vc-coin__face--back { opacity: 1; }
  .vc-coin__rim { display: none; }
  .vc-coin.is-turning .vc-coin__face::after { animation: none; }
}