.hero {
    background: transparent;
    container-type: inline-size;
    height: 100svh;
    left: 0;
    position: fixed;
    top: 0;
    transition: clip-path 1s 1s;
    width: 100vw;
    z-index: 1;
}

.hero.cliped {
    clip-path: polygon(0 0, 100% 0, 100% 12%, 0 12%);
    pointer-events: none;
}

.hero__section {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-top: 4.4cqi;
    position: absolute;
    transform: rotateZ(90deg);
    transform-origin: top left;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;

    --clip-path-2: polygon(0 52px, calc(100% - 46px) 8px, calc(100% - 42px) 100%, 0% 100%);
    --clip-path-3: polygon(0 52px, calc(100% - 38px) 18px, calc(100% - 37px) 100%, 0% 100%);
    --clip-path-4: polygon(0 52px, calc(100% - 31px) 26px, calc(100% - 30px) 100%, 0% 100%);
    --clip-path-5: polygon(0 52px, calc(100% - 23px) 37px, calc(100% - 23px) 100%, 0% 100%);
    --clip-path-6: polygon(0 52px, 99.8% 48px, 100% 100%, 0% 100%);
}

.hero__section:nth-of-type(2) {
    clip-path: var(--clip-path-2);
}

.hero__section:nth-of-type(3) {
    clip-path: var(--clip-path-3);
}

.hero__section:nth-of-type(4) {
    clip-path: var(--clip-path-4);
}

.hero__section:nth-of-type(5) {
    clip-path: var(--clip-path-5);
}

.hero__section:nth-of-type(6) {
    clip-path: var(--clip-path-6);
}

.hero__section.active {
    transform: rotateZ(0deg);
}

.hero.hidden .hero__section,
body:has(.subpage) .hero__section {
    transform: rotateZ(0deg);
    transition: transform 0s 0s;
}

.hero__section.completed {
    pointer-events: none;
    transform: rotateZ(0deg) scale(1);
}

.hero__section.no-transition {
    transition: none;
}

.hero__section--1::before {
    background-color: #f5f1ec;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.hero__bg {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.hero__content {
    align-content: center;
    container-type: inline-size;
    display: grid;
    gap: 3.125cqi;
    max-height: fit-content;
    place-items: center;
    position: relative;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    width: 100cqi;
}

.hero__content img {
    position: relative;
    width: 100cqi;
    z-index: 1;
}

.hero__section:nth-of-type(1) .hero__content {
    max-width: 1303px;
    width: 68cqi;
}

.hero__section:nth-of-type(2) .hero__content {
    max-width: 950px;
    width: 49.5cqi;
}

.hero__section:nth-of-type(3) .hero__content {
    max-width: 650px;
    width: 41cqi;
}

.hero__section:nth-of-type(4) .hero__content {
    max-width: 1200px;
    width: 62.5cqi;
}

.hero__section:nth-of-type(5) .hero__content {
    max-width: 742px;
    width: 38.7cqi;
}

.hero__section:nth-of-type(6) .hero__content {
    max-width: 919px;
    width: 74.7cqi;
}

.hero.hidden .hero__content,
body:has(.subpage) .hero__content {
    display: none;
}

.hero__clickButton {
    background: rgb(255, 255, 255, 0%);
    border: 1px solid rgb(255, 255, 255, 18%);
    border-radius: 9999em;
    display: inline-grid;
    margin-inline: auto;
    min-width: 100px;
    transition: background 0.3s;
    width: 9.27cqi;
}

.hero__clickButton:hover {
    background: rgb(255, 255, 255, 16%);
}

.hero__skip {
    bottom: 70px;
    color: white;
    cursor: pointer;
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    transition:
        padding-bottom 0.3s,
        opacity 0.3s,
        visibility 0.3s;
}

.hero__skip:hover {
    padding-bottom: 2px;
}

.hero:has(.hero__section:nth-of-type(1).completed) .hero__skipIcon--black {
    display: none;
}

.hero:not(:has(.hero__section:nth-of-type(1).completed)) .hero__skipIcon--white {
    display: none;
}

.hero.hidden .hero__skip,
.hero.cliped .hero__skip {
    display: none;
}

.hero:has(.hero__skip.skiped) {
    opacity: 1;
    visibility: visible;
}

.hero:has(.hero__skip.skiped) .hero__section {
    transition: transform 0s 0s;
}

.hero__progressIndicator {
    bottom: 30px;
    display: flex;
    gap: 10px;
    left: 50%;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1001;
}

.hero__progress {
    background: rgb(255, 255, 255, 30%);
    border-radius: 50%;
    height: 12px;
    transition: all 0.3s ease;
    width: 12px;
}

.hero__progress.active {
    background: white;
    transform: scale(1.2);
}

.hero__scrollHint {
    align-items: center;
    bottom: 40px;
    color: rgb(255, 255, 255, 80%);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 6px;
    justify-content: center;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
}

body:has(.hero.cliped) .hero__scrollHint,
.hero:has(.hero__skip.skiped) .hero__scrollHint {
    opacity: 0;
    visibility: hidden;
}

.hero__scrollHint--text {
    max-width: 104px;
}

.hero__scrollHint--white {
    display: none;
}

.hero:has(.hero__section:nth-of-type(1).completed) .hero__scrollHint--black {
    display: none;
}

.hero:has(.hero__section:nth-of-type(1).completed) .hero__scrollHint--white {
    display: inline;
}

.hero__scrollHint--icon {
    align-items: center;
    animation: bounce 2s infinite;
    display: flex;
    justify-content: center;
    margin-left: 20px;
}

.hero__scrollHint--icon img {
    height: 30px;
    max-width: 36px;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-7px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* SVG Animation */
.svg-container {
    position: absolute;
}

.svg-container svg {
    height: auto;
    width: 100%;
}

.svg-container--1 {
    bottom: 13.1cqi;
    left: 45.4cqi;
    max-width: 328px;
    width: 25.2cqi;
}

.svg-container--2 {
    bottom: -0.1cqi;
    right: 0;
    width: 99.5cqi;
}

body:has(.hero.animated) .svg-container--2 {
    display: none;
}

.svg-container--3 {
    transform: translate(-15%, -6%);
    width: 76.6cqi;
}

.svg-container--4 {
    width: 100%;
}

.svg-container--4-sp {
    display: none;
}

.svg-container--5 {
    bottom: -9.2cqi;
    width: 109.2cqi;
}

.svg-container--6 {
    bottom: -5.2cqi;
    right: -3.5cqi;
    width: 106.3cqi;
}

@media (max-width: 1100px) {
    .hero__section:nth-of-type(1) .hero__content,
    .hero__section:nth-of-type(2) .hero__content,
    .hero__section:nth-of-type(3) .hero__content,
    .hero__section:nth-of-type(5) .hero__content,
    .hero__section:nth-of-type(6) .hero__content {
        width: 80cqi;
    }

    .hero__section:nth-of-type(4) .hero__content {
        width: 91cqi;
    }
}

@media (max-width: 768px) {
    .hero.cliped {
        clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    }

    .hero__section {
        --clip-path-2: polygon(0 15px, calc(100% - 22px) 6px, calc(100% - 6px) 100%, 0% 100%);
        --clip-path-3: polygon(0 20px, calc(100% - 17px) 12px, calc(100% - 4px) 100%, 0% 100%);
        --clip-path-4: polygon(0 24px, calc(100% - 12px) 17px, calc(100% - 3px) 100%, 0% 100%);
        --clip-path-5: polygon(0 27px, calc(100% - 7px) 24px, calc(100% - 2px) 100%, 0% 100%);
        --clip-path-6: polygon(0 30px, 100% 30px, 100% 100%, 0% 100%);
    }

    .hero__content {
        gap: 24px;
        margin-inline: auto;
        max-width: 80.3%;
        width: 100%;
    }

    .hero__clickButton {
        min-width: auto;
        width: 80px;
    }

    .hero__skip {
        bottom: 64px;
        height: 28px;
        width: 78px;
    }

    .hero__skip img {
        width: 72px;
    }

    .hero__scrollHint {
        bottom: 40px;
        gap: 8px;
    }

    .hero__scrollHint--text {
        max-width: 80px;
    }

    .hero__scrollHint--icon img {
        height: 20px;
    }
}

@media (max-width: 640px) {
    .hero__scrollHint--text {
        max-width: 75px;
    }

    .hero__section:nth-of-type(1) .hero__content {
        width: 77.948cqi;
    }

    .svg-container--1 {
        bottom: 46.1cqi;
        left: 0;
        width: 61.2cqi;
    }

    .svg-container--2 {
        bottom: -5cqi;
        right: 0;
        width: 100.3cqi;
    }

    .svg-container--4 {
        left: -9cqi;
        top: -20cqi;
        width: 121.5cqi;
    }

    .hero__section:nth-of-type(4) .hero__content {
        display: block;
        width: 70.3cqi;
    }

    .svg-container--4-pc {
        display: none;
    }

    .svg-container--4-sp {
        display: block;
    }
}