@charset "UTF-8";

/* =========================================
   1. GLOBAL & LOADING
   ========================================= */
html {
    background: black;
}

.loadfade {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    animation: fadeInAnimation ease 2s;
    animation-fill-mode: forwards;
    pointer-events: none;
}

@keyframes fadeInAnimation {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================
   2. LOGO REVEAL ANIMATION
   ========================================= */
.logo {
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 300;
    position: fixed;
    left: 5vw;
    top: 7vh;
    text-decoration: none;
    cursor: pointer;
    color: white;
    z-index: 30;
    mix-blend-mode: difference;
    line-height: 1;
}

.vis1 { letter-spacing: -.06em;}
.vis2 {
    position: absolute;
    margin-left: 57px;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate(-57px);
}

.hide {
    opacity: 0;
    transition: 0.5s;
    letter-spacing: -.04em;
    display: inline-block;
}

#hide4 { letter-spacing: .15em; }

.logo:hover .vis2 { transform: translate(0px, 0px); }
.logo:hover .hide { opacity: 1; }

.logo:hover #hide1 { transition-delay: 0s; }
.logo:hover #hide2 { transition-delay: .03s; }
.logo:hover #hide3 { transition-delay: .06s; }
.logo:hover #hide4 { transition-delay: .09s; }
.logo:hover #hide5 { transition-delay: .12s; }
.logo:hover #hide6 { transition-delay: .15s; }
.logo:hover #hide7 { transition-delay: .18s; }
.logo:hover #hide8 { transition-delay: .21s; }
.logo:hover #hide9 { transition-delay: .24s; }
.logo:hover #hide10 { transition-delay: .27s; }


/* =========================================
   3. HAMBURGER ICON
   ========================================= */
.menu_icon {
    background: none;
    border: none;
    position: fixed;
    display: inline-block;
    right: 5vw;
    top: 9vh;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 31;
    mix-blend-mode: difference;
}

.menu_top, .menu_bottom {
    position: absolute;
    width: 100%;
    height: 2.5px;
    background-color: white;
    right: 0;
    transition: all 0.3s ease-in-out;
}

.menu_top { top: 0; }
.menu_bottom { bottom: 0; }

.menu_icon.show .menu_top {
    top: 9px;
    transform: rotate(45deg);
}

.menu_icon.show .menu_bottom {
    bottom: 9px;
    transform: rotate(-45deg);
}


/* =========================================
   4. FULL SCREEN OVERLAY
   ========================================= */
.menu {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    background-color: white;
    z-index: 20;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    pointer-events: none;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   5. MENU LIST & LINKS
   ========================================= */
.menu_list {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.menu_list li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin-bottom: 2vh;
}

/* --- THE CRITICAL SAFARI FIX BLOCK --- */
.menu_list li a,
.menu_list li a:visited,
.menu_list li a:active {
    /* Visuals */
    text-decoration: none !important;
    color: black !important;
    font-size: 3vw; 
    line-height: 1.5;
    border-bottom: none !important;
    display: block; 
    
    /* INTERACTION FIXES */
    cursor: pointer;
    touch-action: manipulation; /* <--- THIS IS THE MAGIC LINE */
    
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none;
    user-select: none;
    
    /* Animation Lock */
    transition: opacity 0.2s ease;
}

/* Hover Lock (Mobile Only) */
@media (hover: none) {
    .menu_list li a:hover {
        font-weight: 300 !important;
        background: transparent !important;
    }
}

.menu_list li.show {
    opacity: 1;
    transform: translateY(0);
}

#list_1 { transition-delay: 0.2s; }
#list_2 { transition-delay: 0.4s; }
#list_3 { transition-delay: 0.6s; }
#list_4 { transition-delay: 0.8s; }
#list_5 { transition-delay: 1.0s; }
#list_6 { transition-delay: 1.2s; }
#list_7 { transition-delay: 1.4s; }


/* =========================================
   6. MOBILE RESPONSIVENESS
   ========================================= */
@media screen and (max-width: 900px) {
    .logo { font-size: 24px; top: 5vh; }
    
    .menu_list li a {
        font-size: 32px;
        display: block;
        padding: 5px 0;
    }
    
    .menu_icon { top: 6vh; }
}


/* =========================================
   7. MOBILE STABILITY FIX
   ========================================= */
@media (hover: none) {
    .menu_list li a,
    .menu_list li a:hover,
    .menu_list li a:active,
    .menu_list li a:visited {
        font-weight: 300 !important; 
        transform: none !important;
        transition: opacity 0.2s ease !important;
    }
}