/* ================= PAGE BASE ================= */

.archvizography-page {
    background:#080808;
    color:#eaeaea;
    font-family:Inter,system-ui;
    margin:0;
    overflow-x:hidden;
}

/* ================= LOADER ================= */

.avz-loader{
    position:fixed;
    inset:0;
    background:#000;
    display:grid;
    place-items:center;
    z-index:9999;
    overflow:hidden;
}

.avz-curtain{
    position:absolute;
    left:0;
    width:100%;
    height:14vh;
    background:#000;
    z-index:5;
}

.avz-curtain-top{ top:0; }
.avz-curtain-bottom{ bottom:0; }

.avz-stage{
    position:relative;
    width:min(560px,80vw);
}

.avz-body{
    width:100%;
    filter:brightness(.6) drop-shadow(0 40px 90px rgba(0,0,0,.85));
}

.avz-hinge{
    position:absolute;
    width:28%;
    left:0.3%;
    top:-18.8%;
    z-index:3;
}

.avz-top-wrapper{
    position:absolute;
    left:0%;
    top:-13%;
    width:100%;
    transform-origin:0 0;
    transform:rotate(-38deg);
    z-index:2;
}

.avz-top{
    width:100%;
}

.avz-wordmark{
    position:absolute;
    width:80%;
    top:22%;
    left:50%;
    transform:translate(-50%,12px);
    opacity:0;
}

.avz-flash{
    position:absolute;
    inset:0;
    background:#e0462e;
    opacity:0;
    mix-blend-mode:overlay;
}

.avz-dust{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 70%);
    opacity:0;
}

/* PLAY */

.avz-loader.play .avz-top-wrapper{
    animation:clapClose 1.4s cubic-bezier(.22,.61,.36,1) forwards;
}

.avz-loader.play .avz-flash{
    animation:flash .3s ease .6s forwards;
}

.avz-loader.play .avz-dust{
    animation:dust .9s ease .7s forwards;
}

.avz-loader.play .avz-wordmark{
    animation:markIn 1s ease .8s forwards;
}

.avz-loader.play .avz-stage{
    animation:shake .35s ease .6s;
}

.avz-loader.exit .avz-curtain-top{
    animation:curtainUp 1.6s ease forwards;
}

.avz-loader.exit .avz-curtain-bottom{
    animation:curtainDown 1.6s ease forwards;
}

.avz-loader.exit{
    animation:fadeOut .8s ease 1.2s forwards;
}

/* KEYFRAMES */

@keyframes clapClose{
    0%{ transform:rotate(-38deg); }
    60%{ transform:rotate(0deg); }
    80%{ transform:rotate(-6deg); }
    100%{ transform:rotate(0deg); }
}

@keyframes flash{
    50%{ opacity:.35; }
}

@keyframes dust{
    0%{ opacity:.3; transform:scale(.95); }
    100%{ opacity:0; transform:scale(1.1); }
}

@keyframes markIn{
    0%{ opacity:0; transform:translate(-50%,12px); }
    100%{ opacity:1; transform:translate(-50%,0); }
}

@keyframes shake{
    25%{ transform:translateX(-2px); }
    75%{ transform:translateX(2px); }
}

@keyframes curtainUp{ to{ transform:translateY(-100%); } }
@keyframes curtainDown{ to{ transform:translateY(100%); } }
@keyframes fadeOut{ to{ opacity:0; visibility:hidden; } }

/* ================= HEADER ================= */

.avz-header{
    position:fixed;
    top:0;
    width:100%;
    padding:20px;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
}

.avz-header nav{
    display:flex;
    gap:24px;
}

.avz-header a{
    color:#eaeaea;
    text-decoration:none;
}

.avz-header a.active{
    color:#e0462e;
}

/* ================= HERO ================= */

.avz-hero{
    padding:100px 0 80px;
    text-align:center;
}

.avz-hero-image{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
    filter:brightness(.85);
}

.avz-hero-text{
    max-width:760px;
    margin:80px auto 0;
    padding:0 20px;
}

.avz-hero-text h1{
    font-size:2.6rem;
    line-height:1.3;
    margin-bottom:20px;
}

.avz-hero-text p{
    opacity:.8;
}

.avz-section{
    max-width:900px;
    margin:80px auto;
    padding:0 20px;
}

.avz-footer{
    text-align:center;
    padding:60px 20px;
    border-top:1px solid #1a1a1a;
}

/* MOBILE */

@media (max-width:768px){

    .avz-hero-image{
        height:100vh;
        object-position:center top;
    }

    .avz-hero-text{
        margin-top:40px;
    }

    .avz-hero-text h1{
        font-size:1.8rem;
    }
}