.egg
  .egg__specs-arm
  .egg__shell
  .egg__specs
    .egg__spec.egg__spec--left
    .egg__spec-bridge
    .egg__spec.egg__spec--right

*
*:before
*:after
  box-sizing border-box

// Original image is 742x769
:root
  --size 50
  --unit calc((var(--size) / 769) * 1vmin)
  --specs hsl(0, 0%, 15%)
  --shell-outline hsl(0, 0, 40%)
  --bg hsl(50, 100%, 50%)
  --shell hsl(0, 0%, 100%)

body
  background-color var(--bg)
  display flex
  align-items center
  justify-content center
  min-height 100vh

  // animation shadow-party 1s infinite ease

  @keyframes shadow-party
    for $frame in (0..100)
      {$frame * 1%}
        background hsl(($frame * 3.6), 100%, 50%)


.egg
  height calc(769 * var(--unit))
  width calc(742 * var(--unit))
  z-index 2
  position relative

  *
    position absolute

  &__shell
    top 50%
    left 50%
    transform translate(-50%, -50%)
    height 95%
    width 74%

    &:after
    &:before
      content ''
      border calc(22 * var(--unit)) solid var(--shell-outline)
      position absolute
      background var(--shell)

    &:before
      top 0
      left 50%
      height 65%
      width 92%
      transform translate(-50%, 0%)
      border-radius 50% 50% 0 0 / 100% 100% 0 0
      $clip = inset(0 0 10% 0)
      -webkit-clip-path $clip
      clip-path $clip

    &:after
      bottom 0
      width 100%
      height 50%
      border-radius 0 0 50% 50% / 0 0 78% 78%
      $clip = inset(15% 0 0 0)
      -webkit-clip-path $clip
      clip-path $clip

  &__specs
    height 31%
    width 95%
    top 31%
    left 50%
    transform translate(-50%, 0)

  &__spec
    top 0
    width 46%
    height 95%
    transform rotate(calc(var(--rotate) * 12deg)) rotateY(calc(var(--flip) * 180deg))
    border calc(44 * var(--unit)) solid var(--specs)
    border-radius 25% 60% 32% 38%/34% 37% 45% 30%

    &:after
      content ''
      position absolute
      height calc(100% + 88 * var(--unit))
      width calc(100% + 88 * var(--unit))
      top calc(-44 * var(--unit))
      left calc(-44 * var(--unit))
      border calc(44 * var(--unit)) solid var(--specs)
      border-radius 25% 60% 32% 38%/34% 37% 45% 30%
      box-shadow calc(0 * var(--unit)) calc(25 * var(--unit)) calc(10 * var(--unit)) hsla(0, 0%, 0%, 0.45) inset,
        calc(-15 * var(--unit)) calc(25 * var(--unit)) calc(20 * var(--unit)) hsla(0, 0%, 0%, 0.45)
      $clip = polygon(49% 0, 100% 0, 100% 160%, 90% 160%, 11% 150%, 17% 95%)
      -webkit-clip-path $clip
      clip-path $clip

    &--left
      --flip 0
      --rotate -1
      left 0

    &--right
      --flip 1
      --rotate 1
      right 0

  &__spec-bridge
    height 64%
    width 25%
    top 1%
    left 50%
    transform translate(-50%)
    border-radius 50%/50%
    border calc(55 * var(--unit)) solid var(--specs)
    $clip = polygon(10% 0, 90% 0, 90% 50%, 10% 50%)
    -webkit-clip-path $clip
    clip-path $clip

  &__specs-arm
    height 14%
    width 90%
    background var(--specs)
    left 50%
    top 35%
    transform translate(-50%, 0)
    $clip = polygon(-7% 0, 25% 55%, 75% 55%, 107% 0, 100% 79%, 76% 100%, 24% 100%, 0 79%)
    -webkit-clip-path $clip
    clip-path $clip