/* ===== Zac Abney Portfolio — project pages ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
    --nav-fg:rgb(76,9,85);
    --nav-bg:transparent;
    --nav-panel:rgba(255,255,255,.94);
    --glass-bg:rgba(255,255,255,.14);
    --glass-line:rgba(255,255,255,.25);
    --pad-x:clamp(1rem,5vw,6rem);
    --panel-w:min(900px,calc(100% - 2rem));
    --img-r:clamp(18px,4vw,50px);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;text-decoration:none;list-style:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden;line-height:1.5}
img,video{max-width:100%}

/* ----- Header / navigation ----- */
header{
    position:fixed;top:0;left:0;width:100%;padding:.8rem var(--pad-x);
    display:flex;justify-content:space-between;align-items:center;gap:1rem;z-index:100;
    background:var(--nav-bg);color:var(--nav-fg);
}
.brand{display:flex;align-items:center;gap:.6rem}
.logo-link{display:inline-flex}
.logoimage{
    display:inline-block;width:clamp(36px,6vw,50px);height:clamp(36px,6vw,50px);background-color:var(--nav-fg);
    -webkit-mask:url("Images/ZA_Logo.png") center/contain no-repeat;mask:url("Images/ZA_Logo.png") center/contain no-repeat;
}
.h3{font-size:clamp(.85rem,2.5vw,1.1rem);font-weight:700;color:var(--nav-fg);pointer-events:none;white-space:nowrap}
.navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.navigation a{color:var(--nav-fg);padding:6px 14px;border-radius:20px;margin:0 2px;font-weight:600;font-size:.95rem;transition:.2s}
.navigation a:hover,.navigation a.active{background:#fc8a75;color:#fff}
.nav-toggle{
    display:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative;color:var(--nav-fg);
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:.25s;
}
.nav-toggle span{top:21px}
.nav-toggle span::before{top:-7px;left:0}
.nav-toggle span::after{top:7px;left:0}
header.nav-open .nav-toggle span{background:transparent}
header.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
header.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
    header{padding:.5rem .8rem;background:var(--nav-bg-mobile,var(--nav-bg));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .nav-toggle{display:block}
    .navigation{
        display:none;position:absolute;top:100%;left:.5rem;right:.5rem;flex-direction:column;align-items:stretch;
        background:var(--nav-panel);border-radius:1.2rem;padding:.6rem;box-shadow:0 14px 35px rgba(0,0,0,.25);
    }
    header.nav-open .navigation{display:flex}
    .navigation a{margin:0;padding:.8rem 1rem;text-align:center}
}

/* ----- Page themes ----- */
body.page-projects{--nav-bg-mobile:rgba(255,255,255,.55)}
body.page-labpilot,body.page-kitsault,body.page-perfit{
    --nav-bg:#44444457;--nav-panel:rgba(255,255,255,.94);
    display:flex;flex-direction:column;align-items:center;padding:clamp(80px,14vw,120px) 0;position:relative;isolation:isolate;
}
body.page-labpilot,body.page-kitsault{--nav-fg:#000}
body.page-perfit{--nav-fg:#a0f044;--nav-panel:rgba(13,15,20,.95)}
body.page-inprogress{
    --nav-fg:rgb(76,9,85);--nav-bg:rgba(76,9,85,.05);--nav-panel:rgba(255,255,255,.96);
    background:linear-gradient(135deg,#f5f5f5,#e8e8e8);
    display:flex;flex-direction:column;align-items:center;padding:clamp(80px,14vw,120px) 0;
}
header{border-bottom:0}
body.page-labpilot header,body.page-kitsault header,body.page-perfit header{
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.25);
}
/* fixed background layer — works on iOS (background-attachment:fixed does not) */
body.page-labpilot::before,body.page-kitsault::before,body.page-perfit::before{
    content:"";position:fixed;inset:0;z-index:-1;background:center top/cover no-repeat;
}
body.page-labpilot::before{background-image:url("Images/field_bc_mtns.png")}
body.page-kitsault::before{background-image:url("Kitsault/PumphouseheroQuest.png")}
body.page-perfit::before{background-image:url("Images/Background_Lab_upscaled.jpg")}

/* ----- Shared glass panels ----- */
.about-img,.labpilot-text,.kitsault-text,.labpilot-why,.kitsault-why,.perfit-vr,.perfit-about img{
    background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:0 25px 60px rgba(0,0,0,.22);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:clamp(1.1rem,3vw,2rem);
}
.labpilot-about,.perfit-about{width:var(--panel-w);display:flex;justify-content:center;align-items:center}
.about-img{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;margin:clamp(1rem,4vw,50px) auto 0;padding:clamp(1rem,3vw,1.5rem)}
.labpilot-about img{width:100%;max-width:700px;margin:clamp(1.5rem,5vw,80px) auto;display:block}
.labpilot-text,.kitsault-text{
    width:var(--panel-w);display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;text-align:center;
    margin:30px auto 0;padding:clamp(1rem,3vw,1.5rem);font-size:clamp(.95rem,2.5vw,1.05rem)
}
.labpilot-why,.kitsault-why{
    width:var(--panel-w);display:grid;justify-items:center;text-align:center;row-gap:1rem;margin:clamp(1.5rem,4vw,50px) auto 0;
    padding:clamp(1rem,4vw,2rem);color:#000
}
.labpilot-why h2,.kitsault-why h2{font-size:clamp(1.6rem,5vw,2.2rem)}
.labpilot-why h3,.kitsault-why h3{font-size:clamp(1.05rem,3.2vw,1.4rem);margin-top:.8rem}
.labpilot-why p,.kitsault-why p{color:#000;line-height:1.65;font-size:clamp(.92rem,2.4vw,1rem)}
.labpilot-why img,.kitsault-why img,.labpilot-why video,.kitsault-why video{display:block;width:100%;height:auto;border-radius:var(--img-r)}
.labpilot-why .holder,.kitsault-why .holder{display:grid;width:100%;max-width:700px;margin:0 auto 10px;gap:1rem;overflow:hidden;border-radius:var(--img-r)}
.labpilot-why p img{margin-top:1rem}

/* ----- AlpenglowVR ----- */
.parallax{position:relative;display:flex;justify-content:center;align-items:center;height:100vh;height:100svh;overflow:hidden}
#text{position:absolute;display:flex;justify-content:center;text-align:center;color:#4b075c;font-size:clamp(2.4rem,11vw,5rem);font-weight:700;padding:0 1rem;z-index:1}
.parallax img{position:absolute;top:0;left:0;width:100%;height:100%;min-height:105vh;object-fit:fill;pointer-events:none}
/* Landscape screens: layers stretch to the frame (original look). Portrait phones/tablets: crop instead of squashing. */
@media (max-aspect-ratio:1/1){.parallax img{object-fit:cover;object-position:center bottom}}
.model{
    width:100%;min-height:60vh;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#0d0f2c;
}
.model-title{
    position:absolute;inset:0;display:flex;justify-content:center;align-items:center;text-align:center;
    font-size:clamp(2.2rem,8vw,7rem);font-weight:600;line-height:.95;letter-spacing:.08em;color:#fc8a75;pointer-events:none;z-index:2;text-transform:uppercase;
}
.model canvas{position:relative;z-index:1;opacity:.9;max-width:100%}
.alpenglow-text{
    position:relative;background:#0d0f2c;color:#fc8a75;display:flex;justify-content:center;align-items:center;padding:clamp(3rem,8vw,100px) 0;
}
.alpenglow-text p{font-size:clamp(.95rem,2.6vw,1.2rem);font-weight:500;width:min(760px,calc(100% - 2.5rem));text-align:center;line-height:1.7}
.alpenglow-text img,.alpenglow-text video{display:block;width:100%;max-width:700px;margin:0 auto 20px;border-radius:var(--img-r)}
@media (max-width:700px){.model{min-height:70vh}}

/* ----- PerfitVR ----- */
.perfit-about{margin-top:clamp(1rem,4vw,50px)}
.perfit-about div{width:100%}
.perfit-about img{display:block;width:100%;max-width:900px;margin:0 auto;padding:clamp(1rem,3vw,1.5rem)}
.perfit-vr{
    position:relative;color:#a0f044;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    width:var(--panel-w);margin:clamp(1.5rem,4vw,50px) auto 0;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem);
}
.perfit-vr > br{display:none}
.perfit-title{position:static;text-align:center;color:#a0f044;font-size:clamp(2rem,9vw,4.5rem);font-weight:700;line-height:1.1;margin-bottom:1rem}
.perfit-vr p{font-size:clamp(.92rem,2.4vw,1.15rem);font-weight:500;width:100%;max-width:700px;text-align:center;line-height:1.7}
.perfit-vr img{display:block;width:100%;max-width:700px;margin:1.2rem auto;border-radius:var(--img-r)}

/* ----- In-progress ----- */
.inprogress-content{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 1rem}
.inprogress-title{font-size:clamp(2rem,8vw,3.5rem);font-weight:700;color:rgb(76,9,85);margin-bottom:clamp(1.5rem,5vw,50px);text-align:center;line-height:1.1}
.inprogress-section{
    display:flex;flex-direction:column;align-items:center;width:var(--panel-w);margin:clamp(.8rem,3vw,30px) auto;
    background:rgba(255,255,255,.7);border:1px solid rgba(76,9,85,.15);box-shadow:0 15px 40px rgba(0,0,0,.08);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:clamp(1.1rem,3vw,2rem);padding:clamp(1.2rem,4vw,3rem) clamp(1rem,3vw,2rem);
}
.inprogress-section h2{font-size:clamp(1.4rem,4vw,2rem);font-weight:600;color:rgb(76,9,85);margin-bottom:20px;text-align:center}
.inprogress-section .holder{width:100%;max-width:700px;margin:20px auto;border-radius:30px;overflow:hidden}
.inprogress-section .holder img,.inprogress-section .holder video{width:100%;height:auto;display:block}
.inprogress-section p{font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:500;color:rgb(76,9,85);text-align:center;margin-top:15px;line-height:1.6}

/* ----- Scroll-scrub video (optional section) ----- */
section.vid{height:3000px}
section.vid .holder{position:sticky;top:0}
section.vid video{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}