body
{
    margin     : 0;
    background : #2c2c2c;
}

@keyframes angercode-glassbox-blurfader
{
    from
    {
        opacity : calc(100% / var(--blurindex));
    }
    to
    {
        opacity : 0;
    }
}

.angercode-showcase-boundaries
{
    position         : relative;
    width            : 90%;
    max-height       : 800px;
    aspect-ratio     : 2;
    overflow         : hidden;
    background-color : #4c4c4c;
    border-radius    : 0 50px 50px 50px;
    margin           : 20px auto;
}

.angercode-showcase-information
{
    display   : none;
    position  : absolute;
    bottom    : 0;
    right     : 50px;
    z-index   : 9;
    
    div.row,
    div.facts
    {
        width         : fit-content;
        max-width     : 50%;
        float         : right;
        clear         : both;
        background    : #0c0c0c;
        
        &.facts
        {
            background     : #6c6c6c;
            text-transform : uppercase;
        }
        
        text-align    : right;
        color         : #fefefe;
        font-size     : 2em;
        margin-bottom : 10px;
        padding       : 10px 20px;
    }
    
    transform : skewY(-2deg);
}

.angercode-showcase-container
{
    width      : 100%;
    height     : 100%;
    text-align : center;
    overflow   : hidden;
    position   : relative;
    
    .angercode-showcase-hoverable
    {
        
        position         : absolute;
        height           : 100%;
        width            : 40%;
        z-index          : 999;
        top              : 0;
        transition       : all 300ms ease;
        transform-origin : center;
        
        &.left
        {
            left : 0;
        }
        
        &.right
        {
            right : 0;
        }
        
        &:hover
        {
            transform : scale(1.1);
            .angercode-arrow
            {
                border-color: #2c2c2c99;
            }
        }
        
        .angercode-arrow
        {
            
            position       : absolute;
            top            : 50%;
            transform      : translateY(-50%);
            border         : solid #2c2c2c;
            border-width   : 0 15px 15px 0;
            display        : inline-block;
            padding        : 20px;
            pointer-events : bounding-box;
            
            &.right
            {
                right     : 20%;
                transform : rotate(-45deg);
            }
            
            &.left
            {
                left      : 20%;
                transform : rotate(135deg);
            }
        }
        
    }
    
    .rotator-box
    {
        position        : absolute;
        width           : 60%;
        height          : 80%;
        top             : 10%;
        left            : calc(50% - 30%);
        transform-style : preserve-3d;
        
        .glassplate
        {
            position        : absolute;
            width           : 100%;
            height          : 100%;
            top             : 0;
            left            : calc(50% - 50%);
            transform       : translateZ(100px);
            background      : transparent;
            border-radius   : 50px;
            overflow        : hidden;
            filter          : blur(10px);
            backdrop-filter : blur(10px);
            box-shadow      : 0 0 5px 10px #4c4c4c;
            
            div
            {
                box-sizing       : border-box;
                width            : calc(100% / 19);
                height           : calc(100% / 15);
                float            : left;
                background-color : #fefefe;
                opacity          : calc(100% / var(--blurindex));
                
                &:nth-child( even )
                {
                    animation : angercode-glassbox-blurfader calc((var(--blurindex) * 1s) / 10) infinite alternate;
                }
                
                &:nth-child( odd )
                {
                    animation : angercode-glassbox-blurfader calc((var(--blurindex) * 1s) / 10) infinite alternate-reverse;
                }
                
            }
        }
        
        .rotateable
        {
            
            position            : absolute;
            width               : 100%;
            height              : 100%;
            top                 : 0;
            left                : calc(50% - 50%);
            transform           : perspective(var(--perspective));
            transform-style     : preserve-3d;
            transition          : all ease-out;
            transition-duration : calc(var(--speed) * 20ms);
            /*            animation            : animate 15s linear infinite;
                        animation-play-state : paused;
                        animation-direction  : unset;
                        animation-fill-mode  : forwards;*/
            
            .item
            {
                position            : absolute;
                inset               : 0 0 0 0;
                transform           : rotateY(calc((var(--index) - 1) * (360 / var(--items)) * 1deg)) translateZ(600px);
                border-radius       : 50px;
                background-position : center;
                background-color    : #fefefe;
                background-size     : contain;
                background-repeat   : no-repeat;
                box-shadow          : 0 0 12px 5px black;
                
                &.elfpille
                {
                    &:nth-child( 1 )
                    {
                        background-image : url('../images/11pille_frame_mobile.webp');
                    }
                    
                    &:nth-child( 2 )
                    {
                        background-image : url('../images/11pille_frame_laptop.webp');
                    }
                    
                    &:nth-child( 3 )
                    {
                        background-image : url('../images/11pille_frame_tablet.webp');
                    }
                }
                
                &.simon
                {
                    &:nth-child( 1 )
                    {
                        background-image : url('../images/profitechnik_frame_mobile.webp');
                    }
                    
                    &:nth-child( 2 )
                    {
                        background-image : url('../images/profitechnik_frame_laptop.webp');
                    }
                    
                    &:nth-child( 3 )
                    {
                        background-image : url('../images/profitechnik_frame_tablet.webp');
                    }
                }
                
                &.phaeps
                {
                    &:nth-child( 1 ),
                    &:nth-child( 3 )
                    {
                        background-image : url('../images/phaeps_frame_tablet1.webp');
                    }
                    
                    &:nth-child( 2 ),
                    &:nth-child( 4 )
                    {
                        background-image : url('../images/phaeps_frame_tablet2.webp');
                    }
                }
                
                &.entzettelt
                {
                    &:nth-child( 1 )
                    {
                        background-image : url('../images/entzettelt_frame_mobile.webp');
                    }
                    
                    &:nth-child( 2 )
                    {
                        background-image : url('../images/entzettelt_frame_laptop.webp');
                    }
                    
                    &:nth-child( 3 )
                    {
                        background-image : url('../images/entzettelt_frame_tablet.webp');
                    }
                }
                
                &.csh
                {
                    &:nth-child( 1 ),
                    &:nth-child( 3 )
                    {
                        background-image : url('../images/csh_frame_tablet.webp');
                    }
                    
                    &:nth-child( 2 ),
                    &:nth-child( 4 )
                    {
                        background-image : url('../images/csh_frame_mobile.webp');
                    }
                }
            }
        }
    }
}