/* Page transition: full-viewport fade-to-black between pages.
   A black ::before overlay sits on top of everything (above navbar + menu).
   On every page load it animates from opaque → transparent (revealing the
   page). When body.is-leaving is set, the animation switches to
   transparent → opaque (covering the page) before navigation. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    animation: gp-overlay-out 0.5s ease both;
}
@keyframes gp-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
body.is-leaving {
    pointer-events: none;
}
body.is-leaving::before {
    animation: gp-overlay-in 0.5s ease forwards;
}
@keyframes gp-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    body.is-leaving::before {
        animation: none;
        opacity: 0;
    }
}

/* Navbar container */
.navbar {
    display: flex;
    position: fixed;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding: 1.5rem;
    color: white;
    z-index: 1000;
}

.navbar .logo {
    width: auto;
    height: auto;
    mix-blend-mode: difference;
}

/* Hamburger icon */
.hamburger {
    cursor: pointer;
    display: block;
    width: 30px;
    height: 22px;
    position: relative;
    z-index: 200;
}

.hamburger span {
    background: white;
    position: absolute;
    height: 3px;
    width: 100%;
    left: 0;
    transition: top 0.25s ease 0.25s, transform 0.25s ease, opacity 0.2s ease, background 0.25s ease;
}
.hamburger:hover span {
    background: var(--accent-color);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

/* Hamburger morphs into an X when menu is open */
.hamburger.is-open span {
    background: white;
    transition: top 0.25s ease, transform 0.25s ease 0.25s, opacity 0.2s ease, background 0.25s ease;
}
.hamburger.is-open span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
}

/* Menu styling */
.menu {
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100vw;
    /* 100vh on mobile Safari measures to the LARGEST viewport (with the
       URL bar collapsed) — when the bar is showing, the menu falls
       short and reveals page content below. 100dvh tracks the dynamic
       viewport and always covers the visible area. 100vh kept as the
       fallback for browsers that don't support dvh. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
        opacity 0.35s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
}

.menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.35s ease,
        transform 0.4s ease,
        visibility 0s linear 0s;
}

.menu-list {
    /* Original layout: distribute items inside a fixed slice of the
       viewport with space-evenly, then let the parent .menu center
       this single child vertically. */
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    /* Smaller than before so 6 entries comfortably fit in the 60% slice. */
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

/* Stagger the menu items in on open */
.menu .menu-list > a,
.menu .menu-list > .social-icons {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu.show .menu-list > a,
.menu.show .menu-list > .social-icons {
    opacity: 1;
    transform: translateY(0);
}

.menu.show .menu-list > a:nth-child(1) { transition-delay: 0.10s; }
.menu.show .menu-list > a:nth-child(2) { transition-delay: 0.15s; }
.menu.show .menu-list > a:nth-child(3) { transition-delay: 0.20s; }
.menu.show .menu-list > a:nth-child(4) { transition-delay: 0.25s; }
.menu.show .menu-list > a:nth-child(5) { transition-delay: 0.30s; }
.menu.show .menu-list > a:nth-child(6) { transition-delay: 0.35s; }
.menu.show .menu-list > .social-icons { transition-delay: 0.40s; }

.no-scroll {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

.menu .social-icons {
    /* Vertical breathing room separating the social row from the last
       nav link above it. Bump higher to push the social row further
       toward the bottom of the menu, lower to bring it closer to Contact. */
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    /* Horizontal gap between each social icon. */
    gap: 0.65rem;
}

.menu .social-icons a {
    font-size: 1.5rem;
    padding: 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .menu,
    .menu.show,
    .menu .menu-list > a,
    .menu .menu-list > .social-icons,
    .hamburger span,
    .hamburger.is-open span {
        transition: none !important;
    }
}

@media only screen and (min-width: 1024px) {
    .navbar {
        padding: 2rem 4rem;
    }
}