/* gunsul.quest — Construction as Meditation */
/* Palette: #1A1C20, #2A2D32, #4A4F57, #7B8794, #9EA3AC, #B0B7C0, #C8CDD3, #D6D9DE, #F0EDE8, #B8A88A */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #1A1C20;
    color: #C8CDD3;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== ZONE SYSTEM ===== */
.zone {
    position: relative;
    overflow: hidden;
}

/* ===== ZONE 1: THE THRESHOLD ===== */
.zone-threshold {
    background-color: #1A1C20;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.threshold-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image:
        linear-gradient(to right, #C8CDD3 1px, transparent 1px),
        linear-gradient(to bottom, #C8CDD3 1px, transparent 1px);
    background-size: 80px 80px;
}

.threshold-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(96px, 15vw, 200px);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #C8CDD3;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.05em;
    color: #7B8794;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.hero-subtitle em {
    font-style: italic;
}

.threshold-elevation {
    width: clamp(300px, 50vw, 600px);
    margin-top: 24px;
    opacity: 0;
    animation: fadeIn 2s ease 1.5s forwards;
}

.threshold-elevation .arch-svg line {
    stroke-dasharray: var(--path-length, 800);
    stroke-dashoffset: var(--path-length, 800);
    transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.threshold-elevation .arch-svg.drawn line {
    stroke-dashoffset: 0;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeIn 1s ease 3s forwards;
    z-index: 2;
}

.scroll-dot {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ===== ZONE 2: THE FOUNDATION ===== */
.zone-foundation {
    background-color: #F0EDE8;
    min-height: 80vh;
    position: relative;
}

.marble-veins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.foundation-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 640px) minmax(0, 320px) 1fr;
    gap: 60px;
    padding: 120px 24px;
    position: relative;
    z-index: 1;
    min-height: 80vh;
    align-items: start;
}

.foundation-text {
    grid-column: 2 / 3;
}

.foundation-text .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #2A2D32;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.foundation-text .section-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.body-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 300;
    line-height: 1.75;
    color: #4A4F57;
    max-width: 640px;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.body-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.foundation-diagram {
    grid-column: 3 / 4;
    width: 100%;
    max-width: 320px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;
}

.foundation-diagram.visible {
    opacity: 1;
    transform: translateY(0);
}

.foundation-diagram .arch-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG line draw for foundation diagram */
.foundation-diagram .arch-svg line,
.foundation-diagram .arch-svg polyline {
    stroke-dasharray: var(--path-length, 600);
    stroke-dashoffset: var(--path-length, 600);
    transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.foundation-diagram .arch-svg.drawn line,
.foundation-diagram .arch-svg.drawn polyline {
    stroke-dashoffset: 0;
}

/* ===== ZONE 3: THE STRUCTURE ===== */
.zone-structure {
    background-color: #2A2D32;
    min-height: 100vh;
    padding: 120px 24px;
}

.structure-container {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    padding-left: 40px;
}

.construction-line-vertical {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: repeating-linear-gradient(
        to bottom,
        #7B8794 0px,
        #7B8794 4px,
        transparent 4px,
        transparent 12px
    );
    opacity: 0;
    transition: opacity 1s ease;
}

.construction-line-vertical.visible {
    opacity: 1;
}

.concept-block {
    padding: 0 0 12vh 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.concept-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.concept-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #B8A88A;
    display: block;
    margin-bottom: 16px;
}

.concept-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    color: #C8CDD3;
    margin-bottom: 16px;
}

.concept-title em {
    font-style: italic;
}

.concept-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #9EA3AC;
    max-width: 560px;
}

/* ===== ZONE 4: THE MATERIAL ===== */
.zone-material {
    background-color: #2A2D32;
    min-height: 80vh;
    padding: 80px 24px 120px;
}

.material-container {
    max-width: 960px;
    margin: 0 auto;
}

.material-drawing {
    width: 100%;
    max-width: 60vw;
    margin: 0 auto 60px;
    opacity: 0;
    transition: opacity 1s ease;
}

.material-drawing.visible {
    opacity: 1;
}

.arch-svg-scroll {
    width: 100%;
    height: auto;
    display: block;
}

/* Scroll-synced SVG draw */
.arch-svg-scroll line,
.arch-svg-scroll rect,
.arch-svg-scroll polyline {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 0.1s linear;
}

.material-caption {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 0 0;
    border-top: 1px solid #4A4F57;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.material-caption.visible {
    opacity: 1;
    transform: translateY(0);
}

.caption-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #B8A88A;
    display: block;
    margin-bottom: 12px;
}

.caption-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: #7B8794;
}

/* ===== ZONE 5: THE HORIZON ===== */
.zone-horizon {
    background-color: #1A1C20;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horizon-content {
    text-align: center;
    padding: 80px 24px;
}

.horizon-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: #7B8794;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.horizon-quote.visible {
    opacity: 1;
    transform: translateY(0);
}

.horizon-quote em {
    font-style: italic;
}

.horizon-domain {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #4A4F57;
    opacity: 0;
    transition: opacity 1s ease 0.3s;
}

.horizon-domain.visible {
    opacity: 1;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(16px); }
}

/* ===== HORIZONTAL RULE ANIMATIONS ===== */
.hr-draw {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    overflow: visible;
}

.hr-draw line {
    stroke: #7B8794;
    stroke-width: 1;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hr-draw.drawn line {
    stroke-dashoffset: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .foundation-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 24px;
    }

    .foundation-text {
        grid-column: 1;
    }

    .foundation-diagram {
        grid-column: 1;
        max-width: 280px;
    }

    .material-drawing {
        max-width: 90vw;
    }
}

@media (max-width: 768px) {
    .zone-structure {
        padding: 80px 20px;
    }

    .structure-container {
        padding-left: 30px;
    }

    .concept-block {
        padding-bottom: 8vh;
    }
}

@media (max-width: 480px) {
    .hero-title {
        letter-spacing: 0.08em;
    }

    .threshold-elevation {
        width: 90vw;
    }
}