/* =====================================================
   LOOMELUGU
   Minimal Architecture Portfolio
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#111111;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

.hero{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    position:sticky;
    top:0;
    background:#fff;
    z-index:10;
}

.logo-wrapper{
    width:min(420px,80vw);
    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .6s ease;
}

.logo-wrapper img{
    display:block;
    width:100%;
    height:auto;
}

/* scroll animation */

.hero.scrolled .logo-wrapper{
    transform:scale(.55) translateY(-170px);
}


/* =====================================================
   CONTENT
===================================================== */

.content{
    background:#fff;
    position:relative;
    z-index:20;
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding:120px 30px 180px;
}

.content-inner{

    width:100%;
    max-width:720px;

    opacity:0;
    transform:translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.content.visible .content-inner{

    opacity:1;
    transform:translateY(0);

}

/* =====================================================
   TYPOGRAPHY
===================================================== */

h2{

    font-size:2rem;
    font-weight:300;
    letter-spacing:.03em;

    margin-bottom:38px;

}

h3{

    font-size:.82rem;
    font-weight:500;
    text-transform:uppercase;

    letter-spacing:.22em;

    margin-top:70px;
    margin-bottom:20px;

}

p{

    font-size:1.08rem;
    line-height:1.9;

    color:#444;

}

.services ul{

    list-style:none;

}

.services li{

    padding:9px 0;

    font-size:1rem;

    color:#222;

    letter-spacing:.02em;

}

.services li::before{

    content:"— ";
    color:#999;

}

.contact a{

    text-decoration:none;

    color:#111;

    font-size:1.05rem;

    transition:.35s;

}

.contact a:hover{

    opacity:.45;

}


/* =====================================================
   FADE-IN ANIMATION
===================================================== */

.fade{

    opacity:0;
    transform:translateY(25px);

}

.fade.visible{

    opacity:1;
    transform:translateY(0);

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

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:900px){

.hero{
    padding:30px;
}

.logo-wrapper{

    width:min(340px,82vw);

}

.hero.scrolled .logo-wrapper{

    transform:scale(.68) translateY(-120px);

}

.content{

    padding:90px 25px 140px;

}

h2{

    font-size:1.7rem;

}

p{

    font-size:1rem;

    line-height:1.8;

}

}


@media (max-width:600px){

.logo-wrapper{

    width:88vw;

}

.hero.scrolled .logo-wrapper{

    transform:scale(.75) translateY(-80px);

}

.content{

    padding:70px 22px 100px;

}

h2{

    font-size:1.45rem;

}

h3{

    letter-spacing:.18em;

}

p{

    font-size:.97rem;

}

.services li{

    font-size:.95rem;

}

.contact a{

    font-size:.95rem;

}

}


/* =====================================================
   SELECTION
===================================================== */

::selection{

    background:#111;
    color:#fff;

}