@charset "UTF-8";
/* CSS Document */

@media only screen and (min-width: 601px) {






    

    /* ---------- HEADER ---------- */


    .topnav {
        background-color: rgba(0,0,0,0.0);
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0px auto;
        padding: 10px 5px 0px 0px;
        overflow: visible;
        text-align: right;
        user-select: none;
        z-index: 1000;
    }
    .topnav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .topnav a {
        margin: 15px 25px 0px 0px;
        display: inline-block;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 14px;
        transform: translateX(0) scale(1);
        transform-origin: right center;
        transition: transform 0.38s cubic-bezier(0.4, 0, 1, 1), opacity 0.38s ease, color 0.2s ease;
    }
    .topnav a:link{
        color: rgba(255,255,255,0.5);
    }
    .topnav a:visited{
        color: #fff;
    }
    .topnav a:hover{
        color: #fff;
    }
    .topnav a:active{
        color: #fff;
    }

    /* ---- BACK BUTTON: ← circle ---- */

    .back-btn {
        position: fixed;
        top: 17px;
        left: 20px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        font-family: sans-serif;
        font-size: 18px;
        font-weight: 300;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        outline: none;
        padding: 0;
        line-height: 1;
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease;
    }
    .back-btn:hover {
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
    }

    /* Back button collapses with the nav — hides after links, appears after links */
    .topnav.collapsed:not(.open) ~ .back-btn {
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
        transition-delay: 0.14s;
    }
    .topnav.collapsed.open ~ .back-btn {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        transition-delay: 0.2s;
    }

    /* Instant-state helper: suppresses transitions during programmatic collapse */
    .topnav.no-transition,
    .topnav.no-transition * {
        transition: none !important;
    }
    .topnav.no-transition ~ .back-btn {
        transition: none !important;
    }


    /* ---- NAV TOGGLE: + circle ---- */

    .nav-toggle {
        position: fixed;
        top: 17px;
        right: 20px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        font-family: sans-serif;
        font-size: 22px;
        font-weight: 100;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease;
        pointer-events: none;
        padding: 0;
        line-height: 1;
        outline: none;
        padding-bottom: 1px;
    }
    .nav-toggle:hover {
        border-color: rgba(255, 255, 255, 0.7);
        color: #fff;
    }

    /* Button visible when collapsed */
    .topnav.collapsed .nav-toggle {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    /* Button hides when open */
    .topnav.collapsed.open .nav-toggle {
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
    }

    /* ---- Collapse: links fly into button (About first, Portfolio last) ---- */

    .topnav.collapsed:not(.open) li:nth-child(3) a {
        opacity: 0;
        transform: translateX(12px) scale(0);
        transition-delay: 0s;
        pointer-events: none;
    }
    .topnav.collapsed:not(.open) li:nth-child(2) a {
        opacity: 0;
        transform: translateX(28px) scale(0);
        transition-delay: 0.07s;
        pointer-events: none;
    }
    .topnav.collapsed:not(.open) li:nth-child(1) a {
        opacity: 0;
        transform: translateX(52px) scale(0);
        transition-delay: 0.14s;
        pointer-events: none;
    }

    /* ---- Open: links fly back out (Portfolio first, About last) ---- */

    .topnav.collapsed.open li:nth-child(1) a {
        opacity: 1;
        transform: translateX(0) scale(1);
        transition-delay: 0s;
        pointer-events: auto;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    .topnav.collapsed.open li:nth-child(2) a {
        opacity: 1;
        transform: translateX(0) scale(1);
        transition-delay: 0.07s;
        pointer-events: auto;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    .topnav.collapsed.open li:nth-child(3) a {
        opacity: 1;
        transform: translateX(0) scale(1);
        transition-delay: 0.14s;
        pointer-events: auto;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }


    /* ---------- BODY ---------- */


    .body_home{
        margin: 0;
        background-color: #1c1c1c;
        overflow: hidden;
        transition: background-color 0.8s ease;
    }

    * { box-sizing: border-box }
    
    .body_proj {
        margin: 0;
        background-color: #140806;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
    }

    #smooth-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        will-change: transform;
        z-index: 2;
    }

    
    /* MAIN */


    main{
        /* border: solid #000; */
        width: 100%;
    }
    #page{
        width: 100vw;
        height: 100vh;
    }


    /* SCROLL GALLERY */
    

    #scroll_gallery{
        display: flex;
        gap: 3vmin;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-5.1%, -50%); /* JS overrides this immediately; kept as fallback */
        user-select: none;
        -webkit-user-select: none; /* Chrome/Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
        z-index: 2;
        transition: transform .3s linear;
    }
    #scroll_gallery .image{
        width: 40vmin;
        height: 61vmin;
        object-fit: cover;
        object-position: 100% center;
        overflow: hidden;
    }
    .image.expand {
        border: solid #333;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover; /* or cover, depending on your preference */
        z-index: 9999; /* ensure it's above other elements */
    }


    /* GALLERY + ICON */


    #gallery-plus {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        font-family: sans-serif;
        font-size: 1.8vw;
        font-weight: 100;
        color: rgba(255, 255, 255, 0.65);
        z-index: 4;
        pointer-events: none;
        line-height: 1;
        transition: transform 0.7s ease, opacity 0.7s ease;
    }

    #gallery-plus.hidden {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }


    /* GALLERY COUNTER */


    #gallery-counter {
        position: fixed;
        left: 50%;
        bottom: 4vh;
        transform: translateX(-50%);
        font-family: sans-serif;
        font-size: 0.75vw;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 0.3em;
        z-index: 4;
        pointer-events: none;
        overflow: hidden;
        height: 1.2em;
        display: flex;
        align-items: center;
    }

    #gallery-counter-num {
        display: block;
        line-height: 1;
    }

    #gallery-explore {
        display: block;
        line-height: 1;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.4);
        pointer-events: auto;
        cursor: pointer;
    }
    #gallery-explore:hover {
        color: #fff;
    }

    @keyframes numSlideOutUp {
        from { transform: translateY(0);     opacity: 1; }
        to   { transform: translateY(-130%); opacity: 0; }
    }
    @keyframes numSlideOutDown {
        from { transform: translateY(0);    opacity: 1; }
        to   { transform: translateY(130%); opacity: 0; }
    }
    @keyframes numSlideInUp {
        from { transform: translateY(130%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
    @keyframes numSlideInDown {
        from { transform: translateY(-130%); opacity: 0; }
        to   { transform: translateY(0);     opacity: 1; }
    }


    /* GALLERY TITLE */

    /* ── Adjust these three variables to reposition / rescale the title ── */
    :root {
        --title-left: 50%;      /* horizontal anchor  — try e.g. 30%, 70%   */
        --title-top:  50%;      /* vertical anchor    — try e.g. 40%, 75%   */
        --title-size: 8vw;      /* font size          — try e.g. 6vw, 12vw  */
    }

    #gallery-title {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 5;
        pointer-events: none;
        overflow: visible;
        perspective: 800px;
    }
    #gallery-title-text {
        position: absolute;
        left: var(--title-left);
        top:  var(--title-top);
        transform: translate(-50%, -50%);
        display: block;
        font-family: sans-serif;
        font-size: var(--title-size);
        font-weight: 300;
        color: #fff;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .title-line {
        display: block;
        white-space: nowrap;
    }

    .title-letter-wrap {
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
    }

    .title-letter-inner {
        display: block;
        animation: letterSlideIn 0.35s ease both;
    }

    @keyframes letterSlideIn {
        from { transform: translateX(-110%); opacity: 0; }
        to   { transform: translateX(0);     opacity: 1; }
    }

    @keyframes letterSlideOut {
        from { transform: translateX(0);     opacity: 1; }
        to   { transform: translateX(110%);  opacity: 0; }
    }

    @keyframes slideInLeft {
        from{
            transform: translateX(-3500px) translateY(-50%);
        }
        to{
            transform: translateX(-6%) translateY(-50%);
        }
    }
    
    .slideInLeft{
        animation: slideInLeft 3s;
    }

    /* --------- PROJ_INTRO -------- */

        
    .proj_intro {
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: left;
        align-items: left;
        overflow: hidden;
    }
    .header_img {
        width: auto;
        height: 100vh;
    }
    .header_img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .header_text {
        color: #fff;
        width: auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: left;
        padding: 4vw 0vw 0vw 4vw;
    }
    h1 {
        font-family: sans-serif;
        font-size: 4vw;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 0;
    }
    h2 {
        font-family: sans-serif;
        font-size: 1vw;
        font-weight: 300;
        letter-spacing: 0.08em;
        margin: 5vw 0vw 0vw 0vw;
        text-align: justify;
        text-justify: inter-word;
        text-align-last: justify;
    }
    .proj_date {
        padding: 75px 0px 0px 0px;
    }
    p {
        font-family: sans-serif;
        font-size: .8vw;
        font-weight: 300;
        letter-spacing: 0.08em;
        line-height: 3vw;
        margin: 4vw 0vw 0vw 0vw;
        opacity: 0.3;
        text-align: justify;
        text-justify: inter-word;
        text-align-last: justify;
    }

    .flyingembers_gallery {
        width: 100vw;
        height: 100vh;
    }
    .flyingembers_gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* --------- PROJECT PAGE ENTRANCE --------- */

    @keyframes projSlideInLeft {
        from { transform: translateX(-100vw); }
        to   { transform: translateX(0); }
    }

    @keyframes projSlideInRight {
        from { transform: translateX(100vw); }
        to   { transform: translateX(0); }
    }

    /* Persisted image: full-screen → left panel. Applied in JS before first paint. */
    @keyframes imageSlideIn {
        from { width: 100vw; }
        to   { width: 75vw;  }
    }

    .header_img {
        animation: projSlideInLeft 0.7s cubic-bezier(0, 0, 0.2, 1) 0.1s both;
    }

    /* Each h1 line slides in separately */
    h1 .h1-line {
        display: block;
        animation: projSlideInRight 0.6s cubic-bezier(0, 0, 0.2, 1) both;
    }
    h1 .h1-line:nth-child(1) { animation-delay: 0.2s; }
    h1 .h1-line:nth-child(2) { animation-delay: 0.33s; }
    h1 .h1-line:nth-child(3) { animation-delay: 0.46s; }

    /* h2 and p follow after the title lines */
    .header_text > h2:nth-of-type(1) {
        animation: projSlideInRight 0.6s cubic-bezier(0, 0, 0.2, 1) 0.59s both;
    }
    .header_text > p {
        animation: projSlideInRight 0.6s cubic-bezier(0, 0, 0.2, 1) 0.72s both;
    }
    .header_text > .proj_date {
        animation: projSlideInRight 0.6s cubic-bezier(0, 0, 0.2, 1) 0.85s both;
    }


    /* --------- ABOUT -------- */


    .textbox_01{
        text-align: center;
    }







































}