/* miris.quest -- flat-design retro-futuristic bold color blocks */

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

:root{
    --orange:#E8621A;
    --teal:#00B4A6;
    --purple:#6B3FA0;
    --offwhite:#F8F4EF;
    --charcoal:#1E1E24;
    --lemon:#F5C542;
    --rose:#E84860;
    --sky:#A8D8E8;
}

body{
    background:var(--charcoal);
    color:var(--offwhite);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.75;
    overflow-x:hidden;
}

/* Progress bar */
.progress-bar{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    background:var(--orange);
    width:0%;
    z-index:100;
    transition:width 0.1s linear;
}

/* Waypoints */
.waypoint{
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.wp-inner{
    width:min(640px,90vw);
    padding:3rem 0;
}

/* Banner */
.wp-banner{
    min-height:100vh;
    background:var(--charcoal);
    flex-direction:column;
}

.banner-title{
    font-family:'Archivo Black',sans-serif;
    font-weight:400;
    font-size:clamp(4rem,12vw,12rem);
    letter-spacing:-0.02em;
    text-transform:uppercase;
    color:var(--orange);
    line-height:1;
}

.banner-dot{
    color:var(--lemon);
}

.banner-sub{
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:1.0625rem;
    color:var(--offwhite);
    margin-top:1rem;
}

/* Saekdong color stripe */
.saekdong{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    height:3px;
}

.saekdong span{
    flex:1;
    display:block;
}

.saekdong-animated span{
    animation:saekdong-pulse 3s ease-in-out infinite;
}

.saekdong-animated span:nth-child(1){animation-delay:0s}
.saekdong-animated span:nth-child(2){animation-delay:0.3s}
.saekdong-animated span:nth-child(3){animation-delay:0.6s}
.saekdong-animated span:nth-child(4){animation-delay:0.9s}
.saekdong-animated span:nth-child(5){animation-delay:1.2s}
.saekdong-animated span:nth-child(6){animation-delay:1.5s}
.saekdong-animated span:nth-child(7){animation-delay:1.8s}
.saekdong-animated span:nth-child(8){animation-delay:2.1s}
.saekdong-animated span:nth-child(9){animation-delay:2.4s}
.saekdong-animated span:nth-child(10){animation-delay:2.7s}

@keyframes saekdong-pulse{
    0%,100%{opacity:0.4}
    50%{opacity:1}
}

/* Morph markers */
.morph-marker{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--offwhite);
}

.morph-shape{
    width:40px;
    height:40px;
    background:var(--lemon);
}

.morph-1{
    border-radius:50%;
}

.morph-2{
    border-radius:0;
}

.morph-3{
    clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

.morph-marker.in-view .morph-shape{
    animation:morph-cycle 2s ease-in-out forwards;
}

@keyframes morph-cycle{
    0%{border-radius:50%;clip-path:none}
    33%{border-radius:0;clip-path:none}
    66%{border-radius:0;clip-path:polygon(50% 0%,0% 100%,100% 100%)}
    100%{border-radius:50%;clip-path:none}
}

/* Philosophy */
.wp-philosophy{
    background:var(--offwhite);
    color:var(--charcoal);
}

.wp-heading{
    font-family:'Archivo Black',sans-serif;
    font-weight:400;
    font-size:clamp(2.5rem,7vw,6rem);
    text-transform:uppercase;
    letter-spacing:-0.02em;
    line-height:1.05;
    margin-bottom:2rem;
    color:var(--charcoal);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.wp-heading.revealed{
    opacity:1;
    transform:translateY(0);
}

.wp-text{
    margin-bottom:1.5rem;
    color:var(--charcoal);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.wp-text.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Flat nature elements */
.flat-tree{
    position:absolute;
    right:8%;
    bottom:20%;
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:60px solid var(--teal);
    opacity:0.1;
}

.flat-tree::after{
    content:'';
    position:absolute;
    top:55px;
    left:-5px;
    width:10px;
    height:25px;
    background:var(--charcoal);
    opacity:0.3;
}

.flat-mountain{
    position:absolute;
    left:5%;
    bottom:10%;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:80px solid var(--purple);
    opacity:0.08;
}

/* Work sections */
.wp-teal{background:var(--teal)}
.wp-purple{background:var(--purple)}

.wp-label{
    font-family:'Space Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(248,244,239,0.6);
    display:block;
    margin-bottom:1rem;
}

.wp-heading-large{
    font-family:'Archivo Black',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    text-transform:uppercase;
    letter-spacing:-0.02em;
    line-height:1.05;
    color:var(--offwhite);
    margin-bottom:1.5rem;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.wp-heading-large.revealed{
    opacity:1;
    transform:translateY(0);
}

.wp-text-light{
    color:rgba(248,244,239,0.85);
    max-width:50ch;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.5s ease 0.15s,transform 0.5s ease 0.15s;
}

.wp-text-light.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Horizon */
.wp-horizon{
    min-height:100vh;
    background:var(--charcoal);
    flex-direction:column;
}

.horizon-text{
    font-family:'Archivo Black',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    text-transform:uppercase;
    letter-spacing:-0.02em;
    color:var(--lemon);
    text-align:center;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.horizon-text.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .flat-tree,.flat-mountain{display:none}
    .banner-title{
        font-size:clamp(3rem,15vw,6rem);
    }
}

@media(prefers-reduced-motion:reduce){
    .wp-heading,.wp-text,.wp-heading-large,.wp-text-light,.horizon-text{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .saekdong-animated span{animation:none;opacity:1}
    .morph-marker.in-view .morph-shape{animation:none}
    .progress-bar{transition:none}
}