* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    cursor: none !important;

}

:root {
    --font_first: "Afacad Flux", sans-serif;
    --font_secnd: "Fjalla One", sans-serif;
    --font_thrd: "Oswald", sans-serif;
}



.circle {
    width: 80px;
    height: 80px;
    border: 1px dotted rgba(0, 0, 0, 0.937);
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    overflow: hidden;
    /* background-color: #ffffff6d; */
    display: none;
}





#main_container {
    position: relative;
    top: 0px;
    min-height: 100vh;
    max-height: 8090px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


#main_container .container {
    height: 960px;
    width: 100%;
    background-color: white;
    overflow: hidden;
}

#main_container .container .header {
    display: flex;
    justify-content: center;
    height: 50px;
    width: 100%;
    margin-bottom: 20px;
}

#main_container .container .header .smee {
    height: 100%;
    width: calc(100% / 3);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 30px;
}

#main_container .container .header .smee:not(.nav_opt) {
    justify-content: center;
}

#main_container .container .header .smee:nth-child(3) {
    justify-content: end;
}

#main_container .container .header .smee>li {
    position: relative;
    list-style-type: none;
    font-family: var(--font_first);
    font-weight: 600;
    margin: 0 20px;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    padding: 5px 5px;
}

#main_container .container .header .smee>li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1%;
    width: 0%;
    background-color: black;
    transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#main_container .container .header .smee>li:hover::after {
    width: 100%;
}



#main_container .container .header .LOGO {
    font-family: var(--font_secnd);
    font-weight: 800;
    font-size: 24px;
}


#main_container .container .header .LOGO {
    letter-spacing: 2px;
}

#main_container .container .body {
    height: 690px;
    width: 100%;
}

#main_container .container .body .boxes {
    height: 40%;
    width: 100%;
    display: flex;
    justify-content: center;
}

#main_container .container .body .boxes:nth-child(1) {
    height: 75%;
}


#main_container .container .body .boxes .imgs {
    position: relative;
    top: 0;
    height: 100%;
    width: calc(100%/3)-10%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    margin: 0 10px;
    overflow: hidden;
}

#main_container .container .body .boxes .imgs:nth-child(1)::after {
    content: "embrance bold elegance with gauchere's daring edge";
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    padding-top: 50px;
    background-color: #fff;
    text-transform: uppercase;
    font-family: var(--font_thrd);
    z-index: 3;
}

#main_container .container .body .boxes>.imgs:nth-child(2) {
    justify-content: center;
}

#main_container .container .body .boxes>.imgs:nth-child(3) {
    justify-content: right;

}

#main_container .container .body .boxes .imgs:nth-child(3)::after {
    content: "embrance bold elegance with gauchere's daring edge";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding-bottom: 50px;
    background-color: #fff;
    text-transform: uppercase;
    text-align: right;
    font-family: var(--font_thrd);
    z-index: 3;
}

#main_container .container .body .top .imgs>img {
    position: relative;
    top: 0;
    height: 100%;
    width: 460px;
    object-fit: cover;
    object-position: top;
    opacity: 0 !important;
}

canvas {
    position: absolute !important;
    top: 10px !important;
    object-fit: cover !important;
    height: 100% !important;
}

















#main_container .container .body .bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    padding: 0 40px;
    z-index: 3;
}



#main_container .container .body .bottom .maintxt {
    position: relative;
    top: 80px;
    height: 350px;
    width: 100%;
    text-align: center;
    font-family: var(--font_secnd);
    text-transform: capitalize;
    object-fit: contain;
    font-weight: 900;
    letter-spacing: -5px;
    font-size: 310px;
    background-position: center;
    background-attachment: scroll;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}





.txt.maintxt {
    width: 100%;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#webgl-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

#main_container .container .body .bottom>p {
    position: absolute;
    top: -70px;
    right: 50px;
    font-family: var(--font_first);
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
}




#main_container .container .body .bottom>p i {
    transform: rotate(-45deg);
    margin-left: 10px;
}


#main_container .container .body .bottom .subtxt {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font_thrd);
    padding: 0 10px;
}


/* --------------------------------------------------------------------------------------- */









.container_scnd {
    position: relative;
    top: 0;
    height: 740px;
    width: 100%;
    background: white;
    display: flex;
    overflow: hidden;
}

.container_scnd::before {
    content: '20';
    position: absolute;
    top: -50px;
    left: 5%;
    font-size: 400px;
    font-family: var(--font_secnd);
    font-weight: 800;
    color: #dddddd71;
    user-select: none;
}

.container_scnd::after {
    content: '24';
    position: absolute;
    bottom: -160px;
    right: 10%;
    font-size: 400px;
    font-family: var(--font_secnd);
    font-weight: 800;
    color: #dddddd71;
    user-select: none;
    z-index: 2;
}

.container_scnd .head_tw {
    font-family: var(--font_secnd);
    font-size: 70px;
}

.container_scnd:not(.head_tw) {
    justify-content: center;
}

.container_scnd h1 {
    position: absolute;
    top: 100px;
    left: 30px;
    font-size: 40px;
    justify-self: flex-start;
    cursor: grab;
    user-select: none;
}

.head_tw {
    font-family: var(--font_secnd);
    font-size: 70px;
}

.container_scnd h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: black;
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.container_scnd h1:hover::after {
    width: 100%;
}


.container_scnd .list_cont {
    position: absolute;
    top: 220px;
    height: 510px;
    width: 95%;
    display: flex;
    overflow: hidden;
}

.container_scnd .list_cont .listitem {
    position: relative;
    height: 100%;
    width: calc(100% / 3);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
    overflow: hidden;
    z-index: 3;
}

.container_scnd .list_cont .listitem::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    height: 150px;
    width: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: luminosity;
    background-color: #dddddd62;
}

.container_scnd .list_cont .listitem:nth-child(1)::after {
    background-image: url(img/jacket-removebg-preview.png);
    object-fit: contain;
}

.container_scnd .list_cont .listitem:nth-child(2)::after {
    object-fit: contain;
    background-image: url(img/topjacket-removebg-preview.png);
    height: 150px;
    width: 140px;
    margin-left: 30px;
    transform: scale(1.3);
}

.container_scnd .list_cont .listitem:nth-child(3)::after {
    background-image: url(img/pant-removebg-preview.png);
    object-fit: contain;
    height: 150px;
    width: 140px;
    transform: scale(1.3);
}


.container_scnd .list_cont .listitem img {
    height: 85%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    border-radius: 5px;
}

.container_scnd .list_cont .listitem p {
    font-family: var(--font_thrd);
    align-self: flex-start;
    margin-left: 30px;
}



/* --------------------------------------------------------------------------------------- */


.container_thrd {
    position: relative;
    top: 0;
    height: 1200px;
    width: 100%;
    background-color: #FFF;
}


.container_thrd h1 {
    position: absolute;
    top: 80px;
    left: 30px;
    cursor: grab;
    user-select: none;
    z-index: 2;
}

.container_thrd h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: black;
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.container_thrd h1:hover::after {
    width: 100%;
}



.container_thrd .display_img {
    position: relative;
    top: 170px;
    left: 30px;
    height: 1060px;
    width: 95%;
}

.container_thrd .display_img::before {
    content: 'AUTHENTICATION';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(var(--auth-ty, 0px)) scale(var(--auth-scale, 1));
    font-size: 220px;
    z-index: 2;
    font-family: var(--font_first);
    font-weight: 800;
    letter-spacing: -10px;
    color: #dddddd71;
    opacity: var(--auth-opacity, 1);
    filter: blur(var(--auth-blur, 0px));
    transition: none;
}

.container_thrd .display_img::after {
    content: '38';
    position: absolute;
    top: -7rem;
    right: 5rem;
    font-size: 500px;
    z-index: 1;
    font-family: var(--font_first);
    font-weight: 800;
    color: #dddddd71;

}


.container_thrd .display_img .dis_o {
    position: absolute;
    top: 8rem;
    left: 5rem;
    height: 500px;
    width: 300px;
    background: url(img/about-1.jpg);
    object-fit: cover;
    background-size: cover;
    z-index: 3;
    filter: sepia();
    mix-blend-mode: darken;
}

.container_thrd .display_img .dis_o1 {
    position: absolute;
    top: 4rem;
    left: 19rem;
    background: url(img/about-3.jpg);
    height: 450px;
    width: 300px;
    background-size: cover;
    z-index: 2;
    filter: sepia();
    mix-blend-mode: luminosity;
}


.container_thrd .display_img .dis_x {
    position: absolute;
    bottom: 1rem;
    right: 20rem;
    height: 450px;
    width: 300px;
    background: url(img/imgg.jpg);
    object-fit: cover;
    background-size: cover;
    z-index: 3;
    filter: sepia();

}

.container_thrd .display_img .dis_x1 {
    position: absolute;
    bottom: 7rem;
    right: 6rem;
    height: 500px;
    width: 300px;
    background: url(img/imggg.jpg);
    object-fit: cover;
    background-size: cover;
    filter: sepia();
    z-index: 4;
    mix-blend-mode: luminosity;
}

.container_thrd .descx {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    height: auto;
    width: auto;
    font-family: var(--font_thrd);
    font-weight: 800;
    letter-spacing: 15px;
    padding: 20px 10px;
    z-index: 3;
    background: #ffffffc2;
}


.container_thrd .para {
    position: absolute;
    top: 20rem;
    right: 10rem;
    font-family: var(--font_first);
    width: 400px;
    font-weight: 600;
    z-index: 6;
}

.container_frth {
    position: relative;
    top: 0;
    left: 0;
    height: 1250px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
}

.container_frth h1 {
    position: absolute;
    top: 100px;
    left: 30px;
    cursor: grab;
    user-select: none;
    z-index: 2;
}

.container_frth .navs {
    position: absolute;
    top: 190px;
    left: 30px;
    height: 30px;
    width: 55%;
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    font-family: var(--font_secnd);
}

.container_frth .navs li {
    height: 100%;
    width: auto;
    padding: 6px 10px;
    border: 1px solid black;
    font-size: 15px;
    cursor: pointer;
}

.container_frth .navs .active {
    background-color: #000;
    color: #fff;
}

.container_frth .navs li:hover {
    background-color: #000;
    color: #fff;
}

.container_frth .boces {
    position: absolute;
    top: 240px;
    height: 1000px;
    width: 95%;
    overflow: hidden;
}

.container_frth .boces .listing {
    position: relative;
    height: 250px;
    width: 100%;
    border-top: 2px solid #999;
    padding: 15px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.container_frth .boces .listing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 0;
    width: 100%;
    transform: translateY(-50%);
    background-color: rgb(95, 92, 92);
    transition: 0.2s ease-in-out;
}

.container_frth .boces .listing:hover::after {
    height: 100%;
}

.container_frth .boces .listing:hover {
    color: white;
}


.container_frth .boces .listing h2 {
    font-family: var(--font_thrd);
    font-size: 30px;
    z-index: 4;
}

.container_frth .boces .listing h2,
.container_frth .boces .listing>p,
.container_frth .boces .listing>div {
    height: 100%;
    width: calc(100% / 3);
    overflow: hidden;
    z-index: 4;

}

.container_frth .boces .listing>p {
    font-family: var(--font_thrd);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 300;
    padding: 0 10px;
}

.container_frth .boces .listing>div img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center var(--parallax-pos, 0%);
    filter: grayscale(1);
}


.container_fifth {
    position: relative;
    top: 0;
    left: 0;
    height: 800px;
    width: 100%;
    background-color: #fff;
    text-align: center;
    font-family: var(--font_secnd);
    font-size: 200px;
    letter-spacing: 5px;
}

.container_fifth .subb_container {
    position: relative;
    height: 100%;
    width: 100%;
}

.container_fifth .subb_container h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.container_fifth .subb_container .imgcct {
    position: absolute;
    height: 400px;
    width: auto;
    filter: grayscale(1);
    mix-blend-mode: difference;
}

.container_fifth .subb_container .imgcct img {
    height: 100%;
    width: 100%;

}

.container_fifth .subb_container .img_c1 {
    position: absolute;
    top: 120px;
    left: 3.5%;
    height: 400px;
    width: auto;
}

.container_fifth .subb_container .img_c2 {
    position: absolute;
    top: 120px;
    right: 30%;
}

.container_fifth .subb_container .img_c3 {
    position: absolute;
    bottom: 120px;
    left: 26%;
}

.container_fifth .subb_container .img_c4 {
    position: absolute;
    bottom: 120px;
    right: 5%;
}


.container_sixx {
    position: relative;
    top: 0;
    left: 0;
    height: 750px;
    width: 100%;
    background-color: #fff;
}

.container_sixx h1 {
    position: absolute;
    top: 0;
    left: 30px;
    cursor: grab;
    user-select: none;
    z-index: 2;
}


.container_sixx .last_boc {
    position: absolute;
    top: 15%;
    left: 30px;
    height: 650px;
    width: 95%;
    display: flex;
    justify-self: unset;

}

.container_sixx .last_boc .img {
    position: relative;
    height: 100%;
    width: calc(100% / 2);
    overflow: hidden;
    object-fit: contain;
    margin: 0 20px;
    display: flex;
    justify-content: flex-end;
}

.container_sixx .last_boc .img img {
    height: 100%;
    object-fit: contain;
    filter: grayscale();
}

.container_sixx .last_boc .img:nth-child(1) img {
    width: 60%;
    transform: scale(1.8) translateY(80px) translateX(-80px);
}

.container_sixx .last_boc .img:nth-child(2) img {
    width: 60%;
    transform: scale(1.7) translateY(60px) translateX(-80px);
}

.container_sixx .last_boc .img .infoo {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 200px;
    width: 100%;
    background-color: #fff;
    padding: 10px 0px;
}

.container_sixx .last_boc .img .infoo h2 {
    font-family: var(--font_thrd);
    font-size: 30px;
}

.container_sixx .last_boc .img .infoo p {
    font-family: var(--font_first);
    font-weight: 200;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 2px;
}

.container_sixx .last_boc .img .infoo .inp_container {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container_sixx .last_boc .img .infoo .inp_container input {
    height: 100%;
    width: 270px;
    border: none;
    outline: none;
    font-family: var(--font_first);
    font-size: 15px;
    border: 2px solid #c9c9c9;
    padding-left: 10px;

}

.container_sixx .last_boc .img .infoo .inp_container p {
    border: 2px solid #c9c9c9;
    height: 100%;
    margin-top: -2px;
    width: 40px;
    cursor: pointer;
    text-align: center;
    padding: 5px 10px;

}


.container_sixx .last_boc .img .infoo .inp_container p i {
    transform: rotate(-45deg);
    font-size: 20px;
    color: #aaa9a9;
}


.container_svnth {
    position: relative;
    left: 30px;
    height: 150px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0;
}

.container_svnth .left {
    height: 100%;
    width: 35%;
    display: flex;
    align-items: center;
}

.container_svnth .left div {
    height: 70%;
    width: calc(100% / 3);
}

.container_svnth .left div li {
    list-style-type: none;
    font-size: 14px;
    margin: 9px 0;
    font-weight: 400;
    font-family: var(--font_first);
    cursor: pointer;
    width: 100px;
}

.container_svnth .left div li:hover {
    color: white;
}

.container_svnth .right {
    position: relative;
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: space-between;
}

.container_svnth .right .socialicons {
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.container_svnth .right .socialicons i {
    transform: scale(1.15);
    margin: 8px 0;
    cursor: pointer;
}


.container_svnth .right .imglib {
    width: calc(100% - 20%);
    overflow: hidden;
}

.container_svnth .right .imglib img {
    height: 100%;
    width: calc(100/3%);
    object-fit: contain;
    filter: grayscale(1);
    float: right;
    margin: 0 5px;
}

.container_svnth .right .imglib img:nth-child(1) {
    margin: 0 !important;
}












.last_container {
    position: relative;
    top: 0;
    left: 30px;
    height: 550px;
    width: 95%;
    overflow: hidden;
}

.last_container .subla {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.last_container .subla li {
    list-style-type: none;
    font-family: var(--font_thrd);
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    z-index: 3;
}



.last_container {
    height: 500px;
    font-size: 410px;
    text-align: center;
    font-family: var(--font_secnd);
    pointer-events: none;
    user-select: none;
}


#liquid-text-container-footer>svg {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    transform: scale(1.3);
}


#liquid-text-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Footer liquid text container styles */
#liquid-text-container-footer {
    width: 100%;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -10%;
    left: 0;
}

#liquid-text-svg-footer {
    width: 100%;
    height: 100%;
    display: block;
}

.mask-text-outer {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.mask-text-inner {
    display: inline-block;
    will-change: transform;
    white-space: pre;
}

/* Loading Screen Styles */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

#loading-screen.loaded {
    transform: translateY(-100%);
}

.loading-content {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    font-family: 'Fjalla One', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 2rem;
    letter-spacing: -2px;
}

.loading-progress-container {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-progress-bar {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto 1rem;
    position: relative;
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fff, #ccc);
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
}

.loading-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.loading-percentage {
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.loading-text {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* iOS Pointer Effect Styles */
#ios-pointer {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    mix-blend-mode: difference;
    backdrop-filter: blur(1px);
    will-change: transform, width, height, border-radius;
}

/* Enhanced hover effects for elements with iOS pointer */
.nav_opt li:hover,
.listing:hover,
.listitem:hover,
.navs li:hover,
.socialicons i:hover,
.subla li:hover {
    cursor: none;
}

/* Hide default cursor on interactive elements */
.nav_opt li,
.listing,
.listitem,
.navs li,
.socialicons i,
.subla li,
p,
h2,
input,
i,
.description,
.para,
.descx,
.head_tw_p {
    cursor: none;
}

/* Special effect for collection items */
.listing:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Enhanced pointer for images */
.imgcct .ios-pointer {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 60%, transparent 100%);
    width: 60px;
    height: 60px;
    filter: blur(0.5px);
}

/*
* GAUCHER - Advanced iOS-Style Pointer Styles
*/

/* 1. Hide the default system cursor */
body,
a,
button,
[role="button"] {
    cursor: none;
}

/* 2. Style the custom dot cursor */
#cursor-dot {
    position: fixed;
    top: -25px;
    /* Offset to center the dot */
    left: -25px;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    mix-blend-mode: exclusion;
    filter: blur(0.5px);
}

/* 3. Style the highlighter element */
#cursor-highlighter {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    /* Initial size */
    height: 40px;
    background-color: rgba(180, 180, 180, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    opacity: 0;
    will-change: width, height, transform, border-radius;

    /* This creates the cool iOS-style inverted background (NO BLUR) */
    -webkit-backdrop-filter: invert(1);
    backdrop-filter: invert(1);
}