/*  ================
    ================  
         shared
    ================
    ================ */



/* ============================================ */


.hello {
    margin-top: 15rem;
    margin-left: calc(25% + 0.5rem);
}


.hello p {
    max-width: 60ch;
}

.hello span {
    margin-top: 3rem;
    right: 2rem;
    text-align: right;
}

@media (max-width: 768px) {
    #extract-me main .hello {
        padding: 1rem;
    }

    #selected-works{
        padding-inline: 1rem;
    }

    .hello {
        margin: 0;
        margin-block: 4rem;
        margin-top: 15rem;
    }

    .hello span {
        margin-block: 2rem;
        text-justify: none;
    }
}


main {
    padding: 0rem;
}

@media (max-width: 768px) {
    main {
        padding: 0rem;
    }
}

/* ============================================ */


/*  ================
    ================ 
        profile 
    ================
    ================ */

#hero {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.hero-column{
    width: 25%;
    text-align: left;
    justify-content: start; 
    display: flex;
    flex-direction: row;
    padding-top: calc(50svh + 1rem);
    top: 0px;
}
.hero-column:nth-child(4) a{
    margin-left: 0.33rem;
}

.hero-column p{
    font-size: 1rem;
}

#red-circle{
    height: 0.5em;
    width: 0.5em;
    display: inline-block;
    border-radius: 100%;
    background-color: var(--special-color);
    animation: blink 2s var(--transition-timing) infinite;
}

.hero-link{
    font-family: inherit;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-decoration: none;
}

@media (max-width: 768px) {
    #hero{
        flex-wrap: wrap;
        height: 75vh; 
        margin-bottom: 25vh;
        padding-top: 40vh; 
    }
    .hero-column{
        width: calc(50% - 0.5rem);;
        padding: 0;
        box-sizing: border-box;
    }
    .hero-column:nth-child(2), .hero-column:nth-child(4) {
        display: flex;
        width: calc(50% + 0.5rem);
        flex-direction: row;
    }
    .hero-column:nth-child(2) *, .hero-column:nth-child(4) *{
        text-align: right;
        width: 100%;
    }
    .hero-column:nth-child(4) a{
        margin-left: 0.3rem;
        flex-direction: row;
        padding: 0rem !important; 
        width: auto;
    }
}


/* container holding spotlight items */
section.list {
    display: flex;
    flex-direction: column;
    padding-block: 2rem;
}

.list {
    padding: 0;
    margin: 0;
}

.list li {
    list-style: none;
    margin-block: 30svh;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.project-wrapper {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 130svh;
}

.spotlight-gallery-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 95svh;
    width: 75%;
    scrollbar-width: none;
    scroll-behavior: smooth; /* smooth scrolling */
}

.spotlight-gallery-container::-webkit-scrollbar {
    display: none;
}

.spotlight-gallery {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    gap: 2px; /* space between images */
}

.spotlight-gallery img {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spotlight-gallery-container .spotlight-id {
    z-index: 10000;
}

.spotlight-gallery-container img {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    margin-right: 2px;
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.spotlight-gallery-container img.lazy {
    opacity: 0.5; /* slightly visible while loading */
}
.spotlight-gallery-container img.lazyloaded {
    opacity: 1;
}


.spotlight-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 25%;
}

.spotlight-xtr-info {
    /* position: absolute;
    top: 0;
    left: 0; */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.spotlight-xtr-info a {
    padding: 0;
    margin: 0;
}

.spotlight-xtr-info a:hover {
    background-color: transparent;
}

.spotlight-xtr-info a p:hover {
    color: var(--special-color);
}


.spotlight-description {
    width: calc(200% - 1rem);
    margin: 1rem 0 1rem 1rem;
    position: relative;
}

.spotlight-brand,
.spotlight-title {
    margin: 1rem 0 1rem 1rem;
    padding: 0;
    flex: 1;
}

.spotlight-brand {
    text-align: left;
}

.spotlight-title {
    text-align: right;
}

.spotlight-gallery-image {
    display: block;
    opacity: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.spotlight-id {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: var(--text-color);
}


@media (max-width: 768px) {
    .project-wrapper {
        flex-direction: column;
    }

    .spotlight-xtr-info {
        position: static;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
    }

    .spotlight-brand {
        text-align: left;
        margin-bottom: 1rem;
    }
    .spotlight-title {
        justify-content: flex-end;
        margin-right: 1rem;
    }
    .spotlight-gallery-container {
        flex: none;
        width: 100%;
        height: 100svh;
    }

    .spotlight-info {
        margin-top: 1rem;
        width: auto;
    }

    .spotlight-description {
        width: auto;
        margin: 1rem;
        text-justify: distribute;
    }

    .spotlight-gallery-image{
        object-fit: contain;
        object-position: center;
    }

    .list li {
        margin-block: 15svh;
    }
}


.spotlight-vertical .xtr-info a {
    margin: 0rem;
    padding-inline: 0rem;
    background: none;
}

.spotlight-vertical .xtr-info a:hover {
    color: var(--special-color);
}

.spotlight-vertical * {
    font-size: 1rem;
}

.spotlight-vertical {
    margin-block: 20svh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 200svh;
    width: 100%;
    position: relative;
    /* gap: 1rem; */
}


.spotlight-vertical .xtr-info {
    width: 100%;
    padding-inline: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.spotlight-vertical .gallery {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    position: relative;
}

.spotlight-vertical .gallery::before,
.spotlight-vertical .gallery::after {
    position: absolute;
    inset: 0;
    width: 50%;
    content: '';
    display: inline-block;
    pointer-events: all;
    z-index: 1; 
}

.spotlight-vertical .gallery::before {
    right: auto;
    cursor: var(--left-cursor); 
}

.spotlight-vertical .gallery::after {
    left: auto;
    cursor: var(--right-cursor); 
}

.spotlight-vertical img.spotlight-gallery-image {
    /* margin-right: -2rem; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* hide all images by default */
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.spotlight-vertical img.spotlight-gallery-image.active {
    display: block; /* show only the active image */
}

/* lazy loading states for vertical gallery */
.spotlight-vertical img.spotlight-gallery-image.lazy {
    opacity: 0.5; /* slightly visible while loading */
}

.spotlight-vertical img.spotlight-gallery-image.lazyloaded {
    opacity: 1;
}

.spotlight-vertical .gallery-nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    z-index: 2;
}

.spotlight-vertical .project-id {
    color: var(--text-color);
}

.spotlight-vertical .vertical-image-counter {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .spotlight-vertical .gallery {
        width: 100%;
    }

    .spotlight-vertical .xtr-info {
        width: 50%;
        height: 100%;
        justify-content: space-between;
        margin-bottom: 1rem;
        /* padding-inline: 1rem; */
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .spotlight-vertical .xtr-info {
        margin-bottom: 1rem;
        padding-inline: 1rem;
        background: none;
        align-items: flex-end;
    }

    .spotlight-vertical .xtr-info a{
        font-size: 0.8rem;
        padding-top: 0;
    }
    

    .spotlight-vertical img.spotlight-gallery-image {
        margin-right: 0rem;
        width: 100%;

    }

    .spotlight-vertical .project-id {
        color: var(--text-color);
        margin-right: 1rem;
    }
}




.spotlight-giant {
    /* margin-left: -2rem; */
    /* margin-right: -2rem; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 195svh;
    width: 100%;
    background-color: none;
    /* padding: 4rem; */
    overflow: hidden; 
}

.spotlight-giant .image-counter {
    /* TODO: fix lol */
    display: none;
}

.spotlight-giant-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spotlight-giant-gallery .spotlight-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Hide all images by default */
}

.spotlight-giant-gallery .spotlight-gallery-image.active {
    display: block; /* Show only the active image */
}


.spotlight-giant-info {
    pointer-events: none;
    padding-left: calc(1rem + 8px);
    padding-right: 1rem;
    /* margin-right: 1.5rem; */
    position: relative;
    z-index: 1;
    width: 50%;
    left: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;   
}

.spotlight-giant-id{
    color: var(--text-color);
    margin-left: -3rem;
    z-index: 3000;
}



.spotlight-giant-xtr-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.spotlight-giant-xtr-info a {
    pointer-events: all;
    background: none;
    padding-left: 0rem;
    margin: 0rem;
}

.spotlight-giant-xtr-info a:hover {
    color: var(--special-color);
}

.spotlight-giant-brand {
    text-align: left;
    font-size: 1rem;
}

.spotlight-giant-title {
    pointer-events: all;
    padding-block: 1rem;
    text-align: right;
    font-size: 1rem;
}

.spotlight-giant-description {
    pointer-events: all;
    font-size: 1rem;
    width: 100%;
}


@media (max-width: 768px) {

    .spotlight-giant-info {
        /* width: 75%; */
        padding: 1rem;
        bottom: 0rem;
        left: 0rem;
        width: auto;
    }

    .spotlight-giant-id {
        left: 1rem;
    }

    .spotlight-giant {
        margin-left: 0rem;
        margin-right: 0rem;
        width: 100%;
    }
    
    .spotlight-giant-description {
        font-size: 0.8rem;
    }
}

#theatre-welcome{
    padding-inline: 1rem;
    margin-top: 75vh;
    width: 100%;
}

#theatre-welcome h1 a{
    /* font-size: 2rem; */
    text-decoration: none;
}

#theatre-welcome h1 a:hover{
    text-decoration: solid 1em inherit;
}

#theatre-welcome a{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: min-content;
    color: var(--special-color);
    font-size: inherit;
}

@media (max-width: 768px) {
    #theatre-welcome h1{
        font-size: 4rem;
    }

    #theatre-welcome a{

    }
}



/* ============================================ */



/*  ================
    ================ 
        index 
    ================
    ================ */

.other-page{
    margin-top: 45svh;
}
.other-page main{
    padding: 0rem !important;
}


@media (max-width: 768px) {
    .other-page main .hello{
        margin: 1rem !important;
    }
}

.project-info {
    padding: 2rem;
    margin: 0;
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
}

.project-info-columns {
    display: flex;
    flex-direction: row;
    margin-block: 5rem;
}
.project-info-columns div {
    width: 50%;
}


@media (max-width: 768px) {
    .project-info {
    padding: 1rem;
    }
}

.project-info .id h1 {
    font-style: normal;
    position: relative;
    text-align: end;
}

.project-info h3,
.project-info h2 {
    max-width: 40ch;
    font-size: 1.5rem;
    letter-spacing: -2.5%;
    margin-block: 5rem;
    font-variation-settings: "slnt" 0, "wght" 450;
}

.project-info * p {
    /* margin-inline: 2rem; */
    max-width: 60ch;
}

@media (max-width: 768px) {

    .project-info .id h1 {
        font-size: 7rem;
    }

    .project-info * p {
        text-align: left;
    }
}

.images {
    display: block;
    overflow-x: hidden;
    padding: 1rem;
    margin-inline: -4rem;
    justify-content: center;
    align-items: center;
}

.images img {
    width: 100%;
    height: auto;
    margin-bottom: 1px;
}

.solo-project-images img{
    width: 100%;
    height: auto;
    margin-bottom: 1px;
}



.projects-navigator {
    margin-top: 50svh;
    height: 50svh;
    display: flex;
    margin-inline: 3rem; 
}

.projects-navigator #next-project, .projects-navigator #prev-project {
    font-family: "cofo-sans-variable", Helvetica, sans-serif;
    font-size: 2rem;
    display: flex;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s var(--transition-timing);
    height: 100%;
    width: 50%;
    align-items: center;
}

@media (max-width: 768px) {
    .projects-navigator {
        margin-inline: 1rem; 
    }
    .projects-navigator #next-project{
        justify-content: flex-end;
    }
}

#next-project:hover *, #prev-project:hover *{
    color: var(--special-color);
    text-decoration: underline var(--special-color) 0.2rem;
}



/* ============================================ */

/*  ================
    ================ 
        ARCHIVE
    ================
    ================ */

.archive {
    margin: 1rem;
}


.archive-headers {
    display: flex;
    gap: 1rem;
    margin-top: 4rem;
    padding-bottom: 1rem;
}

.sort-indicator {
    color: inherit;
    font-size: 0.75rem;
    vertical-align: baseline;
    bottom: 1px;
    position: relative;
}

.archive-filters {
    width: 100%;
    border-bottom: 0.1rem solid var(--text-color);
    transition: all 0.2s var(--transition-timing);
    font-variation-settings: "slnt" 0, "wght" 500;
}

.archive-filters * {
    padding-bottom: 0.2rem !important;
}


#when {
    font-style: normal;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}


.archive-item {
    gap: 1rem;
    display: flex;
    width: 100%;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--transition-timing);
}

.archive-item.expanded {
    height: 110vh;
    background-image: none;
    width: calc(100% + 3rem);
    margin-inline: -2rem;
}

.archive-item.expanded .item-id {
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .archive-item {
        margin-bottom: 0;
        border: none;
    }

    .archive-item.expanded {
        margin-inline: -1rem;
    }
}

.archive-item:hover {
    border-bottom: 2px solid;
    margin-bottom: -1px;
}

.item-info {
    box-sizing: border-box; 
    padding-inline: 1rem;
    padding-block: 0.5rem;
    color: inherit;
    width: 100%;
}



.archive-item a {
    color: var(--text-color);
    width: 100%;
    background-color: transparent;
    padding-inline: 1rem;
    padding-block: 0.5rem;
}
.archive-item > a:nth-child(2) > div:nth-child(1){
    padding: 0;
}
.archive-item a:hover {
    color: var(--special-color);
}


.item-id {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    font-style: normal;
    color: inherit;
    width: 100%;
    display: flex;
}

.id-number {
    color: inherit;
    font-family: inherit;
}

.item-id .id-letter {
    color: inherit;
    font-family: inherit;
}

.image-container {
    display: none;
    -webkit-overflow-scrolling: touch;
}

.archive-item.expanded .image-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 3rem 1rem 1rem 1rem;
    scrollbar-width: none; 
    pointer-events: touch;
    width: 100%;
    transition: all 0.5s var(--transition-timing);
}

@media (max-width: 768px) {
    .archive-item.expanded .image-container {
        padding: 4rem 1rem 1rem 1rem;
    }
    .archive-item .item-info#when, #filter-when{
        /* text-align: right; */
    }
    .archive-item *{
        font-size: 1rem;
    }
}


.archive-item.expanded .image-container::-webkit-scrollbar {
    display: none;
}

.image-container img {
    pointer-events: all;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
    opacity: 0;
    scrollbar-width: none; /* Firefox */
    margin-right: 1px;
}


.image-container img.lazyloaded {
    opacity: 1;
}

.image-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


/* hide columns in mobile view */
@media (max-width: 768px) {
    .archive-headers #filter-what,
    .archive-headers button:nth-child(1), /* index button */
    .archive-item .item-info#what,
    .archive-item .item-info#id, 
    .archive-item .item-id {
        display: none;
    }
}


@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.blinking {
    animation: blink 0.1s var(--transition-timing);
}


.hashtag-container {
    margin-top: 6rem;
    padding: 0rem;
}

.hashtag-container h2 {
    border-bottom: 0.1rem solid var(--text-color);
    font-size: 1.5rem;
    letter-spacing: -2%;
}


#hashtag-reset:hover {
    background-color: var(--special-color);
}

.hashtag-pool {
    margin: 1rem;
    column-count: 4;
    font-weight: 200;
    font-style: normal;

}

@media (max-width: 768px) {
    .hashtag-pool {
        column-count: 2;
    }
}

.hashtag-pool {
    padding-block: 1rem;
    margin: 0;
}

.hashtag {
    /* font-size: 0.8rem; */
    padding: 0.35rem 1rem;
    height: 2rem;
    overflow: hidden;
    margin-bottom: 0.25rem;
    border: var(--border-def);
    background-color: var(--main-bg);
    color: var(--text-color);
    cursor: pointer;
}

@media (max-width: 768px) {
    .hashtag-pool {
        padding-block: 1rem;
    }
    
    .hashtag {
        padding: 0.5rem 1rem;
        height: auto;
    }
}

.hashtag-pool .hashtag:hover {
    font-style: normal;
    font-variation-settings: "slnt" 0, "wght" 600;
    background-color: var(--text-color);
    color: var(--main-bg);
}

.hashtag.selected {
    background-color: var(--text-color);
    color: var(--main-bg);
    letter-spacing: normal;
    font-variation-settings: "wght" 500;
}

.hashtag.selected:hover {
    font-variation-settings: "wght" 500;
    letter-spacing: normal;
    background-color: var(--text-color);
}

/* ============================================ */



/*  ================
    ================ 
          about 
    ================
    ================ */

.info {
    /* right: 3rem; */
    margin-left: calc(50% + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 15svh;
    max-width: 100%;
}

.info>div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.info p {
    width: 100%;
    max-width: 100%;
    padding-right: 1rem;
}

@media (max-width: 768px) {
    .info p {
        padding-right: 0rem;
    }
}

#contact-highlight{
    margin-block: 1rem;
}
#contact-highlight .contact-way{
    margin-left: 50%; 
    width: 100%;
}
#contact-highlight .contact-info{
    position: absolute; 
    right: 1rem; 
    left: auto;
}

@media (max-width: 768px) {
    .info {
        width: auto;
        margin: 1rem;
    }

    .info>div {
        width: 100%;
        text-justify: none;
    }
    #contact-highlight .contact-way{
        margin-left: 25%; 
    }

    #contact-highlight .contact-info{

    }
}

.extr-link {
    font-style: normal;
    padding-block: 0;
}

.links {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 0.25rem;
    
}

@media (max-width: 768px) {
    .links {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 0rem;
    }
}

#time {
    font-variant-numeric: tabular-nums;
}

/* ============================================ */



/*  ================
    ================ 
        theatre
    ================
    ================ */


.random-gallery {
    background-color: #000;
    height: 100svh;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    position: relative;
}

.project-section {
    height: 100svh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-section .project-image {
    justify-content: center;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-section .project-image::before,
.project-section .project-image::after {
    position: absolute;
    inset: 0;
    width: 50%;
    content: '';
    display: inline-block;
    pointer-events: all;
    z-index: 1; 
}

.project-section .project-image::before {
    right: auto;
    cursor: var(--left-cursor-white); 
}

.project-section .project-image::after {
    left: auto;
    cursor: var(--right-cursor-white); 
}

.project-section .project-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}


.project-section .text-columns {
    mix-blend-mode: exclusion;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: flex-end;
    padding: 1rem;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .text-columns {
        grid-template-columns: 1fr 1fr;
    }
    
}

.text-columns * {
    color: #fff;
    /* outline: 1px white solid; */
}

.text-columns > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

#gallery-info,
#gallery-counter-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: auto;
    font-variation-settings: "slnt" 0, "wght" 100;
}
#gallery-info {
    white-space: nowrap;
    align-items: flex-start;
    align-content: left;
    font-variation-settings: "slnt" 0, "wght" 400;
}
#gallery-info *{
    margin-bottom: 2px;
}

div#gallery-info a#brand{
    color: #fff; /* needed cuz otherwise weird display */
    font-family: "cofo-sans-variable", Helvetica, sans-serif;
    font-variation-settings: inherit;
    pointer-events: all;
    padding: 0;
}


#gallery-counter-container {
    font-family: "cofo-sans-variable", Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2rem;
    font-style: normal;
    position: relative;
    text-align: end;
    height: auto;
    /* line-height: 4rem; */
    padding: 0;
    margin: 0;
    font-size: 3rem;
    white-space: nowrap;
}

#gallery-counter-container *{
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    #gallery-counter-container {
        font-size: 3.5rem;
    }
}

/* curtain loader */
#theatre-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.curtain-half {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: var(--main-bg);
    transition: transform 1.2s var(--transition-timing);
    z-index: 10001;
    pointer-events: all;
}

.curtain-half.left {
    left: 0;
    transform: translateX(0);
}

.curtain-half.right {
    right: 0;
    transform: translateX(0);
}

.curtain-half.left.open {
    transform: translateX(-100%);
}

.curtain-half.right.open {
    transform: translateX(100%);
}

.loading-percentage {
    position: absolute;
    z-index: 10002;
    color: var(--text-color);
    font-family: "cofo-sans-variable", Helvetica, sans-serif;
    font-variation-settings: "slnt" 0, "wght" 400;
    font-size: 3rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05rem;
    opacity: 1;
    transition: opacity 0.5s var(--transition-timing);
}

.loading-percentage.hidden {
    opacity: 0;
}

.web-essays {
    margin-top: 30svh;
}