/* continuum.quest -- burnt-orange terminal depth-peel
   Design typography tokens: Fira Code" (Google Fonts), muted ash color,
   Commissioner variable weight, IntersectionObserver triggers (threshold: 0.2). */

:root {
    --void: #0d0d0d;
    --soot: #1a1712;
    --molten: #d4731a;
    --amber: #ffb347;
    --sienna: #e8cba8;
    --ash: #7a6b5a;
    --forge: #c44125;
    --deep-char: #12100e;
    --ember: #b5651d;

    --panel-shadow: 0 12px 40px #12100e, 0 2px 0 rgba(212, 115, 26, 0.15);
    --glow: 0 0 20px rgba(212, 115, 26, 0.4);
    --ease-energy: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
}

html {
    background: var(--void);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--void);
    color: var(--sienna);
    font-family: 'Commissioner', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Noise layer ---------- */
.noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 500ms ease;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.45 0 0 0 0 0.10 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 100px 100px;
    animation: noise-shift 0.1s steps(1) infinite;
}

body.boot .noise-layer {
    opacity: 0.06;
}

@keyframes noise-shift {
    0%   { background-position: 0 0; }
    25%  { background-position: -1px 1px; }
    50%  { background-position: 1px -1px; }
    75%  { background-position: -1px -1px; }
    100% { background-position: 1px 1px; }
}

/* ---------- Scan lines ---------- */
.scan-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8000;
    opacity: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 78px,
        rgba(212, 115, 26, 0.08) 78px,
        rgba(212, 115, 26, 0.08) 79px
    );
    animation: scan-breathe 3s ease-in-out infinite;
}

body.boot .scan-lines {
    opacity: 1;
    transition: opacity 800ms ease;
}

@keyframes scan-breathe {
    0%, 100% { filter: opacity(0.5); }
    50%      { filter: opacity(1); }
}

/* ---------- Depth stage (2deg rotated grid) ---------- */
.depth-stage {
    position: relative;
    width: 100%;
    perspective: 1200px;
    perspective-origin: 50% 40%;
    transform-style: preserve-3d;
}

/* ---------- Data stream Layer 1 ---------- */
.data-stream {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
}

body.boot .data-stream {
    opacity: 1;
}

.ds-column {
    position: absolute;
    top: -100vh;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--ember);
    opacity: 0.15;
    white-space: pre;
    will-change: transform;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateY(0);
}

.ds-column span {
    display: inline-block;
    color: var(--ember);
}

.ds-column span.bright {
    color: var(--amber);
    opacity: 1;
    text-shadow: 0 0 6px rgba(255, 179, 71, 0.6);
}

/* ---------- Sections ---------- */
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 12vh clamp(24px, 6vw, 96px);
    z-index: 2;
    transform: rotate(-2deg);
    transform-origin: center center;
}

.section > *:not(svg):not(.hero-frame):not(.coda-frame) {
    transform: rotate(2deg);
}

/* override: keep panels themselves rotated by 2deg via class */

.depth-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
    align-content: center;
    min-height: 150vh;
    padding: 20vh clamp(24px, 6vw, 96px);
}

.section-head {
    grid-column: 1 / -1;
    margin-bottom: 4vh;
    transform: rotate(0deg);
}

.section-index {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.18em;
    color: var(--ash);
    text-transform: uppercase;
    margin-bottom: 1.2em;
}

.section-sub {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.72rem, 1.2vw, 0.88rem);
    letter-spacing: 0.05em;
    color: var(--molten);
    margin-top: 1.2em;
}

/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hero-frame {
    position: relative;
    width: min(1180px, 92vw);
    height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 5vw, 72px);
    background: linear-gradient(135deg, rgba(26, 23, 18, 0.6), rgba(18, 16, 14, 0.9));
    transform: rotate(-1.5deg);
    box-shadow: var(--panel-shadow);
}

.hero-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.hero-border .draw-rect {
    fill: none;
    stroke: var(--molten);
    stroke-width: 2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.2s var(--ease-draw);
    filter: drop-shadow(0 0 6px rgba(212, 115, 26, 0.45));
}

.hero.drawn .hero-border .draw-rect {
    stroke-dashoffset: 0;
}

.hero-terminal {
    font-family: 'Fira Code', monospace;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--molten);
    letter-spacing: 0.05em;
    margin-bottom: 2.4rem;
    min-height: 1.6em;
}

.hero-terminal .prompt {
    color: var(--ash);
}

.hero-display {
    opacity: 0;
    transition: opacity 0.4s ease;
    margin-bottom: 2.8rem;
}

.hero-display.show {
    opacity: 1;
}

.logotype {
    font-family: 'Commissioner', 'Inter', sans-serif;
    text-transform: uppercase;
    line-height: 0.92;
    color: var(--amber);
    text-shadow: var(--glow);
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.logotype .word-main {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.logotype .word-sub {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 200;
    letter-spacing: 0.2em;
    color: var(--molten);
    text-shadow: 0 0 14px rgba(212, 115, 26, 0.35);
}

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.72rem, 1.1vw, 0.85rem);
    letter-spacing: 0.08em;
    color: var(--ash);
    text-transform: uppercase;
}

.hero-meta .meta-line.pulse {
    color: var(--molten);
    animation: pulse 2.4s ease-in-out infinite;
}

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

/* ---------- Typography: crescendo headlines ---------- */
.crescendo {
    font-family: 'Commissioner', 'Inter', sans-serif;
    text-transform: uppercase;
    line-height: 0.96;
    font-size: clamp(2.2rem, 6vw, 5rem);
    color: var(--amber);
    display: flex;
    flex-wrap: wrap;
    gap: 0.32em;
    margin-bottom: 0.8em;
    text-shadow: 0 0 24px rgba(212, 115, 26, 0.22);
}

.crescendo.big {
    font-size: clamp(2.6rem, 7vw, 5.8rem);
}

.crescendo.small {
    font-size: clamp(1.4rem, 3.6vw, 2.4rem);
    margin-bottom: 0.6em;
}

.crescendo .w1 { font-weight: 200; letter-spacing: 0.12em; color: var(--sienna); }
.crescendo .w2 { font-weight: 400; letter-spacing: 0.04em; color: var(--molten); }
.crescendo .w3 { font-weight: 600; letter-spacing: 0;      color: var(--amber); }
.crescendo .w4 { font-weight: 700; letter-spacing: -0.015em; color: var(--amber); }
.crescendo .w5 { font-weight: 800; letter-spacing: -0.03em; color: #fff2d6; text-shadow: var(--glow); }

/* ---------- Panels ---------- */
.panel {
    position: relative;
    background:
        linear-gradient(135deg, rgba(26, 23, 18, 0.96), rgba(18, 16, 14, 0.98)),
        var(--soot);
    padding: clamp(24px, 3.4vw, 48px);
    box-shadow: var(--panel-shadow);
    opacity: 0;
    transform: translateY(42px) rotate(0deg);
    transition: opacity 0.9s var(--ease-energy), transform 0.9s var(--ease-energy);
    will-change: transform, opacity;
}

.panel.reveal.in-view {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.panel-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.panel-border .draw-rect {
    fill: none;
    stroke: var(--molten);
    stroke-width: 2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.2s var(--ease-draw) 0.15s;
    filter: drop-shadow(0 0 4px rgba(212, 115, 26, 0.4));
}

.panel.in-view .panel-border .draw-rect {
    stroke-dashoffset: 0;
}

.panel-tag {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    letter-spacing: 0.12em;
    color: var(--ash);
    text-transform: uppercase;
    margin-bottom: 1.6em;
    display: inline-block;
    border-bottom: 1px solid rgba(212, 115, 26, 0.25);
    padding-bottom: 0.4em;
}

.panel p {
    color: var(--sienna);
    max-width: 62ch;
    margin-bottom: 1.2em;
}

.panel p:last-of-type {
    margin-bottom: 0;
}

.panel-chevrons {
    font-family: 'Fira Code', monospace;
    color: var(--molten);
    letter-spacing: 0.4em;
    font-size: 1.2rem;
    margin-top: 1.6em;
    opacity: 0.8;
}

/* Panel layout in depth-section grids */
.separation {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: center;
    min-height: 150vh;
    padding: 15vh clamp(24px, 6vw, 96px);
}

.panel-a {
    grid-column: 1 / span 7;
    grid-row: 1;
    transform: translateY(42px) rotate(-1.5deg);
    z-index: 3;
}

.panel-a.in-view {
    transform: translateY(0) rotate(-1.5deg);
}

.panel-b {
    grid-column: 6 / span 7;
    grid-row: 2;
    margin-top: -10vh;
    transform: translateY(42px) rotate(1.8deg);
    z-index: 4;
}

.panel-b.in-view {
    transform: translateY(0) rotate(1.8deg);
}

.panel-wide {
    grid-column: 2 / span 8;
    transform: translateY(42px) rotate(-1deg);
    z-index: 3;
}
.panel-wide.in-view { transform: translateY(0) rotate(-1deg); }

.panel-narrow {
    grid-column: 8 / span 4;
    margin-top: -6vh;
    transform: translateY(42px) rotate(2deg);
    z-index: 4;
}
.panel-narrow.in-view { transform: translateY(0) rotate(2deg); }

.panel-offset {
    grid-column: 1 / span 6;
    transform: translateY(42px) rotate(1.4deg);
    z-index: 3;
}
.panel-offset.in-view { transform: translateY(0) rotate(1.4deg); }

.panel-overlap {
    grid-column: 5 / span 8;
    margin-top: -8vh;
    transform: translateY(42px) rotate(-2deg);
    z-index: 4;
}
.panel-overlap.in-view { transform: translateY(0) rotate(-2deg); }

/* ---------- Data rows / kv pills ---------- */
.data-row {
    display: flex;
    gap: 1.6em;
    flex-wrap: wrap;
    margin-top: 1.8em;
    padding-top: 1.2em;
    border-top: 1px dashed rgba(212, 115, 26, 0.3);
}

.kv {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    color: var(--sienna);
}

.kv .k {
    color: var(--ash);
    letter-spacing: 0.08em;
}

.kv .v {
    color: var(--amber);
}

.mono {
    font-family: 'Fira Code', monospace;
    font-size: 0.95em;
}

.accent { color: var(--molten); }
.ash    { color: var(--ash); }

.cursor {
    display: inline-block;
    color: var(--molten);
    margin-left: 0.15em;
    font-family: 'Fira Code', monospace;
    transform: translateY(-0.05em);
    animation: blink 1s step-end infinite;
}

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

/* ---------- Clock grid ---------- */
.clock-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin-top: 2rem;
    padding: 12px;
    border: 1px solid rgba(212, 115, 26, 0.25);
    background: rgba(13, 13, 13, 0.4);
}

.clock-cell {
    aspect-ratio: 1 / 1;
    background: rgba(212, 115, 26, 0.05);
    border: 1px solid rgba(212, 115, 26, 0.15);
    transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.clock-cell.lit {
    background: rgba(255, 179, 71, 0.7);
    border-color: var(--amber);
    box-shadow: 0 0 10px rgba(255, 179, 71, 0.6);
}

/* ---------- Uptime ---------- */
.uptime {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    letter-spacing: 0.05em;
    line-height: 2;
}

.uptime-line {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
}

/* ---------- Depth indicator ---------- */
.depth-indicator {
    position: fixed;
    right: clamp(16px, 2.4vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 7000;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    font-family: 'Fira Code', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--ash);
    text-transform: uppercase;
    padding: 14px 16px;
    background: rgba(13, 13, 13, 0.6);
    border: 1px solid rgba(212, 115, 26, 0.25);
    opacity: 0;
    transition: opacity 600ms ease 400ms;
}

body.boot .depth-indicator {
    opacity: 1;
}

.depth-indicator .di-label {
    color: var(--ash);
    border-bottom: 1px solid rgba(212, 115, 26, 0.2);
    padding-bottom: 6px;
}
.depth-indicator .di-label.small {
    border-bottom: none;
    border-top: 1px solid rgba(212, 115, 26, 0.2);
    padding-top: 6px;
    color: var(--molten);
}

.depth-indicator ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.depth-indicator li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    opacity: 0.5;
    transition: opacity 300ms ease, color 300ms ease;
}

.depth-indicator li.active {
    opacity: 1;
    color: var(--amber);
}

.depth-indicator li.active .di-tick {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255, 179, 71, 0.7);
}

.di-tick {
    display: inline-block;
    width: 10px;
    height: 2px;
    background: var(--ash);
    transition: background 300ms ease, box-shadow 300ms ease;
}

/* ---------- CODA ---------- */
.coda {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12vh 6vw;
}

.coda-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: clamp(24px, 5vw, 72px);
    transform: rotate(-1.5deg);
    background: linear-gradient(180deg, rgba(18, 16, 14, 0.4), rgba(26, 23, 18, 0.9));
    max-width: 960px;
    width: 100%;
}

.coda-chevron {
    font-family: 'Fira Code', monospace;
    font-size: clamp(1rem, 2vw, 1.6rem);
    color: var(--molten);
    letter-spacing: 0.35em;
    opacity: 0.7;
}
.coda-chevron.flip { color: var(--ember); }

.coda-terminal {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    letter-spacing: 0.05em;
    line-height: 2;
    color: var(--ash);
    text-align: left;
    background: rgba(13, 13, 13, 0.6);
    padding: 1.4em 1.8em;
    border: 1px solid rgba(212, 115, 26, 0.3);
    box-shadow: var(--panel-shadow);
    min-width: min(480px, 80vw);
}

.sig {
    font-family: 'Fira Code', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: var(--ember);
    opacity: 0.6;
    text-transform: uppercase;
    margin-top: 1rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .panel { opacity: 1; transform: none; }
    .hero-display { opacity: 1; }
    .hero-border .draw-rect, .panel-border .draw-rect { stroke-dashoffset: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
    .depth-indicator { display: none; }
    .separation, .depth-section { grid-template-columns: repeat(6, 1fr); min-height: unset; padding: 10vh 20px; }
    .panel-a, .panel-b, .panel-wide, .panel-narrow, .panel-offset, .panel-overlap {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 0;
    }
    .panel-b, .panel-narrow, .panel-overlap { margin-top: 2vh; }
    .hero-frame { height: auto; min-height: 78vh; }
    .section { padding: 10vh 20px; }
}