/* ==========================================================
   THRESHOLD MAP
   A Crystal Temple
   ========================================================== */


/* ----------------------------------------------------------
   Make the threshold page wider than normal chambers
---------------------------------------------------------- */

main{

    width:min(1400px,96vw);

    margin:10px auto 60px;

}


/* ----------------------------------------------------------
   Threshold introduction
---------------------------------------------------------- */

.threshold{

    text-align:center;

    margin-bottom:60px;

}


.threshold-symbol{

    width:300px;

    margin:0 auto 30px;

}


.threshold-title{

    font-size:30px;

    font-weight:400;

    text-align:center;

}



.invitation{

    max-width:720px;

    margin:30px auto;

}


.invocation{

    text-align:center;

    margin-bottom:50px;

}


.invocation h2{

    margin-bottom:20px;

}


.small{

    font-size:12px;

}


/* ----------------------------------------------------------
   Temple Map
---------------------------------------------------------- */

.temple-map{

    position:relative;

    width:min(1100px,95vw);

    margin:60px auto;

}


.temple-image{

    width:100%;

    height:auto;

    display:block;

}


/* ----------------------------------------------------------
   Chamber Portals
---------------------------------------------------------- */

.temple-link{

    position:absolute;

    transform:translate(-50%,-50%);

    width:clamp(48px,8vw,90px);

    aspect-ratio:1;

    border-radius:50%;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        transform .45s ease,
        filter .45s ease,
        box-shadow .45s ease;

}


.temple-link:hover{

    transform:
    translate(-50%,-50%)
    scale(1.12);

    z-index:10;

    box-shadow:
    0 0 35px rgba(255,255,255,.75);

}


/* ----------------------------------------------------------
   Images & Video
---------------------------------------------------------- */

.temple-link img,
.temple-link video{

    width:100%;
    height:100%;
    max-width:none;
    aspect-ratio:1 / 1;
    object-fit:cover;
    display:block;
    border-radius:50%;

}

/* ----------------------------------------------------------
   Portal Locations
---------------------------------------------------------- */

.center{

    top:50%;

    left:49.8%;

}


.top{

    top:20%;

    left:49.6%;

}


.upper-right{

    top:35%;

    left:65.5%;

}


.lower-right{

    top:65%;

    left:65.5%;

}


.bottom{

    top:80.2%;

    left:49.75%;

}


.lower-left{

    top:65%;

    left:34%;

}


.upper-left{

    top:35%;

    left:34%;

}


/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width:768px){

    main{

        width:98vw;

        margin:25px auto 60px;

    }

    .temple-map{

        width:100%;

        margin:35px auto;

    }

    .temple-link{

        width:clamp(42px,11vw,70px);

    }

    .threshold-symbol{

        width:140px;

    }

}

/* reduce threshold page section spacing */

.threshold,
.invocation{

    margin:25px 0;

}

/* restore full temple map image */

.temple-map .temple-image {

    width:100% !important;

    max-width:none !important;

    height:auto !important;

    display:block;

}