/* disable interactions by default on layered pages */
.main-page,
.about-page,
.contact-page,
.projects-page,
.mobile-page {
    pointer-events: none;
}

.page-active {
    pointer-events: auto;
    z-index: 3;
}

.page-active header {
    position: relative;
    z-index: 2000;
}



/* optional: make sure the icon itself remains clickable */
.page-active .hamburger-icon {
    position: relative;
    z-index: 2001;
}




/* Top layer */
.main-page {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */

    background-image: radial-gradient(var(--second), var(--main));
    z-index: 2;
    mask-image: url('#maskMain');
    -webkit-mask-image: url('#maskMain');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    will-change: opacity;
    /* Performance hint */
    text-shadow: 0 0 2ex var(--fourth), 0 0 2px var(--fourth);
}





/*section tools */

.tools {
    grid-area: middle;
    display: flex;

    overflow: hidden;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.tools-right {
    flex: 3;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tools-left {
    flex: 2;
    /* max-width: 300px; */
    font-family: Inter;
    font-size: 1.3rem;
}

.tools-left>h3 {
    /* font-family: Inter;
    font-size: 1.3rem; */
    max-width: 300px;
    margin: auto;
}

.spiralText {
    position: relative;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    perspective: 900px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 400px;
    width: 100%;
    text-align: center;
    visibility: visible !important;
}


.spiralText li {
    position: absolute;
    top: 0;
    padding-top: 2.5rem;
    width: 100%;
    transform: translateY(-100%) translateX(100%);
    font-size: 10vh;
    font-family: "Kanit", sans-serif;
    font-weight: 950;
    font-size: 6rem;
    animation: var(--delay) spiral-staircase linear infinite;
}

@keyframes spiral-staircase {
    0% {
        transform: rotateY(10deg) translateY(300%) rotate(0deg);
    }

    100% {
        transform: rotateY(-280deg) translateY(-1000%) rotate(0deg);
    }
}




.page-active {
    pointer-events: auto;
    z-index: 3;
}