:root { /* compliance terms: labels parts "건설 STUDIO" cyan. After delay (Google IntersectionObserver triggers threshold duration: 2-3 seconds high-contrast transitional serifs creating unexpected editorial warmth deep-ocean cyberpunk environment. serif-mono hierarchy (serifs narrative massive (clamp(3rem */ }

:root {
    --abyss: #041c2c;
    --trench: #0a3d5c;
    --steel: #a8c8d8;
    --glacial: #e8f4f8;
    --bioluminescent: #0ef5e3;
    --coral: #d4854a;
    --blueprint: #1a5c7a;
    --deepest: #021520;
    --display: "Playfair Display", Georgia, serif;
    --serif: "Source Serif 4", Georgia, serif;
    --mono: "IBM Plex Mono", "Courier New", monospace;
    --lift: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--abyss);
    color: var(--steel);
    font-family: var(--serif);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.72;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(10, 61, 92, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 61, 92, 0.08) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.28;
}

main, .nav-trigger, .nav-overlay, .depth-gauge { position: relative; z-index: 2; }
.stratum {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7rem 2rem;
    isolation: isolate;
}
.stratum-00 { background: #041c2c; }
.stratum-01 { background: #041b2a; }
.stratum-02 { background: #031a28; }
.stratum-03 { background: #031824; }
.stratum-04 { background: #021722; }
.stratum-05 { background: #021520; min-height: 72vh; }

.stratum-content, .footer-content {
    width: min(720px, 90vw);
    position: relative;
    z-index: 3;
}
.hero-content { text-align: center; }
h1, h2 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--glacial);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.hero-title { font-size: clamp(3rem, 8vw, 6rem); }
.hero-subtitle {
    margin-top: 1rem;
    font-family: var(--mono);
    color: var(--bioluminescent);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 2rem; }
p { max-width: 62ch; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease, transform 800ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.hero-content { animation: heroRise 1100ms ease 180ms forwards; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

.depth-gauge {
    position: fixed;
    left: 3rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(14, 245, 227, 0.3);
    pointer-events: none;
    opacity: 0;
    animation: gaugeFade 900ms ease 1.5s forwards;
}
@keyframes gaugeFade { to { opacity: 1; } }
.depth-gauge span {
    position: absolute;
    top: calc(var(--tick) * 100vh + 18px);
    left: 18px;
    width: 8rem;
    font-family: var(--mono);
    color: rgba(14, 245, 227, 0.72);
    font-size: 10px;
    letter-spacing: 0.08em;
}
.depth-gauge span::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0.62em;
    width: 18px;
    height: 1px;
    background: rgba(14, 245, 227, 0.45);
}

.stratum-beam {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 2px;
    transform: translateX(-50%);
    background: var(--trench);
}
.stratum-beam span {
    position: absolute;
    left: max(1rem, calc(50vw - 360px));
    top: 0.9rem;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--bioluminescent);
    letter-spacing: 0.08em;
}

.diagram {
    width: 100%;
    margin-top: 3rem;
    border: 1px solid rgba(26, 92, 122, 0.4);
    padding: 4px;
    background-color: rgba(4, 28, 44, 0.46);
    transition: transform var(--lift), box-shadow var(--lift), border-color var(--lift);
}
.hover-lift:hover, .nav-trigger:hover, .nav-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(14, 245, 227, 0.08);
    border-color: rgba(212, 133, 74, 0.6);
}
.blueprint { width: 100%; height: auto; display: block; }
.line, .accent, .callout-line {
    fill: none;
    stroke: var(--blueprint);
    stroke-width: 1.4;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2600ms ease;
}
.accent { stroke: var(--bioluminescent); stroke-width: 1; }
.callout-line { stroke: var(--bioluminescent); stroke-dasharray: 6 9; }
.dashed { stroke-dasharray: 16 8; }
.faint { opacity: 0.65; }
.in-view .line, .in-view .accent, .in-view .callout-line { stroke-dashoffset: 0; }
.node { fill: var(--bioluminescent); opacity: 0; transition: opacity 600ms ease 1700ms; }
.in-view .node { opacity: 0.65; }
.svg-label, .caption {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--bioluminescent);
    color: var(--bioluminescent);
    letter-spacing: 0.08em;
}
.caption { padding: 1rem; }

.grid-stratum::before, .structure-diagram::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(30deg, transparent 0 48px, rgba(10, 61, 92, 0.12) 49px 50px),
        repeating-linear-gradient(150deg, transparent 0 48px, rgba(10, 61, 92, 0.12) 49px 50px);
}
.structure-diagram { position: relative; min-height: 390px; overflow: hidden; }
.wireframe { position: absolute; inset: 48px 68px; transform: skewY(-10deg); }
.wireframe i {
    position: absolute;
    display: block;
    background: var(--blueprint);
    transform-origin: left center;
    opacity: 0;
    transition: opacity 800ms ease, transform 1600ms ease;
}
.wireframe i:nth-child(1), .wireframe i:nth-child(2), .wireframe i:nth-child(3), .wireframe i:nth-child(4) { width: 2px; height: 260px; bottom: 0; transform: scaleY(0); }
.wireframe i:nth-child(1) { left: 8%; } .wireframe i:nth-child(2) { left: 35%; height: 310px; } .wireframe i:nth-child(3) { left: 65%; height: 310px; } .wireframe i:nth-child(4) { left: 92%; }
.wireframe i:nth-child(n+5) { height: 2px; width: 86%; left: 7%; transform: scaleX(0); }
.wireframe i:nth-child(5) { top: 18%; } .wireframe i:nth-child(6) { top: 46%; background: var(--bioluminescent); } .wireframe i:nth-child(7) { top: 74%; } .wireframe i:nth-child(8) { top: 96%; background: var(--bioluminescent); }
.in-view .wireframe i { opacity: 1; transform: scale(1); }

.lens-flare {
    position: absolute;
    left: calc(50% - 420px);
    top: -38px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 245, 227, 0.4), rgba(14, 245, 227, 0.12) 36%, transparent 70%);
    mix-blend-mode: screen;
    animation: lensPulse 6s ease-in-out infinite;
}
.flare-left { left: calc(50% - 470px); top: 18%; }
@keyframes lensPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.4; } }

.scroll-chevron {
    position: absolute;
    left: 50%;
    bottom: -30vh;
    width: 26px;
    height: 26px;
    border-right: 1px solid var(--bioluminescent);
    border-bottom: 1px solid var(--bioluminescent);
    transform: translateX(-50%) rotate(45deg);
    animation: chevronPulse 1.8s ease-in-out infinite;
}
@keyframes chevronPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

.nav-trigger {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(14, 245, 227, 0.35);
    border-radius: 50%;
    background: rgba(4, 28, 44, 0.65);
    color: var(--bioluminescent);
    font: 11px var(--mono);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform var(--lift), box-shadow var(--lift), border-color var(--lift);
}
.nav-trigger::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--bioluminescent);
    border-radius: 50%;
    animation: navPulse 2s ease-in-out infinite;
}
@keyframes navPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0; transform: scale(1.35); } }
.nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: min(360px, 100vw);
    height: 100vh;
    padding: 6rem 2rem 2rem;
    background: rgba(4, 28, 44, 0.95);
    backdrop-filter: blur(8px);
    border-left: 1px solid rgba(14, 245, 227, 0.22);
    transform: translateX(100%);
    transition: transform var(--lift);
    z-index: 10;
}
.nav-overlay.active { transform: translateX(0); }
.nav-link {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(26, 92, 122, 0.45);
    color: var(--steel);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform var(--lift), color var(--lift), box-shadow var(--lift);
}
.nav-link:hover, .nav-link.active { color: var(--coral); }

.particle-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}
.particle-field::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(14, 245, 227, 0.12);
    box-shadow: 8vw 20vh rgba(14,245,227,.08), 18vw 72vh rgba(14,245,227,.16), 28vw 42vh rgba(14,245,227,.06), 37vw 88vh rgba(14,245,227,.13), 46vw 12vh rgba(14,245,227,.09), 58vw 61vh rgba(14,245,227,.18), 68vw 34vh rgba(14,245,227,.08), 78vw 77vh rgba(14,245,227,.14), 88vw 22vh rgba(14,245,227,.1), 94vw 54vh rgba(14,245,227,.07), 12vw 48vh rgba(14,245,227,.18), 23vw 14vh rgba(14,245,227,.09), 51vw 84vh rgba(14,245,227,.12), 72vw 9vh rgba(14,245,227,.1), 83vw 92vh rgba(14,245,227,.15), 6vw 91vh rgba(14,245,227,.06), 33vw 26vh rgba(14,245,227,.15), 64vw 48vh rgba(14,245,227,.07), 91vw 68vh rgba(14,245,227,.18), 41vw 57vh rgba(14,245,227,.1);
    animation: particleDrift 20s linear infinite;
}
@keyframes particleDrift { to { transform: translateY(-200px); } }

.completion { padding-bottom: 24vh; }
.footer-content { text-align: center; font-family: var(--mono); color: var(--bioluminescent); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-content p + p { margin: 1rem auto 0; color: rgba(14, 245, 227, 0.55); }

@media (max-width: 768px) {
    .depth-gauge { display: none; }
    .stratum { padding: 6rem 1rem; }
    .stratum-content, .footer-content { width: 90vw; }
    .stratum-beam span { left: 1rem; }
    .nav-trigger { top: 1rem; right: 1rem; width: 38px; height: 38px; }
    .wireframe { inset: 56px 30px; }
}