/* concengine.net -- terminal mountain aesthetic */

/* ============================================
   reset and base
   ============================================ */

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

html {
    scroll-behavior: smooth;
    overflow: hidden;
    height: 100%;
}

body {
    background: #0a0e1a;
    color: #94a3b8;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    line-height: 1.8;
    text-transform: lowercase;
    overflow: hidden;
    height: 100%;
}

/* ============================================
   scroll snap container
   ============================================ */

#snap-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* ============================================
   scroll progress bar
   ============================================ */

#scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 2px;
    height: 0%;
    background: #38bdf8;
    z-index: 100;
    transition: height 0.1s linear;
}

/* ============================================
   panels / sections
   ============================================ */

.panel {
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    background: #0a0e1a;
    overflow: hidden;
}

.panel.alt-bg {
    background: #0f1629;
}

/* ============================================
   contour background
   ============================================ */

.contour-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.8s ease;
}

.panel.in-view .contour-bg {
    opacity: 0.05;
}

/* ============================================
   tick marks (right edge)
   ============================================ */

.tick-marks {
    position: absolute;
    top: 0;
    right: 12px;
    width: 8px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 49px,
        #1e293b 49px,
        #1e293b 50px
    );
    mask-image: linear-gradient(to bottom, transparent 5%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, transparent 95%);
}

/* ============================================
   section content
   ============================================ */

.section-content {
    position: relative;
    z-index: 2;
    padding-left: 10vw;
    max-width: 70vw;
}

/* ============================================
   prompt line
   ============================================ */

.prompt-line {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: #38bdf8;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    white-space: nowrap;
}

.panel.in-view .prompt-line {
    opacity: 1;
    transform: translateX(0);
}

.prompt-prefix {
    font-family: 'Fira Code', monospace;
    color: #38bdf8;
}

.prompt-text {
    color: #94a3b8;
}

/* ============================================
   cursor
   ============================================ */

.cursor {
    display: inline-block;
    color: #38bdf8;
    animation: blink 1s step-end infinite;
    font-family: 'Fira Code', monospace;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================
   section heading
   ============================================ */

.section-heading {
    font-family: 'Space Mono', monospace;
    font-size: 48px;
    font-weight: 400;
    color: #e2e8f0;
    margin-bottom: 2rem;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: 0.1s;
}

.section-heading strong {
    font-weight: 700;
}

.panel.in-view .section-heading {
    opacity: 1;
}

/* ============================================
   section body
   ============================================ */

.section-body p {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    line-height: 1.8;
    color: #94a3b8;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.panel.in-view .section-body p {
    opacity: 1;
    transform: translateY(0);
}

/* stagger delays for body lines */
.panel.in-view .section-body p:nth-child(1) { transition-delay: 0.25s; }
.panel.in-view .section-body p:nth-child(2) { transition-delay: 0.29s; }
.panel.in-view .section-body p:nth-child(3) { transition-delay: 0.33s; }
.panel.in-view .section-body p:nth-child(4) { transition-delay: 0.37s; }
.panel.in-view .section-body p:nth-child(5) { transition-delay: 0.41s; }
.panel.in-view .section-body p:nth-child(6) { transition-delay: 0.45s; }
.panel.in-view .section-body p:nth-child(7) { transition-delay: 0.49s; }
.panel.in-view .section-body p:nth-child(8) { transition-delay: 0.53s; }
.panel.in-view .section-body p:nth-child(9) { transition-delay: 0.57s; }
.panel.in-view .section-body p:nth-child(10) { transition-delay: 0.61s; }
.panel.in-view .section-body p:nth-child(11) { transition-delay: 0.65s; }
.panel.in-view .section-body p:nth-child(12) { transition-delay: 0.69s; }

/* ============================================
   altitude indicator
   ============================================ */

.altitude-indicator {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: #334155;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 0.2s ease;
    transition-delay: 0.7s;
    z-index: 2;
}

.panel.in-view .altitude-indicator {
    opacity: 1;
}

/* ============================================
   section dividers
   ============================================ */

.section-divider {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    color: #334155;
    text-align: center;
    padding: 0;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    scroll-snap-align: none;
}

.section-divider.ridgeline {
    padding: 0;
    background: #0a0e1a;
}

.section-divider.ridgeline svg {
    display: block;
    width: 100%;
    height: 40px;
}

/* ============================================
   boot sequence (section 1)
   ============================================ */

#section-boot {
    justify-content: flex-start;
    padding: 0;
}

.boot-content {
    position: relative;
    z-index: 2;
    padding: 3rem 10vw;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#boot-lines {
    margin-top: 2rem;
}

.boot-line {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    color: #e2e8f0;
    line-height: 2;
    opacity: 0;
    transition: opacity 0.15s ease;
    text-transform: none;
}

.boot-line.ok {
    color: #e2e8f0;
}

.boot-line .status-ok {
    text-transform: uppercase;
}

.boot-line .status-fail {
    color: #f97316;
    text-transform: uppercase;
}

#ascii-mountain {
    margin-top: 1.5rem;
    transition: opacity 0.6s ease;
}

#ascii-mountain pre {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    line-height: 1.2;
    color: #38bdf8;
    text-transform: none;
    white-space: pre;
}

#boot-prompt {
    margin-top: 1.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
}

#boot-prompt .prompt-prefix {
    color: #38bdf8;
}

#boot-prompt .prompt-text {
    color: #94a3b8;
}

.hidden {
    opacity: 0;
}

.visible {
    opacity: 1;
}

/* ============================================
   terminal links
   ============================================ */

.terminal-link {
    color: #38bdf8;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0 2px;
}

.terminal-link:hover {
    background: #162040;
    text-decoration: none;
}

.terminal-link:hover::after {
    content: '_';
    animation: blink 1s step-end infinite;
    color: #38bdf8;
}

.cta-link {
    color: #f97316;
    text-decoration-color: #f97316;
}

.cta-link:hover {
    background: #162040;
    color: #f97316;
}

/* ============================================
   final cursor section
   ============================================ */

#section-final {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0e1a;
}

.final-cursor-wrap {
    text-align: center;
}

.final-cursor {
    font-size: 24px;
    color: #38bdf8;
}

/* ============================================
   shutdown animation
   ============================================ */

#section-summit .section-body p.shutting-down {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================
   contour svg patterns
   ============================================ */

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

.contour-bg path {
    fill: none;
    stroke: #162040;
    stroke-width: 0.5;
}

/* ============================================
   responsive adjustments
   ============================================ */

@media (max-width: 768px) {
    .section-content {
        padding-left: 5vw;
        max-width: 90vw;
    }

    .section-heading {
        font-size: 32px;
    }

    .boot-content {
        padding: 2rem 5vw;
    }

    #ascii-mountain pre {
        font-size: 6px;
    }

    .altitude-indicator {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .section-heading {
        font-size: 24px;
    }

    #ascii-mountain pre {
        font-size: 4.5px;
    }

    .prompt-line {
        font-size: 12px;
    }
}