/* mang.quest -- art-deco network pavilion */
/* Palette: #B8860B brass, #6B4E37 sienna, #C17A56 terracotta, #1A1610 loam, #252017 umber, #2D8B7A teal, #6B5B8A violet, #E8DCC8 parchment, #9A8B78 clay, #D4A843 gilded */

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

:root{
    --brass:#B8860B;
    --sienna:#6B4E37;
    --terracotta:#C17A56;
    --loam:#1A1610;
    --umber:#252017;
    --teal:#2D8B7A;
    --violet:#6B5B8A;
    --parchment:#E8DCC8;
    --clay:#9A8B78;
    --gilded:#D4A843;
    --spring:cubic-bezier(0.34,1.56,0.64,1);
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--loam);
    color:var(--parchment);
    font-family:'Crimson Pro',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.005em;
    overflow-x:hidden;
    position:relative;
}

/* Aurora background */
.aurora-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.aurora-layer{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:0.1;
}

.aurora-1{
    width:60vw;height:60vw;
    background:radial-gradient(circle,var(--teal),transparent 70%);
    top:-10%;left:-10%;
    animation:auroraFloat1 12s ease-in-out infinite alternate;
}

.aurora-2{
    width:50vw;height:50vw;
    background:radial-gradient(circle,var(--violet),transparent 70%);
    bottom:-15%;right:-10%;
    animation:auroraFloat2 16s ease-in-out infinite alternate;
}

@keyframes auroraFloat1{
    0%{transform:translate(0,0)}
    100%{transform:translate(10vw,8vh)}
}

@keyframes auroraFloat2{
    0%{transform:translate(0,0)}
    100%{transform:translate(-8vw,-6vh)}
}

/* Art-deco navigation */
.deco-nav{
    position:fixed;
    top:0;left:0;right:0;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    z-index:100;
    background:var(--loam);
    border-top:2px solid var(--brass);
    border-bottom:2px solid var(--brass);
}

.nav-diamond{
    width:6px;height:6px;
    background:var(--gilded);
    transform:rotate(45deg);
    flex-shrink:0;
}

.nav-chevron{
    width:0;height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:6px solid var(--brass);
    opacity:0.4;
    transform:rotate(-90deg);
    flex-shrink:0;
}

.nav-item{
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--clay);
    text-decoration:none;
    position:relative;
    padding:0 0.3rem;
    transition:color 0.3s ease;
}

.nav-item.active{
    color:var(--gilded);
}

.nav-item.active::after{
    content:'';
    position:absolute;
    bottom:-8px;
    left:0;right:0;
    height:2px;
    background:var(--gilded);
    transition:left 0.4s var(--spring);
}

/* Sections */
.section{
    min-height:100vh;
    position:relative;
    z-index:2;
    padding:clamp(3rem,6vw,6rem) clamp(2rem,4vw,4rem);
    padding-top:clamp(4rem,8vw,8rem);
}

/* Section 1: Gateway */
.section-gateway{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.archway{
    position:relative;
    width:clamp(250px,50vw,500px);
    height:clamp(200px,40vw,400px);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s var(--spring);
}

.archway.revealed{
    opacity:1;
    transform:translateY(0);
}

.arch-ring{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    border:2px solid var(--brass);
    border-bottom:none;
    border-radius:50% 50% 0 0;
}

.arch-ring-1{width:100%;height:90%;opacity:0.6}
.arch-ring-2{width:75%;height:70%;opacity:0.8}
.arch-ring-3{width:50%;height:50%}

.arch-node{
    position:absolute;
    width:8px;height:8px;
    background:var(--gilded);
    transform:translate(-50%,-50%) rotate(45deg);
}

.medallion{
    position:absolute;
    bottom:30%;left:50%;
    transform:translateX(-50%);
    width:clamp(100px,15vw,200px);
    height:clamp(100px,15vw,200px);
    border-radius:50%;
    border:2px solid var(--brass);
    background:var(--loam);
    display:flex;
    align-items:center;
    justify-content:center;
}

.medallion-char{
    font-family:'Noto Serif KR',serif;
    font-weight:700;
    font-size:clamp(2.5rem,5vw,5rem);
    color:var(--gilded);
}

.filament-svg{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
}

.gateway-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,7vw,7.5rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--parchment);
    line-height:1.1;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.letter-reveal{
    display:inline-block;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.5s ease,transform 0.5s var(--spring);
}

.letter-reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.gateway-sub{
    font-family:'Josefin Sans',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.5vw,1.4rem);
    letter-spacing:0.06em;
    color:var(--clay);
    margin-top:1rem;
    opacity:0;
    transition:opacity 0.8s ease 0.8s;
}

.gateway-sub.revealed{opacity:1}

/* Section 2: Exchange Floor */
.section-exchange{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:60vh;
}

.chevron-bg{
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(60deg,transparent,transparent 20px,rgba(184,134,11,0.06) 20px,rgba(184,134,11,0.06) 22px),
        repeating-linear-gradient(-60deg,transparent,transparent 20px,rgba(184,134,11,0.06) 20px,rgba(184,134,11,0.06) 22px);
    pointer-events:none;
}

.exchange-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:48px;
    max-width:1000px;
    width:100%;
    padding:clamp(2rem,4vw,5rem);
    position:relative;
}

.exchange-col{
    background:var(--umber);
    border-top:1px solid var(--brass);
    padding:clamp(1.5rem,2vw,2.5rem);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s var(--spring);
}

.exchange-col.revealed{
    opacity:1;
    transform:translateY(0);
}

.exchange-col:nth-child(2){transition-delay:0.15s}
.exchange-col:nth-child(3){transition-delay:0.3s}

.deco-icon{
    width:64px;height:64px;
    margin-bottom:1rem;
}

.icon-draw{
    stroke-dasharray:300;
    stroke-dashoffset:300;
    transition:stroke-dashoffset 0.8s ease-out;
}

.exchange-col.revealed .icon-draw{
    stroke-dashoffset:0;
}

.col-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--parchment);
    margin-bottom:0.75rem;
}

.col-body{
    font-family:'Crimson Pro',serif;
    font-weight:400;
    color:var(--parchment);
    line-height:1.75;
}

/* Section 3: Conduit */
.section-conduit{
    display:flex;
    position:relative;
    padding-left:clamp(4rem,10vw,10rem);
}

.conduit-line{
    position:absolute;
    left:60px;
    top:0;bottom:0;
    width:2px;
    background:var(--brass);
}

.conduit-node{
    position:absolute;
    left:-4px;
    width:10px;height:10px;
    background:var(--gilded);
    transform:rotate(45deg);
    transition:transform 0.3s var(--spring);
}

.conduit-node.pulse{
    transform:rotate(45deg) scale(1.15);
}

.conduit-column{
    max-width:560px;
    display:flex;
    flex-direction:column;
    gap:clamp(2rem,4vw,4rem);
    padding:clamp(2rem,4vw,4rem) 0;
}

.conduit-block{
    border-left:2px solid var(--brass);
    padding-left:clamp(1rem,2vw,2rem);
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s ease,transform 0.6s var(--spring),border-left-width 0.2s ease;
}

.conduit-block.revealed{
    opacity:1;
    transform:translateY(0);
    border-left-width:4px;
}

.conduit-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.3rem,2.5vw,2rem);
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--parchment);
    margin-bottom:0.5rem;
}

.conduit-body{
    font-family:'Crimson Pro',serif;
    font-weight:400;
    color:var(--parchment);
    line-height:1.75;
}

/* Section 4: Terminus */
.section-terminus{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.terminus-medallion{
    position:relative;
    width:clamp(200px,35vw,280px);
    height:clamp(200px,35vw,280px);
    margin-bottom:2rem;
    opacity:0;
    transform:scale(0.9);
    transition:opacity 1s ease,transform 1s var(--spring);
}

.terminus-medallion.revealed{
    opacity:1;
    transform:scale(1);
}

.medallion-border{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px solid var(--gilded);
}

.filament-rays{
    position:absolute;
    inset:-60px;
}

.filament-ray{
    position:absolute;
    width:1px;
    height:60px;
    background:var(--brass);
    left:50%;top:0;
    transform-origin:50% calc(50% + 60px);
    opacity:0;
    transition:opacity 0.6s ease,height 0.8s var(--spring);
}

.terminus-medallion.revealed .filament-ray{
    opacity:0.5;
}

.medallion-inner{
    position:absolute;
    inset:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}

.terminus-text{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1.1rem);
    letter-spacing:0.05em;
    color:var(--parchment);
    line-height:1.5;
}

.terminus-domain{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,3rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gilded);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease 0.5s,transform 0.8s var(--spring) 0.5s;
}

.terminus-domain.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .exchange-grid{grid-template-columns:1fr;gap:2rem}
    .section-conduit{padding-left:3rem}
    .conduit-line{left:30px}
    .deco-nav{gap:0.4rem}
    .nav-item{font-size:0.55rem;letter-spacing:0.08em}
    .nav-chevron{display:none}
    .archway{width:80vw;height:60vw}
}

@media(prefers-reduced-motion:reduce){
    .archway,.exchange-col,.conduit-block,.terminus-medallion,.terminus-domain,.gateway-sub{
        opacity:1;transform:none;transition:none;
    }
    .letter-reveal{opacity:1;transform:none;transition:none}
    .icon-draw{stroke-dashoffset:0;transition:none}
    .aurora-layer{animation:none}
    .conduit-node{transition:none}
}