/**
 * @ Author: MyoMoonlight
 * @ Create Time: 2024-08-26 23:50:39
 * @ Modified time: 2025-02-04 11:20:02
 */

#intro {
    margin-top: 80px;
    text-align: center;
    padding: 0 1em;
    & > h2 {
        padding: 1em 0;
    }
    & > p {
        margin: auto;
        max-width: 600px;
        font-weight: 500;
    }
}

#roll {
    position: relative;
    max-width: 1000px;
    min-height: 300px;
    overflow: hidden;
    margin: auto;
    margin-top: 100px;
    padding-top: 200px;

    & > section.imgs {
        height: 400px;
        width: 100%;
        top: 0;
        position: absolute;
        outline: 1px black;
        z-index: 4;
        --mid-side-pos: 28%;
        --side-pos: 10%;

        & > img {
            opacity: 0;
            aspect-ratio: 1/1;
            object-fit: cover;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            transition: 0.5s;
            position: absolute;
            width: 14%;
            transform: translateX(-50%);
            top: 100%;
            

            &.left,
            &.right {
                opacity: 0.4;
                top: 50%;
            }

            &.left {
                left: var(--side-pos);
            }
            &.right {
                left: calc(100% - var(--side-pos));
            }

            &.mid-left,
            &.mid-right {
                box-shadow: 0px 10px 20px 0px #0000002d;
                opacity: 0.7;
                top: 20%;
                width: 17%;
            }

            &.mid-left {
                left: var(--mid-side-pos);
            }
            &.mid-right {
                left: calc(100% - var(--mid-side-pos));
            }

            &.mid {
                opacity: 1;
                top: 0%;
                left: 50%;
                width: 20%;
                

            }
        }
    }

    & > img {
        bottom: 150px;
        position: absolute;
        height: 3rem;
        left: 15%;
        z-index: 6;
        cursor: pointer;

        &:nth-of-type(2) {
            left: unset;
            right: 15%;
        }
    }

    & > .text {
        padding: 100px 1em;
        padding-bottom: 50px;
        position: relative;
        z-index: 5;
        background: linear-gradient(0deg, #fff 50%, #fff0);
        /* background-color: #0003; */
    }

    & > .text > div {
        display: none;
        margin: auto;
        & > h2 {
            font-size: 1.7em;
            padding: 1em 0;
            text-align: center;
        }
        & > p {
            max-width: 600px;
            margin: auto;
            text-align: center;
        }
        & > a {
            margin: 2em auto;
        }
        &.active {
            display: block;
            animation: activeText 0.4s 0s forwards 1 ease-in-out;
        }
    }
}

@keyframes activeText {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        display: block;
        opacity: 1;
    }
}

@media screen and (max-width: 450px) {
    #roll {
        padding-top: 30vw;
        & > section.imgs {
            height: 40vw;
            --mid-side-pos: 16%;

            & > img {
                &.left,
                &.right {
                    opacity: 0;
                    top: 100%;
                }
                &.mid-left,
                &.mid-right {
                    width: 20%;
                    opacity: 0.6;
                    top: 40%;
                }

                &.mid {
                    width: 25%;
                }
            }
        }
        & > img {
            bottom: 70px;
            height: 2em;
        }
        & > section.text {
            padding-top: 0;
            & > div > a {
                margin-bottom: 0.5em;
            }
        }
    }
}