/*
=========================================================
 STICKY Homepage
 Designed & Developed by Archie
 Copyright © 2026 Sticky Web Design
 All Rights Reserved.
=========================================================
*/
#previewA,
#previewB{

    position:fixed;

    inset:0;

    background:#ffffff;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0;

    filter:blur(1px);

    transform:scale(1.04);

    transition:
        opacity .8s ease,
        transform .8s ease,
        filter .8s ease;

    will-change:
        opacity,
        transform,
        filter;

    pointer-events:none;

}

#previewA{

    z-index:1;

}

#previewB{

    z-index:2;

}

#veil{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.92);

    z-index:3;

    transition:background .8s ease;

    pointer-events:none;

}

#app{

    position:relative;

    z-index:10;

    transform:translateY(-40px);

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}

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

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#ffffff;

    color:#111;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

}

#portrait{

    width:280px;

    max-width:55vw;

    margin-bottom:40px;

}

h1{

    font-size:72px;

    font-weight:300;

    letter-spacing:.30em;

    margin-bottom:20px;

}

p{

    color:#666;

    font-size:22px;

    line-height:1.6;

}

#reveal{

    display:inline-block;

    margin-top:50px;

    color:#111;

    text-decoration:none;

    font-size:18px;

    letter-spacing:.08em;

    position:relative;

}

#reveal::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:1px;

    background:#111;

    transition:.3s;

}

#reveal:hover::after{

    width:100%;

}
.reveal{

    position:absolute;

    opacity:0;

    transform:translateY(12px);

    transition:
    opacity .45s ease,
    transform .45s ease;

    display:flex;

    flex-direction:column;

    gap:10px;

    text-align:left;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

.reveal h3{

    font-size:18px;

    font-weight:400;

    letter-spacing:.22em;

    margin-bottom:8px;

}

.reveal a{

    color:#555;

    opacity:.85;

    text-decoration:none;

    font-size:16px;

    transition:
    color .25s ease,
    opacity .25s ease,
    padding-left .25s ease;

}

.reveal a:hover{

    color:#111;

    opacity:1;

    padding-left:8px;

}

#r1{

    top:10%;

    right:8%;

}

#r2{

    bottom:12%;

    left:8%;

}

#r3{

    top:8%;

    left:10%;

}

#r4{

    bottom:6%;

    right:8%;

}
body.leaving #app{

    opacity:0;

    transform:translateY(-40px) scale(.98);

    transition:
        opacity .55s ease,
        transform .55s ease;

}

body.leaving #veil{

    background:rgba(255,255,255,1);

}

/* ===========================
   ATMOSPHERIC HOVER EFFECTS
=========================== */

#previewA,
#previewB{

    animation: drift 28s ease-in-out infinite alternate;

}

@keyframes drift{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1.02);

    }

}

#app{

    transition:
        opacity .8s ease,
        transform .8s ease,
        color .8s ease;

}

#portrait{

    transition:
        transform .8s ease,
        filter .8s ease,
        opacity .8s ease;

}

h1,
p,
#reveal,
.reveal,
.reveal a{

    transition:
        color .8s ease,
        opacity .8s ease;

}

body.preview-active h1{

    color:#f6f7fb;

    text-shadow:
        0 0 20px rgba(0,0,0,.35);

}

body.preview-active p{

    color:#d6dbe5;

}

body.preview-active .reveal a{

    color:#f4f4f4;

}

body.preview-active #portrait{

    transform:translateY(-8px);

    filter:
        drop-shadow(0 25px 40px rgba(0,0,0,.35));

}

/*==========================
ORIGIN PANEL
==========================*/

.origin-panel{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin-top .35s ease;

    margin-top:0;

    width:320px;

}

.origin-panel.open{

    max-height:700px;

    opacity:1;

    margin-top:18px;

}

.origin-panel p{

    color:#666;

    font-size:15px;

    line-height:1.7;

    margin-bottom:14px;

}

#blacksmithToggle{

    display:block;

}

#blacksmithToggle.open{

    color:#111;

}

#revealProgress{

    display:flex;

    gap:10px;

    margin-top:16px;

}

#revealProgress span{

    width:10px;

    height:10px;

    border:1px solid #888;

    border-radius:2px;

    background:transparent;

    transition:
        background .30s ease,
        border-color .30s ease,
        transform .30s ease;

}

#revealProgress span.active{

    background:#111;

    border-color:#111;

}

#revealProgress span.complete{

    transform:scale(1.25);

}