@import 'variables.css?v=36';
@import 'home.css?v=36';
@import 'project.css?v=36';
@import 'about_me.css?v=36';
@import 'contact.css?v=36';

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    /* Every page is dark now, so the body matches and page transitions never
       flash a lighter colour underneath. */
    background-color: var(--homeBg);
    color: var(--fontColor);
}

.nav {
    position: fixed;
    padding: 0.8rem 0.4rem;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: var(--fontBody);

    a{
        all: unset;
        cursor: pointer;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 2rem;
        border: 1px solid var(--fontColor);
        border-radius: 5rem;
        backdrop-filter: blur(15px);
        
        .nav-logo {
            font-size: 1.4rem;
            font-weight: bold;
            color: var(--fontColor);
            white-space: nowrap;
            z-index: 1002;
        }
        
        /* Hamburger Button */
        .hamburger {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            gap: 0.5rem;
            z-index: 1004;
            
            span {
                width: 2rem;
                height: 0.20rem;
                background-color: var(--fontColor);
                border-radius: 0.125rem;
                transition: all 0.3s ease;
            }
            
           &.active span:nth-child(1) {
                transform: rotate(45deg) translate(0.55rem, 0.55rem);
            }

            &.active span:nth-child(2) {
                opacity: 0;
            }

            &.active span:nth-child(3) {
                transform: rotate(-45deg) translate(0.5rem, -0.5rem);
            }
        } 
    }
    
    .nav-menu {
        display: flex;
        flex-direction: column;
        text-align: center;
        left: -103%;
        position: fixed;
        top: -2%;
        width: 100%;
        gap: 1rem;
        list-style: none;
        background-color: var(--bG);
        transition: left 0.4s var(--ease-out);
        border: solid 2px var(--fontColor);
        border-radius: 1.5rem;
        z-index: 1003;
        
        &.active {
            left: 0;
        }
        
        li {
            a {
                text-decoration: none;
                color: var(--fontColor);
                font-weight: 500;
                transition: opacity 0.3s;
                display: block;
                padding: 1rem;
                cursor: pointer;
                
                &:hover {
                    opacity: 0.7;
                }

            }
        }
    }
    
}


/* White nav for dark pages (home hero, dark project sections) */
.nav.white-nav .nav-container {
    border-color: rgba(255, 255, 255, 0.5);
}
.nav.white-nav .nav-logo,
.nav.white-nav .nav-logo a,
.nav.white-nav .nav-menu a {
    color: var(--whiteColor);
}
.nav.white-nav .hamburger span {
    background-color: var(--whiteColor);
}

@media (min-width: 500px) {

     .nav.white-nav .nav-menu a {
        color: var(--whiteColor) !important;
    }
    .nav {
        padding: 1.5rem 2rem;
        max-width: 900px;
        margin: 0 auto;
        
        .nav-container {
            .nav-logo {
                font-size: 1.5rem;
            }
            
            .hamburger {
                display: none;
            }
       
            .nav-menu {
                position: static;
                width: auto;
                height: auto;
                flex-direction: row;
                background-color: transparent;
                backdrop-filter: none;
                border-bottom: none;
                padding: 0;
                gap: 2rem;
                border: none;
                
                li {
                    a {
                        padding: 0;
                    }
                }
            }
        }
    }
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    .page {
        transition: opacity 0.5s var(--ease-out);
        opacity: 1;
        width: 100%;
    }

    .hidden {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
    
    .fade-out {
        opacity: 0 !important;
        transition: opacity 0.35s var(--ease-out);
    }

    .fade-in {
        opacity: 0;
        animation: fadeInPage 0.6s var(--ease-out) forwards;

        h1, h2, h3{
            opacity: 0;
            animation: fadeUp 0.6s var(--ease-out) 0.15s both;
        }

        /* .hero-heart is excluded: those 16 layers carry inline translateZ
           for the icon's depth, and fadeUp would override it and flatten the
           stack for the length of the animation. */
        p, form, img:not(.hero-heart), .contact-info {
            opacity: 0;
            animation: fadeUp 0.7s var(--ease-out) 0.3s both;
        }
    }
    
    @keyframes fadeInPage {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .page,
        .fade-out {
            transition-duration: 0.01ms;
        }

        .fade-in,
        .fade-in h1, .fade-in h2, .fade-in h3,
        .fade-in p, .fade-in form, .fade-in img, .fade-in .contact-info {
            animation-duration: 0.01ms;
            animation-delay: 0ms;
        }
    }
    
    a{
        all: unset;
        cursor: pointer;
    }
}
/* ==========================================================================
   ICON RELAY — page transition
   Every page has one holographic icon, so the icons carry the hand-off: the
   outgoing one flies off, the incoming one flies in from the opposite side
   and settles with a small overshoot. The stage wrapper takes the flight so
   the icon's own idle float animation keeps running untouched.
   ========================================================================== */
.icon-stage {
    will-change: transform, opacity;
}

.icon-stage.icon-out-fwd  { animation: iconOutFwd  0.5s cubic-bezier(0.6, 0, 0.9, 0.35) forwards; }
.icon-stage.icon-out-back { animation: iconOutBack 0.5s cubic-bezier(0.6, 0, 0.9, 0.35) forwards; }
.icon-stage.icon-in-fwd   { animation: iconInFwd   0.8s cubic-bezier(0.3, 0.72, 0.38, 1) both; }
.icon-stage.icon-in-back  { animation: iconInBack  0.8s cubic-bezier(0.3, 0.72, 0.38, 1) both; }

@keyframes iconOutFwd {
    from { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    to   { transform: translateX(-46vw) scale(1.3) rotate(-26deg); opacity: 0; }
}

@keyframes iconOutBack {
    from { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    to   { transform: translateX(46vw) scale(1.3) rotate(26deg); opacity: 0; }
}

@keyframes iconInFwd {
    0%   { transform: translateX(46vw) scale(1.25) rotate(24deg); opacity: 0; }
    22%  { opacity: 1; }
    78%  { transform: translateX(-2.5%) scale(0.97) rotate(-4deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes iconInBack {
    0%   { transform: translateX(-46vw) scale(1.25) rotate(-24deg); opacity: 0; }
    22%  { opacity: 1; }
    78%  { transform: translateX(2.5%) scale(0.97) rotate(4deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .icon-stage.icon-out-fwd,
    .icon-stage.icon-out-back,
    .icon-stage.icon-in-fwd,
    .icon-stage.icon-in-back {
        animation-duration: 0.01ms;
    }
}

/* ==========================================================================
   NEON SWEEP — page transition
   A luminous band races across the viewport; a dark veil peaks underneath it
   at the same moment, so the page swap is hidden behind the brightest part of
   the wipe and reads as the light itself revealing the new page.
   ========================================================================== */
.sweep {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

.sweep.is-active {
    visibility: visible;
}

/* Dark veil that briefly covers the swap */
.sweep-veil {
    position: absolute;
    inset: 0;
    background: var(--homeBg);
    opacity: 0;
}

/* Coloured wash that blooms as the band passes */
.sweep-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(157, 178, 255, 0.30) 0%,
        rgba(120, 235, 205, 0.12) 40%,
        transparent 70%);
    opacity: 0;
}

/* The band itself */
.sweep-band {
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 40vw;
    transform: translateX(-150%) skewX(-12deg);
    filter: blur(6px);
    mix-blend-mode: screen;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(157, 178, 255, 0.10) 20%,
        rgba(157, 178, 255, 0.55) 44%,
        #eaf2ff 51%,
        rgba(120, 235, 205, 0.55) 58%,
        rgba(120, 235, 205, 0.10) 80%,
        transparent 100%);
}

.sweep.is-active .sweep-veil { animation: sweepVeil 0.95s ease-in-out both; }
.sweep.is-active .sweep-glow { animation: sweepGlow 0.95s ease-in-out both; }
.sweep.is-active .sweep-band { animation: sweepAcross 0.95s cubic-bezier(0.65, 0, 0.35, 1) both; }

/* Reverse direction when navigating backwards through the nav order */
.sweep.sweep--back .sweep-band { animation-name: sweepAcrossBack; }

@keyframes sweepAcross {
    from { transform: translateX(-150%) skewX(-12deg); }
    to   { transform: translateX(350%) skewX(-12deg); }
}

@keyframes sweepAcrossBack {
    from { transform: translateX(350%) skewX(12deg); }
    to   { transform: translateX(-150%) skewX(12deg); }
}

@keyframes sweepVeil {
    0%   { opacity: 0; }
    38%  { opacity: 0.92; }
    58%  { opacity: 0.92; }
    100% { opacity: 0; }
}

@keyframes sweepGlow {
    0%   { opacity: 0; }
    46%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sweep.is-active .sweep-veil,
    .sweep.is-active .sweep-glow,
    .sweep.is-active .sweep-band {
        animation-duration: 0.01ms;
    }
}

/* ==========================================================================
   DEPTH DIVE — page transition
   The page you leave rushes past the camera (scales up, blurs out) while the
   next one arrives from far away (small and blurred, sharpening as it lands),
   so navigating reads as travelling forward through a stack of pages.
   Backwards navigation mirrors it: the old page recedes, the new one arrives
   from close up.
   ========================================================================== */
.page.depth-out-fwd,
.page.depth-out-back,
.page.depth-in-fwd,
.page.depth-in-back {
    /* Anchored near the top of the viewport so the long Projects page doesn't
       scale around a centre point far below the fold. */
    transform-origin: 50% 40vh;
    will-change: transform, filter, opacity;
}

.page.depth-out-fwd  { animation: depthOutFwd  0.55s cubic-bezier(0.45, 0, 0.75, 0.25) forwards; }
.page.depth-out-back { animation: depthOutBack 0.55s cubic-bezier(0.45, 0, 0.75, 0.25) forwards; }
.page.depth-in-fwd   { animation: depthInFwd   0.85s cubic-bezier(0.2, 0.78, 0.3, 1) both; }
.page.depth-in-back  { animation: depthInBack  0.85s cubic-bezier(0.2, 0.78, 0.3, 1) both; }

@keyframes depthOutFwd {
    from { transform: scale(1);    filter: blur(0);    opacity: 1; }
    to   { transform: scale(1.14); filter: blur(12px); opacity: 0; }
}

@keyframes depthOutBack {
    from { transform: scale(1);    filter: blur(0);    opacity: 1; }
    to   { transform: scale(0.86); filter: blur(12px); opacity: 0; }
}

@keyframes depthInFwd {
    0%   { transform: scale(0.85); filter: blur(14px); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: scale(1);    filter: blur(0);    opacity: 1; }
}

@keyframes depthInBack {
    0%   { transform: scale(1.16); filter: blur(14px); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: scale(1);    filter: blur(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .page.depth-out-fwd,
    .page.depth-out-back,
    .page.depth-in-fwd,
    .page.depth-in-back {
        animation-duration: 0.01ms;
    }
}

/* ==========================================================================
   CURRENT PAGE IN THE MENU
   script.js already marks the clicked link `.selected`; these rules give it a
   look. Only menu items are styled — the front page is reached through the
   logo, which sits outside .nav-menu and so never highlights.
   ========================================================================== */
.nav .nav-menu li a {
    position: relative;
    opacity: 0.58;
    transition: opacity 0.3s var(--ease-out);
}

.nav .nav-menu li a:hover,
.nav .nav-menu li a.selected {
    opacity: 1;
}

.nav .nav-menu li a.selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.42rem;
    height: 1px;
    background: var(--homeAccent);
    transform-origin: left center;
    animation: navUnderline 0.45s var(--ease-out) both;
}

@keyframes navUnderline {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* In the mobile panel the links are full-width blocks, so an underline the
   width of the row reads as a divider — mark the current item instead. */
@media (max-width: 499px) {
    .nav .nav-menu li a.selected::after {
        left: 50%;
        right: auto;
        width: 1.6rem;
        transform: translateX(-50%);
        bottom: 0.55rem;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav .nav-menu li a.selected::after {
        animation: none;
    }
}