/* =========================================================
   BBOTTL.com — terminal cellar
   Palette: #1a0a10 #2d1320 #d4c5a9 #8a6b7a #a8324a #39ff7e #b89b5e #c45e3a
   Fonts:   JetBrains Mono · Space Mono · Cormorant Garamond
   ========================================================= */

:root {
    --bg: #1a0a10;
    --surface: #2d1320;
    --text: #d4c5a9;
    --text-soft: #8a6b7a;
    --accent: #a8324a;
    --phosphor: #39ff7e;
    --gold: #b89b5e;
    --warn: #c45e3a;

    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-display: 'Space Mono', 'JetBrains Mono', monospace;
    --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;

    --col-max: 720px;
    --pad-y: clamp(4rem, 8vw, 8rem);

    --scroll-y: 0;
}

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

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    text-shadow: 0 0 8px rgba(212, 197, 169, 0.15);
    background:
        radial-gradient(ellipse at 30% 10%, rgba(168, 50, 74, 0.08), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(184, 155, 94, 0.05), transparent 55%),
        var(--bg);
    background-attachment: fixed;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ---------- Lens flares ---------- */
.lens-flare {
    position: fixed;
    width: clamp(200px, 40vw, 600px);
    aspect-ratio: 3 / 1;
    filter: blur(40px);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
    will-change: transform;
}
.lens-flare--burgundy {
    top: 20%;
    left: 30%;
    background: radial-gradient(ellipse at center, rgba(168, 50, 74, 0.28) 0%, transparent 70%);
    transform: translate3d(0, calc(var(--scroll-y) * 0.18px), 0);
}
.lens-flare--gold {
    top: 55%;
    left: 65%;
    background: radial-gradient(ellipse at center, rgba(184, 155, 94, 0.22) 0%, transparent 72%);
    transform: translate3d(0, calc(var(--scroll-y) * -0.12px), 0);
}

/* ---------- Shell ---------- */
.terminal-shell {
    position: relative;
    z-index: 2;
}

.section {
    position: relative;
    min-height: 100dvh;
    padding: var(--pad-y) clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
}

.section > * {
    width: 100%;
    max-width: var(--col-max);
}

/* ---------- Section heads ---------- */
.section__head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.section__index {
    color: var(--text-soft);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}
.section__title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    color: var(--text);
}
.section__sub {
    color: var(--text-soft);
    font-size: 0.92rem;
}

/* ---------- Decorative rules ---------- */
.rule {
    color: var(--gold);
    text-align: center;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    opacity: 0.65;
    user-select: none;
}
.rule--equals { color: var(--gold); }
.rule--dot    { color: var(--text-soft); }
.rule--wave   { color: var(--accent); }

/* ---------- Section 0: Boot ---------- */
.section--boot {
    background: linear-gradient(180deg, #0d0509 0%, var(--bg) 100%);
}

.boot-window {
    width: min(100%, var(--col-max));
    background: var(--surface);
    border: 1px solid rgba(184, 155, 94, 0.25);
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.4),
        0 30px 80px -20px rgba(0,0,0,0.8),
        inset 0 0 80px rgba(168,50,74,0.08);
    overflow: hidden;
}

.boot-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: #1f0c16;
    border-bottom: 1px solid rgba(184,155,94,0.18);
}
.boot-bar__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--text-soft);
    opacity: 0.5;
}
.boot-bar__dot:nth-child(1){ background: var(--warn); }
.boot-bar__dot:nth-child(2){ background: var(--gold); }
.boot-bar__dot:nth-child(3){ background: var(--phosphor); opacity: 0.7;}
.boot-bar__title {
    margin-left: auto;
    color: var(--text-soft);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.boot-output {
    padding: 1.3rem 1.4rem 0.4rem;
    min-height: 12rem;
    color: var(--phosphor);
    text-shadow: 0 0 6px rgba(57,255,126,0.45);
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.boot-output .ok    { color: var(--phosphor); }
.boot-output .warn  { color: var(--warn); }
.boot-output .meta  { color: var(--text-soft); text-shadow: none;}
.boot-output .accent{ color: var(--accent); }

.boot-prompt {
    padding: 0.6rem 1.4rem 1.3rem;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.prompt-user { color: var(--phosphor); text-shadow: 0 0 6px rgba(57,255,126,0.4); }
.prompt-sep  { color: var(--text-soft); }
.prompt-path { color: var(--gold); }
.prompt-cmd  { color: var(--text); }
.prompt-mini { color: var(--accent); margin-right: 0.4rem; }

.cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    background: var(--phosphor);
    box-shadow: 0 0 12px rgba(57, 255, 126, 0.4);
    vertical-align: text-bottom;
    margin-left: 0.2em;
    animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.boot-skip {
    text-align: center;
    color: var(--text-soft);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.8rem;
    border-top: 1px dashed rgba(184,155,94,0.18);
    cursor: pointer;
    transition: color 0.2s;
}
.boot-skip:hover { color: var(--gold); }

/* ---------- Section 1: Map ---------- */
.section--map {
    background: linear-gradient(180deg, var(--bg) 0%, #150810 100%);
}
.map-stack {
    position: relative;
    width: 100%;
    min-height: 22rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 1rem;
    border: 1px dashed rgba(184,155,94,0.18);
    background: rgba(45, 19, 32, 0.4);
}
.map-layer {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: pre;
    color: var(--text-soft);
    text-align: center;
    margin: 0.6rem 0;
    will-change: transform;
}
.map-layer--bg { color: rgba(138,107,122,0.55); }
.map-layer--mid { color: var(--text); }
.map-layer--fg  { color: var(--gold); text-shadow: 0 0 8px rgba(184,155,94,0.25); }

.caption {
    color: var(--text-soft);
    font-size: 0.88rem;
    text-align: center;
}

/* ---------- Section 2: Archive ---------- */
.section--archive {
    background: linear-gradient(180deg, #150810 0%, #0f0309 100%);
}
.archive-log {
    list-style: none;
    width: 100%;
    border: 1px solid rgba(184,155,94,0.18);
    background: rgba(45,19,32,0.55);
    padding: 0.4rem 0;
}
.archive-row {
    display: grid;
    grid-template-columns: 4.5rem 9rem 1fr;
    grid-template-areas:
        "year region varietal"
        "year note   note";
    gap: 0.2rem 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px dashed rgba(184,155,94,0.10);
    font-size: 0.86rem;

    /* reveal */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    transition-delay: calc(var(--stagger-index, 0) * 100ms);
}
.archive-row:last-child { border-bottom: none; }
.archive-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.archive-row__year     { grid-area: year; color: var(--accent); font-weight: 700;}
.archive-row__region   { grid-area: region; color: var(--gold); }
.archive-row__varietal { grid-area: varietal; color: var(--text); }
.archive-row__note     {
    grid-area: note;
    color: var(--text-soft);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.region-map {
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: pre;
    text-align: center;
    opacity: 0.75;
}

/* ---------- Section 3: Process ---------- */
.section--process {
    background: linear-gradient(180deg, #0f0309 0%, #0a0207 100%);
}
.manpage {
    width: 100%;
    background: rgba(45,19,32,0.55);
    border: 1px solid rgba(184,155,94,0.2);
    padding: clamp(1rem, 3vw, 2rem);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.manpage__name {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.manpage__body { color: var(--text); }
.manpage__body code {
    background: rgba(168,50,74,0.12);
    color: var(--accent);
    padding: 0.1em 0.4em;
    border-radius: 2px;
}
.manpage__steps {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.step {
    counter-increment: step;
    padding-left: 2.6rem;
    position: relative;
}
.step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.05rem;
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-display);
}
.step__cmd {
    color: var(--phosphor);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(57,255,126,0.35);
}
.step__flag {
    color: var(--gold);
    margin-left: 0.6rem;
}
.step__desc {
    color: var(--text);
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

.barrel {
    color: var(--gold);
    font-size: 0.8rem;
    line-height: 1.15;
    text-align: center;
    white-space: pre;
    padding: 0.8rem 0;
    opacity: 0.5;
    transition: opacity 0.8s ease;
}
.barrel.is-visible { opacity: 1; }

/* ---------- Section 4: Root ---------- */
.section--root {
    background: linear-gradient(180deg, #0a0207 0%, #050103 100%);
    text-align: center;
}
.root-stage {
    position: relative;
    width: min(720px, 92vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.vine-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.root-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 0.1s linear;
    filter: drop-shadow(0 0 4px rgba(184,155,94,0.45));
}

.vine-quote {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
}
.vine-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    color: var(--text);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    line-height: 1.45;
    max-width: 22ch;
    text-shadow: 0 0 12px rgba(212,197,169,0.2);
}
.vine-quote cite {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--text-soft);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.ascii-cluster {
    color: var(--accent);
    white-space: pre;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

.site-footer {
    color: var(--text-soft);
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(184,155,94,0.18);
}
.footer-meta { color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .archive-row {
        grid-template-columns: 4rem 1fr;
        grid-template-areas:
            "year region"
            "year varietal"
            "note note";
    }
    .map-layer { font-size: 0.65rem; }
}