@layer components {
  /* Scene */
  .coin-scene{
    width: var(--coin-scene-size);
    height: var(--coin-scene-size);
    perspective: 900px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Coin */
  .coin{
    width: var(--coin-size);
    height: var(--coin-size);
    position: relative;
    transform-style: preserve-3d;
  }

  /* Faces */
  .coin-face{
    position:absolute;
    inset:0;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow:
      inset 0 0 0 6px rgba(255,255,255,.15),
      inset 0 -10px 18px rgba(0,0,0,.25);
  }

  .coin-face::before{
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .coin-heads{
    background: radial-gradient(circle at 30% 25%, #ffd45a, #c9971a 70%, #8a6510 100%);
    transform: translateZ(var(--coin-depth));
  }

  .coin-heads::before{ background-image: var(--coin-head-img); }

  .coin-tails{
    background: radial-gradient(circle at 30% 25%, #ffd45a, #b88413 70%, #75520b 100%);
    transform: rotateX(180deg) translateZ(var(--coin-depth));
  }

  .coin-tails::before{ background-image: var(--coin-tail-img); }

  /* Variants */
  .coin[data-coin-type="chf"]{
    --coin-head-img: url('/static/img/coin_head_chf.png');
    --coin-tail-img: url('/static/img/coin_tail_chf.png');
  }
  .coin[data-coin-type="penny"]{
    --coin-head-img: url('/static/img/coin_head_penny.png');
    --coin-tail-img: url('/static/img/coin_tail_penny.png');
  }

  /* Shadow */
  .coin::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:50%;
    box-shadow: var(--coin-shadow);
    pointer-events:none;
  }

  .coin-mark{ display:none; }

  /* Resting states */
  .coin.rest-heads{ transform: rotateX(0deg); }
  .coin.rest-tails{ transform: rotateX(180deg); }

  /* Animation */
  .coin.is-flipping{ animation: coinFlip 1050ms cubic-bezier(.18,.75,.18,1.02) both; }
  .coin.is-flipping::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 40%, transparent 70%);
    transform: translateZ(20px);
    animation: shine 1050ms ease-out both;
    pointer-events:none;
    mix-blend-mode: screen;
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce){
    .coin.is-flipping{ animation:none; }
    .coin.is-flipping::before{ animation:none; }
  }
}