/* Base */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#0b0c0f; color:#e6e6e6; }
img { display:block; width:100%; height:auto; }

/* ===== Loader (no fade-out; JS sets display:none when done) ===== */
#loader{
    position: fixed; inset: 0; z-index: 9999;
    display: grid; grid-template-rows: auto 1fr;
    background: #0b0c0f;
}
.loader-top{
    display: grid; justify-items: center; align-content: start; gap: .5rem;
    padding: 1.25rem 1rem .75rem;
}
.loader-logo{ width: 140px; max-width: 50vw; height: auto; }
.loader-title[data-fallback]{ font-weight: 800; letter-spacing: .08em; opacity: .85; display:none; }
.loader-logo[style*="display: none"] + .loader-title[data-fallback]{ display:block; }

.loader-bar{
    width: min(420px, 82vw);
    height: 6px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden; outline: 1px solid rgba(255,255,255,.06);
}
.loader-bar-fill{
    display:block; height:100%; width:0;
    background: linear-gradient(90deg, #3dd6c6, #7aa2f7);
    transition: width .2s ease;
}

.loader-page{
    margin: 0; height: calc(100vh - 96px);
    display: grid; place-items: center; padding: 0 2vw 2vh;
}
.loader-page picture, .loader-page img{
    max-width: min(1000px, 96vw);
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    background: #0e1016;
}

/* ===== Scrolly layout ===== */
.scrolly { width:min(1100px, 100vw); margin:0 auto; }
.scene   { position:relative; min-height:160vh; border-bottom:1px solid rgba(255,255,255,0.06); }
.sticky  { position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; }

/* Figure (no opacity/transform animations) */
.page-figure{
    margin:0;
    width:auto;
    max-width:min(1000px, 96vw);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    border-radius:10px;
    background:#0e1016;
    backface-visibility:hidden;
}

/* default image behavior */
.page-figure img{ width:100%; height:auto; }

/* fit-to-device rules */
.page-figure.fit-height img{ height:92vh; width:auto; max-width:96vw; }
.page-figure.fit-width  img{ width:min(1000px, 96vw); max-height:92vh; }

/* Subtle static background */
body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
            radial-gradient(900px 500px at 15% 0%, rgba(61,214,198,.10), transparent),
            radial-gradient(700px 400px at 85% 20%, rgba(122,162,247,.10), transparent),
            radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.45), transparent);
}

/* Mobile tweaks */
@media (max-width: 768px){
    .scene{ min-height: 140vh; }
    .page-figure{ max-width: min(960px, 96vw); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
}