@import ../../styles/helpers

.icon3d
    position: absolute
    z-index: 2
    top: 6px
    right: 6px
    width: 47px
    height: auto

.poster
    position: relative
    display: block
    overflow: hidden
    width: 100%
    height: 100%
    border-radius: 5px

.surface
    position: relative
    display: block
    width: 100%
    height: 100%
    .image
        position: absolute
        z-index: 1
        top: 0px
        left: 0px
        width: 100%
        height: auto
        border-radius: 6px

.overlay
    position: absolute
    z-index: 3
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    background: linear-gradient(0deg, #000000F8 0%, #000000F8 35%, #000000BB 100%)
    animation-fill-mode: forwards

.buttonStroke,.button
    animation-fill-mode: forwards

.buttonStroke
    width: 131px
    height: 52px
    border-radius: 99px
    margin-bottom: 12px

.button
    width: 131px
    height: 52px
    padding: 0 22px
    border-radius: 99px
    background: #5400FF
    box-shadow: 0 0 0 2px #5400FF inset
    color: $neutrals8
    &:hover
        background: darken(#5400FF, 10)
        box-shadow: 0 0 0 2px darken(#5400FF, 10) inset
        color: $neutrals8


// fade in
@keyframes overlayFade
  0%
    opacity: 0
  100%
    opacity: 0.96