#cover
{
    padding: 0;

    -webkit-mask-box-image-source: url("../images/section.svg");
    -webkit-mask-box-image-slice: 19 0 fill;
    -webkit-mask-box-image-repeat: repeat stretch;
    mask-border-source: url("../images/section.svg");
    mask-border-slice: 19 0 fill;
    mask-border-repeat: repeat stretch;
    /* margin-top: -20px; */
    margin-bottom: -20px;
}

.cover-scroll
{
    min-width: 100vw;
    min-height: 100vh;

    display: flex;
    place-content: center;
    place-items: center;
    /* padding: 10rem 1rem; */
}

.frame-flip
{
    --section-gradient3 : radial-gradient(circle 65em at center, #B80900FF 0%, #4E0100FF 65%, #0F0600FF 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../images/Cover/frame-01.png") center/cover no-repeat,var(--pattern2), var(--section-gradient3);
    animation: flip 1s infinite;
}

@keyframes flip
{
    0%   { background: url('../images/Cover/frame-01.png') center/cover no-repeat,var(--pattern2), var(--section-gradient3); }
    25%  { background: url('../images/Cover/frame-02.png') center/cover no-repeat,var(--pattern2), var(--section-gradient3); }
    50%  { background: url('../images/Cover/frame-03.png') center/cover no-repeat,var(--pattern2), var(--section-gradient3); }
    75%  { background: url('../images/Cover/frame-04.png') center/cover no-repeat,var(--pattern2), var(--section-gradient3); }
}

#scene
{
    width: 1600px;
    height: 1035px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scene .foreground-frame, #scene .background-frame
{
    position: absolute;
    z-index: 10;
}

#scene .starter
{
    position: absolute;
    z-index: 15; 
    width: 958px;

    &.top
    {
        clip-path: inset(0 0 40% 0);
    }
    
    &.bottom
    {
        clip-path: inset(60% 0 0 0);
    }
}

@media screen and (max-width: 700px)
{
    .cover-scroll
    {
        padding: 0;
    }

    #scene
    {
        transform: scale(0.35) ;
    }
}