/* gunsul.quest - Isometric Construction Yard */

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

:root{
    --structural-steel:#2C3E50;
    --formwork-ochre:#D4A03C;
    --rebar-red:#C0392B;
    --deep-foundation:#1A252F;
    --plaster-white:#ECF0F1;
    --blueprint-blue:#6B8FA3;
    --safety-orange:#E67E22;
    --concrete-medium:#3D566E;
}

html{scroll-behavior:smooth}

body{
    background:linear-gradient(180deg,var(--deep-foundation) 0%,var(--structural-steel) 100%);
    color:var(--plaster-white);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.1vw,1.1rem);
    letter-spacing:0.02em;
    line-height:1.65;
    overflow-x:hidden;
    background-attachment:fixed;
}

/* Isometric grid overlay */
body::before{
    content:'';
    position:fixed;inset:0;
    pointer-events:none;
    opacity:0.06;
    background:
        repeating-linear-gradient(30deg,var(--blueprint-blue) 0,var(--blueprint-blue) 1px,transparent 1px,transparent 60px),
        repeating-linear-gradient(150deg,var(--blueprint-blue) 0,var(--blueprint-blue) 1px,transparent 1px,transparent 60px);
    z-index:0;
}

/* Elevator Shaft Navigation */
.elevator-shaft{
    position:fixed;
    left:0;top:0;
    width:56px;height:100vh;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
}

.shaft-frame{
    width:40px;
    height:80%;
    border:1px solid var(--concrete-medium);
    border-left:2px solid var(--blueprint-blue);
    border-right:2px solid var(--blueprint-blue);
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
    padding:10px 0;
    background:rgba(26,37,47,0.9);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.shaft-frame::before,.shaft-frame::after{
    content:'';
    position:absolute;
    left:50%;width:1px;height:100%;
    background:repeating-linear-gradient(to bottom,var(--concrete-medium) 0,var(--concrete-medium) 4px,transparent 4px,transparent 12px);
    transform:translateX(-50%);
}

.shaft-platform{
    position:absolute;
    width:32px;height:6px;
    background:var(--safety-orange);
    border-radius:1px;
    left:50%;transform:translateX(-50%);
    top:10%;
    transition:top 0.6s cubic-bezier(0.34,1.56,0.64,1);
    z-index:2;
}

.shaft-floor{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:0.55rem;
    color:var(--concrete-medium);
    text-align:center;
    cursor:pointer;
    transition:color 0.3s;
    z-index:3;
    word-break:keep-all;
}

.shaft-floor.active{
    color:var(--safety-orange);
}

.shaft-floor:hover{
    color:var(--formwork-ochre);
}

/* Phase sections */
.phase{
    min-height:100vh;
    position:relative;
    z-index:1;
}

.phase-content{
    display:flex;
    min-height:100vh;
}

.text-column{
    width:42%;
    padding:80px 40px 80px 80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.text-column p{
    margin-bottom:20px;
    color:var(--plaster-white);
}

.visual-column{
    width:58%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* I-beam separator */
.ibeam-separator{
    position:absolute;
    left:0;top:0;
    width:48px;height:100%;
    background:
        linear-gradient(90deg,var(--concrete-medium) 0,var(--concrete-medium) 4px,transparent 4px,transparent 44px,var(--concrete-medium) 44px,var(--concrete-medium) 48px);
    opacity:0.6;
}

.ibeam-separator::before{
    content:'';
    position:absolute;
    left:4px;right:4px;top:0;bottom:0;
    background:repeating-linear-gradient(to bottom,transparent 0,transparent 100px,var(--concrete-medium) 100px,var(--concrete-medium) 102px);
    opacity:0.4;
}

/* Hero */
.hero-title{
    font-family:'Chakra Petch','Noto Sans KR',sans-serif;
    font-size:clamp(3rem,8vw,10rem);
    font-weight:700;
    letter-spacing:0.3em;
    line-height:1.0;
    color:var(--blueprint-blue);
    text-transform:uppercase;
    margin-bottom:16px;
}

.hero-domain{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    color:var(--blueprint-blue);
    letter-spacing:0.05em;
    margin-bottom:40px;
}

.phase-heading-wrap{
    display:flex;align-items:baseline;gap:16px;
    margin-bottom:24px;
}

.phase-heading{
    font-family:'Chakra Petch',sans-serif;
    font-size:clamp(1.5rem,3.5vw,3.5rem);
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    line-height:1.0;
    color:var(--plaster-white);
}

.phase-label-ko{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    color:var(--formwork-ochre);
    word-break:keep-all;
}

/* Floor Slab Transitions */
.floor-slab{
    height:80px;
    position:relative;
    z-index:1;
    display:flex;flex-direction:column;
}

.slab-layer{
    flex:1;
}

.slab-finish{background:var(--concrete-medium)}
.slab-concrete{background:var(--structural-steel)}
.slab-rebar{background:repeating-linear-gradient(90deg,var(--rebar-red) 0,var(--rebar-red) 2px,var(--deep-foundation) 2px,var(--deep-foundation) 20px)}
.slab-aggregate{
    background:var(--deep-foundation);
    background-image:radial-gradient(circle 2px,var(--concrete-medium) 100%,transparent 100%);
    background-size:12px 12px;
}

/* Annotation system */
.annotation{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    font-weight:400;
    color:var(--blueprint-blue);
    position:absolute;
    white-space:nowrap;
}

/* Isometric Scenes */
.iso-scene{
    width:380px;height:380px;
    position:relative;
    margin-left:60px;
}

/* Foundation scene */
.iso-layer{
    position:absolute;
    width:200px;height:40px;
    left:50%;
    transform:translateX(-50%) skewX(-30deg);
    opacity:0;
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.iso-bedrock{background:var(--concrete-medium);bottom:40px}
.iso-gravel{background:#4a6274;bottom:80px}
.iso-clay{background:#5a4a3a;bottom:120px}
.iso-topsoil{background:#3a4a3a;bottom:160px}

.iso-layer.visible{opacity:1}

.iso-footing{
    position:absolute;
    bottom:160px;left:50%;
    transform:translateX(-50%) skewX(-30deg);
    width:160px;height:50px;
    background:var(--plaster-white);
    opacity:0;
    transition:opacity 0.8s ease;
    overflow:hidden;
}

.iso-footing.visible{opacity:0.9}

.rebar-grid{
    position:absolute;inset:0;
    background:
        repeating-linear-gradient(0deg,transparent 0,transparent 8px,var(--rebar-red) 8px,var(--rebar-red) 10px),
        repeating-linear-gradient(90deg,transparent 0,transparent 8px,var(--rebar-red) 8px,var(--rebar-red) 10px);
    opacity:0.5;
}

.annotation-footing{bottom:-20px;left:0}

/* Framework scene */
.steel-column{
    position:absolute;
    width:8px;
    height:0;
    background:var(--blueprint-blue);
    bottom:40px;
    transition:height 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

.col-1{left:60px}.col-2{left:160px}.col-3{left:260px}.col-4{left:360px}

.steel-beam{
    position:absolute;
    height:6px;
    width:0;
    background:var(--formwork-ochre);
    transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.beam-h1{left:60px;top:100px}.beam-h2{left:60px;top:200px}
.beam-v1{left:60px;top:100px;transform:rotate(90deg);transform-origin:left top}
.beam-v2{left:260px;top:100px;transform:rotate(90deg);transform-origin:left top}

.cross-brace{
    position:absolute;
    width:0;height:2px;
    background:var(--rebar-red);
    transform:rotate(45deg);
    transition:width 0.4s ease 0.8s;
}

.brace-1{left:70px;top:140px}
.brace-2{left:170px;top:140px;transform:rotate(-45deg)}

.iso-framework.visible .steel-column{height:200px}
.iso-framework.visible .steel-beam{width:200px}
.iso-framework.visible .cross-brace{width:120px}

.annotation-col{top:60px;right:10px}
.annotation-beam{bottom:60px;right:10px}

/* Exterior scene */
.curtain-panel{
    position:absolute;
    width:50px;height:60px;
    background:var(--concrete-medium);
    border:1px solid var(--blueprint-blue);
    opacity:0;
    transform:translateX(100px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.cp-glass{
    background:rgba(107,143,163,0.2);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.cp-1{left:80px;top:60px}.cp-2{left:140px;top:60px}.cp-3{left:200px;top:60px}
.cp-4{left:80px;top:130px}.cp-5{left:140px;top:130px}.cp-6{left:200px;top:130px}
.cp-7{left:260px;top:60px}.cp-8{left:260px;top:130px}

.iso-exterior.visible .curtain-panel{opacity:1;transform:translateX(0)}
.iso-exterior.visible .cp-2{transition-delay:80ms}
.iso-exterior.visible .cp-3{transition-delay:160ms}
.iso-exterior.visible .cp-4{transition-delay:240ms}
.iso-exterior.visible .cp-5{transition-delay:320ms}
.iso-exterior.visible .cp-6{transition-delay:400ms}
.iso-exterior.visible .cp-7{transition-delay:480ms}
.iso-exterior.visible .cp-8{transition-delay:560ms}

.building-shadow{
    position:absolute;
    bottom:20px;left:80px;
    width:240px;height:30px;
    background:var(--deep-foundation);
    opacity:0;
    transform:skewX(-30deg);
    transition:opacity 0.6s ease 0.7s;
}

.iso-exterior.visible .building-shadow{opacity:0.3}

.annotation-glass{bottom:20px;right:20px}

/* Interior scene */
.partition{
    position:absolute;
    width:0;height:80px;
    background:var(--plaster-white);
    opacity:0.8;
    transition:width 0.5s ease;
}

.wall-1{left:80px;top:80px}.wall-2{left:160px;top:140px}.wall-3{left:240px;top:80px}

.iso-interior.visible .partition{width:4px}

.conduit-svg{
    position:absolute;
    top:0;left:0;
    width:100%;height:75%;
}

.conduit{
    fill:none;
    stroke-width:2;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 2s ease;
}

.conduit-elec{stroke:var(--formwork-ochre)}
.conduit-data{stroke:var(--blueprint-blue)}
.conduit-hvac{stroke:var(--concrete-medium)}

.iso-interior.visible .conduit{stroke-dashoffset:0}

.floor-finish{
    position:absolute;
    bottom:30px;left:80px;
    width:240px;height:6px;
    background:var(--formwork-ochre);
    opacity:0;
    transition:opacity 0.5s ease 1.5s;
}

.iso-interior.visible .floor-finish{opacity:0.5}

.annotation-part{top:40px;left:20px}

/* Completion scene */
.complete-building{
    position:relative;
    width:200px;height:280px;
    margin:0 auto;
    transform:perspective(800px) rotateY(0deg);
    transition:transform 1s ease;
}

.iso-completion.visible .complete-building{
    transform:perspective(800px) rotateY(-5deg);
}

.bldg-base,.bldg-mid,.bldg-top{
    position:absolute;
    left:0;width:100%;
    border:2px solid var(--blueprint-blue);
}

.bldg-base{bottom:0;height:100px;background:var(--structural-steel)}
.bldg-mid{bottom:100px;height:100px;background:var(--concrete-medium)}
.bldg-top{bottom:200px;height:80px;background:var(--structural-steel)}

.bldg-shadow{
    position:absolute;
    bottom:-20px;left:-10px;
    width:220px;height:20px;
    background:var(--deep-foundation);
    opacity:0.3;
    transform:skewX(-20deg);
}

.annotation-total{top:0;right:-120px}
.annotation-area{bottom:20px;right:-120px}

.completion-domain{
    font-family:'Chakra Petch',sans-serif;
    font-size:clamp(2rem,4vw,4rem);
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--formwork-ochre);
    margin:30px 0 16px;
}

.completion-ko{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:700;
    font-size:1.2rem;
    color:var(--blueprint-blue);
    word-break:keep-all;
}

/* Impact vibration */
@keyframes impact{
    0%{transform:translateY(0)}
    25%{transform:translateY(-2px)}
    75%{transform:translateY(1px)}
    100%{transform:translateY(0)}
}

.impact-shake{
    animation:impact 200ms ease-out;
}

/* Responsive */
@media(max-width:768px){
    .elevator-shaft{width:40px}
    .shaft-frame{width:30px}
    .phase-content{flex-direction:column}
    .text-column{width:100%;padding:60px 20px 30px 60px}
    .visual-column{width:100%;min-height:50vh}
    .ibeam-separator{display:none}
    .iso-scene{width:280px;height:280px;margin:0 auto}
    .hero-title{letter-spacing:0.15em}
}