/**
 * 이 파일은 코스모스 메인테마의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 메인화면
 *
 * @file /modules/naddle/coursemos/themes/www/styles/index.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2024. 5. 7.
 */
section {
    h3 {
        overflow: hidden;

        > p {
            font: var(--font-display-lg);
            transition: transform 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);

            > i {
                color: var(--color-text-brand-primary);
                font-style: normal;
            }

            &:nth-child(1) {
                transform: translateX(-100%);
            }

            &:nth-child(2) {
                transform: translateX(100%);
            }
        }

        > small {
            display: block;
            padding-top: 48px;
            padding-left: var(--container-small-padding);
            font: var(--font-head-sm);
            transform: translateY(100%);
            color: var(--color-text-secondary);
            transition: transform 1s cubic-bezier(0.34, 0.07, 0.095, 0.995);
        }
    }

    &.animate {
        h3 {
            > p {
                transition-delay: 0.2s;
                transform: translateX(0);
            }

            > small {
                transition-delay: 0.8s;
                transform: translateY(0);
            }
        }
    }
}

section.landing {
    height: 960px;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);

    > div[data-role='container'] {
        display: flex;
        align-items: center;

        > div {
            flex-shrink: 0;
            overflow: hidden;
        }

        > aside {
            position: relative;
            flex-grow: 1;
            flex-shrink: 1;
            height: 640px;

            > div {
                position: absolute;
                top: 0;
                right: 0;
                height: 640px;
                aspect-ratio: 1/1;
                overflow: hidden;
                border-radius: 50%;
                background: var(--color-black);
                z-index: -1;
                font-size: 0;

                > video {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: 50% 30%;
                }

                &::after {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    content: ' ';
                }
            }
        }
    }
}

section.carousel {
    height: 960px;
    position: relative;

    > div.swiper {
        height: 100%;

        > div.swiper-wrapper {
            height: 100%;

            > div.swiper-slide {
                width: 100vw;
                height: 100%;
                position: relative;

                > div[data-role='container'] {
                    padding-top: var(--section-gap);

                    > h4 {
                        display: block;
                        overflow: hidden;

                        > p {
                            font: var(--font-head-lg);
                            color: var(--color-white);
                            transform: translateY(100%);
                            transition: transform 1s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                        }
                    }

                    > small {
                        display: block;
                        overflow: hidden;

                        > p {
                            padding-top: 48px;
                            font: var(--font-paragraph-xlg);
                            color: var(--color-white);
                            transform: translateY(100%);
                            transition: transform 1s cubic-bezier(0.34, 0.07, 0.095, 0.995);
                        }
                    }
                }

                &.swiper-slide-active {
                    > div[data-role='container'] {
                        > h4 {
                            > p {
                                transition-delay: 0.2s;
                                transform: translateY(0);
                            }
                        }

                        > small {
                            > p {
                                transition-delay: 0.8s;
                                transform: translateY(0);
                            }
                        }
                    }
                }

                > aside {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;

                    > video {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    &::after {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        content: ' ';
                    }
                }
            }
        }
    }

    > div.controller {
        position: absolute;
        bottom: var(--section-gap);
        z-index: 1;
        left: calc(50vw - var(--container-small-width) / 2);
        display: flex;
        align-items: center;
        gap: 8px;

        > button {
            flex-shrink: 0;
            background: var(--color-white-10);
            border: 1px solid var(--color-white-20);
        }

        > progress {
            flex-shrink: 0;
            margin: 0px 16px;
            width: 80px;
            height: 1px;
            appearance: none;

            &::-webkit-progress-bar {
                background: var(--color-white-20);
            }

            &::-webkit-progress-value {
                background: var(--color-white);
            }
        }

        > label {
            color: var(--color-white-50);
            > span.swiper-pagination-current {
                color: var(--color-white);
            }
        }
    }
}

section.platform {
    margin: var(--section-margin) 0;

    ul.packages {
        display: flex;
        flex-direction: column;
        gap: 80px;
        list-style: none;
        padding-top: var(--section-gap);

        > li {
            width: 100%;
            height: 400px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(50%);
            transition: all 1.2s cubic-bezier(0.34, 0.07, 0.095, 0.995);
            gap: 80px;

            > div {
                flex-grow: 1;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 24px;
                order: 5;

                > h4 {
                    flex-shrink: 0;
                    width: 205px;
                    font: var(--font-display-lg);
                }

                > p {
                    flex-shrink: 1;
                    flex-grow: 1;
                    padding: 20px 0px;

                    > b {
                        display: block;
                        font: var(--font-head-sm);
                        color: var(--color-text-secondary);
                    }

                    > small {
                        display: block;
                        padding-top: 24px;
                        font: var(--font-paragraph-xlg);
                        color: var(--color-text-tertiary);
                    }

                    > a {
                        margin-top: 16px;
                    }
                }
            }

            > aside {
                flex-shrink: 0;
                width: 300px;
                height: 300px;
                line-height: 300px;

                > i[data-role='icons'] {
                    --icon-size: 1lh;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            &.animate {
                transition-delay: 0.2s;
                opacity: 1;
                transform: translateY(0);
            }

            &:nth-child(even) {
                > aside {
                    order: 0;
                }
            }

            &:nth-child(odd) {
                > aside {
                    order: 10;
                }
            }
        }
    }
}

section.contents {
    background: var(--color-bg-secondary);
    padding: var(--section-margin) 0;

    > div[data-role='widget'] {
        margin-top: var(--section-gap);
    }
}

section.partners {
    padding: var(--section-margin) 0;

    > div[data-role='container'] {
        > h3 {
            > p {
                font: var(--font-head-lg);
            }
        }

        > div[data-role='widget'] {
            margin-top: 64px;
        }
    }
}

@container content (width < 1024px) {
    section.landing {
        height: auto;

        > div[data-role='container'] {
            flex-direction: column;
            align-items: stretch;

            padding: 80px 0;

            > div {
                order: 2;
                flex-shrink: 0;
                overflow: hidden;
            }

            > aside {
                aspect-ratio: 100/70;
                max-height: 460px;
                width: 100%;
                height: auto;
                order: 1;

                > div {
                    width: calc(100vw - 40px);
                    max-width: 540px;
                    height: auto;
                    left: 50%;
                    transform: translateX(-50%);

                    > video {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    section.carousel {
        height: 640px;
    }

    section.platform {
        margin: var(--section-margin) 0;

        ul.packages {
            > li {
                gap: 20px;

                > div {
                    > h4 {
                        width: 160px;
                    }

                    > p {
                        padding: 10px 0px;
                    }
                }

                > aside {
                    width: 240px;
                    height: 240px;
                    line-height: 240px;
                }
            }
        }
    }
}

@container content (width < 768px) {
    section.landing {
        > div[data-role='container'] {
            padding: 40px 0;
        }
    }

    section.platform {
        margin: var(--section-margin) 0;

        ul.packages {
            > li {
                flex-wrap: wrap;
                gap: 20px;
                height: auto;

                > div {
                    order: 20;
                    flex-direction: column;
                    gap: 0;

                    > h4 {
                        width: 100%;
                    }

                    > p {
                        padding: 0px;
                        width: 100%;
                    }
                }

                > aside {
                    flex-basis: 100%;
                    order: 10;

                    > i[data-role='icons'] {
                        --icon-size: 240px;
                        width: 240px;
                        height: 240px;
                        margin: 0 auto;
                    }
                }
            }
        }
    }
}