/* ============================================================
   HOME ITERATION 2 - the real coin assembles from its own parts.
   It strikes into being (mint), its own node-network draws on top,
   it presses to set, and a sheen passes across the metal.
   Every coin element is from logo.svg. Pure CSS, plays on load.
   ============================================================ */
.coin-build{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.coin-real{display:block;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* 1 - the blank is struck (revealed from the centre outward), then sets */
.coin-real{opacity:0;clip-path:circle(0% at 50% 50%);animation:coinStrike 1s cubic-bezier(.4,0,.2,1) .15s forwards, coinPress .55s cubic-bezier(.34,1.45,.5,1) 2.5s forwards}
@keyframes coinStrike{0%{opacity:0;clip-path:circle(0% at 50% 50%)}22%{opacity:1}100%{opacity:1;clip-path:circle(75% at 50% 50%)}}
@keyframes coinPress{0%{transform:scale(1)}45%{transform:scale(1.016)}100%{transform:scale(1)}}

/* 2 - the coin's own network draws in on top */
.coin-real line.cnet{stroke-dasharray:1;stroke-dashoffset:1;animation:cnetDraw 1.3s cubic-bezier(.4,0,.2,1) 1.05s forwards}
@keyframes cnetDraw{to{stroke-dashoffset:0}}
.coin-real circle.cnet{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);animation:cnetPop .55s cubic-bezier(.34,1.5,.5,1) 1.2s forwards}
.coin-real polygon.cnet{opacity:0;animation:cnetFade .5s ease 1.35s forwards}
@keyframes cnetPop{to{opacity:1;transform:scale(1)}}
@keyframes cnetFade{to{opacity:1}}

/* 3 - light catches the metal, once */
.coin-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(112deg, transparent 43%, rgba(255,249,238,.30) 49%, rgba(255,252,245,.62) 50.5%, rgba(255,249,238,.30) 52%, transparent 58%);
  transform:translateX(-120%);animation:coinSheen 1.35s cubic-bezier(.4,0,.2,1) 3.0s forwards}
@keyframes coinSheen{0%{opacity:0;transform:translateX(-120%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(120%)}}

@media (prefers-reduced-motion: reduce){
  .coin-real{animation:none;opacity:1;clip-path:none;transform:none}
  .coin-real line.cnet{animation:none;stroke-dashoffset:0}
  .coin-real circle.cnet,.coin-real polygon.cnet{animation:none;opacity:1;transform:none}
  .coin-sheen{display:none}
}
@media (max-width:980px){
  .coin-real{animation:none;opacity:1;clip-path:none;transform:none}
  .coin-real line.cnet{animation:none;stroke-dashoffset:0}
  .coin-real circle.cnet,.coin-real polygon.cnet{animation:none;opacity:1;transform:none}
  .coin-sheen{display:none}
}