/* prototype.report v2 — botanical / dopamine-neon greenhouse */

:root {
    --c-bg: #0D1F0D;
    --c-leaf-deep: #1A4D1A;
    --c-pink: #FF2D78;
    --c-lime: #ADFF02;
    --c-aqua: #00E5CC;
    --c-petal: #F0F5F0;
    --c-gold: #E8C840;

    --f-head: "Commissioner", "Inter", system-ui, sans-serif;
    --f-body: "Merriweather", Georgia, serif;
    --f-mono: "Fira Code", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-petal);
    font-family: var(--f-body);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    background-image:
        radial-gradient(ellipse at 18% 22%, rgba(255,45,120,0.08), transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(173,255,2,0.06), transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(0,229,204,0.04), transparent 65%);
    background-attachment: fixed;
}

/* =============== SECTIONS =============== */
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.section-entry {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(255,45,120,0.18), transparent 55%),
        linear-gradient(180deg, #08130A 0%, #0D1F0D 60%, #0A180C 100%);
}

.section-report {
    background: linear-gradient(180deg, #0D1F0D 0%, #0F2410 50%, #0B1B0B 100%);
    padding: 120px 0;
}

.section-report.alt {
    background: linear-gradient(180deg, #0B1B0B 0%, #102914 50%, #0D1F0D 100%);
}

.section-interlude {
    min-height: 70vh;
    background: linear-gradient(180deg, #0D1F0D 0%, #0A1A12 50%, #0D1F0D 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* =============== PARALLAX BG =============== */
.bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.bg-vines, .report-bg {
    width: 100%;
    height: 100%;
    display: block;
}

.bg-vine {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: vine-draw 3.5s ease-out forwards;
}

.section-report .bg-vine {
    animation: vine-draw 4s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes vine-draw {
    to { stroke-dashoffset: 0; }
}

/* =============== ENTRY FRAME =============== */
.entry-frame {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 140px 1fr 140px;
    grid-template-rows: 1fr;
    z-index: 2;
}

.vine-border {
    width: 140px;
    height: 100vh;
    display: block;
}

.vine-border-left { grid-column: 1; grid-row: 1; }
.vine-border-right { grid-column: 3; grid-row: 1; }

.vine-draw {
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: vine-draw 2.4s ease-out forwards 0.2s;
}

.vine-delay-1 {
    animation-delay: 0.6s;
}

.leaf-cluster { opacity: 0; animation: leaf-bloom 0.9s ease-out forwards; }
.vine-border-left .leaf-cluster:nth-of-type(2) { animation-delay: 1.0s; }
.vine-border-left .leaf-cluster:nth-of-type(3) { animation-delay: 1.4s; }
.vine-border-left .leaf-cluster:nth-of-type(4) { animation-delay: 1.8s; }
.vine-border-right .leaf-cluster:nth-of-type(2) { animation-delay: 1.1s; }
.vine-border-right .leaf-cluster:nth-of-type(3) { animation-delay: 1.5s; }
.vine-border-right .leaf-cluster:nth-of-type(4) { animation-delay: 1.9s; }

@keyframes leaf-bloom {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

.fore-leaves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 3;
    will-change: transform;
}

.fore-leaf { opacity: 0; animation: fore-fade 1.2s ease-out forwards; }
.fore-leaf-1 { animation-delay: 1.1s; }
.fore-leaf-2 { animation-delay: 1.4s; }
.fore-leaf-3 { animation-delay: 1.6s; }
.fore-leaf-4 { animation-delay: 1.8s; }

@keyframes fore-fade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============== WORDMARK =============== */
.wordmark {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
    z-index: 4;
    padding: 0 32px;
    max-width: 920px;
    opacity: 0;
    animation: wordmark-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
}

@keyframes wordmark-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

.wordmark-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(40px, 8.5vw, 112px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    margin: 0;
    color: var(--c-petal);
    text-shadow:
        0 0 24px rgba(255,45,120,0.35),
        0 0 60px rgba(255,45,120,0.18);
}

.wm-prototype { color: var(--c-petal); }
.wm-dot {
    color: var(--c-pink);
    text-shadow:
        0 0 18px rgba(255,45,120,0.7),
        0 0 40px rgba(255,45,120,0.4);
    animation: dot-pulse 2.8s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.wm-report {
    color: var(--c-lime);
    text-shadow:
        0 0 22px rgba(173,255,2,0.45),
        0 0 50px rgba(173,255,2,0.25);
}

.wordmark-sub {
    font-family: var(--f-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    color: rgba(240,245,240,0.78);
    letter-spacing: 0.01em;
    margin: 22px auto 28px;
    max-width: 560px;
}

.wordmark-meta {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.meta-token {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--c-lime);
    padding: 6px 14px;
    border: 1px solid rgba(173,255,2,0.3);
    border-radius: 999px;
    background: rgba(13,31,13,0.6);
    text-transform: uppercase;
}

/* =============== BUBBLE FIELDS =============== */
.bubble-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}

.bubble-field-entry {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 5;
}

.bubble-field-large {
    inset: 0;
    z-index: 1;
}

.bubble {
    position: absolute;
    bottom: -120px;
    pointer-events: none;
    will-change: transform, opacity;
    animation: bubble-float linear infinite;
    opacity: 0;
}

.bubble svg { display: block; }

@keyframes bubble-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    18%  { opacity: 0.85; }
    50%  { transform: translateY(-50vh) translateX(var(--sway, 12px)); opacity: 0.85; }
    82%  { opacity: 0.85; }
    100% { transform: translateY(-105vh) translateX(calc(var(--sway, 12px) * -1)); opacity: 0; }
}

/* =============== SCROLL CUE =============== */
.scroll-cue {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    margin-bottom: 36px;
    text-align: center;
    z-index: 6;
    opacity: 0;
    animation: cue-in 1.2s ease-out forwards;
    animation-delay: 2.6s;
}

@keyframes cue-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 0.85; transform: translateY(0); }
}

.cue-label {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-lime);
    margin-bottom: 10px;
}

.cue-arrow {
    width: 18px;
    height: 30px;
    animation: cue-bob 1.8s ease-in-out infinite;
}

@keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* =============== REPORT FRAME =============== */
.report-frame {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 32px;
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    gap: 40px;
    align-items: start;
}

.report-margin {
    position: sticky;
    top: 80px;
    height: 600px;
}

.margin-vine {
    width: 80px;
    height: 600px;
    display: block;
}

.morph-vine {
    transition: d 0.6s ease-out;
    filter: drop-shadow(0 0 4px rgba(173,255,2,0.25));
}

.vine-bud {
    transition: r 0.4s ease-out, fill 0.4s ease-out;
}

/* =============== REPORT BODY =============== */
.report-body {
    max-width: 680px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

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

.report-header {
    margin-bottom: 32px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(240,245,240,0.12);
}

.report-tag {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: center;
}

.tag-id {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--c-bg);
    background: var(--c-lime);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.tag-status {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-pink);
    text-transform: uppercase;
}

.report-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(28px, 4.5vw, 56px);
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 14px;
    color: var(--c-petal);
}

.report-title em {
    font-style: italic;
    color: var(--c-pink);
    font-weight: 700;
}

.section-report.alt .report-title em { color: var(--c-lime); }
#report-03 .report-title em { color: var(--c-aqua); }

.report-subtitle {
    font-family: var(--f-body);
    font-size: clamp(15px, 1.3vw, 17px);
    color: rgba(240,245,240,0.7);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.report-prose {
    font-family: var(--f-body);
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.8;
    color: var(--c-petal);
}

.report-prose p { margin: 0 0 22px; }
.report-prose strong { color: var(--c-lime); font-weight: 700; }
.report-prose em { font-style: italic; color: var(--c-aqua); }

/* =============== DATA DL =============== */
.report-data {
    margin: 36px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(240,245,240,0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}

.data-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.data-row dt {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-lime);
}

.data-row dd {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--c-petal);
    margin: 0;
}

/* =============== INTERLUDE =============== */
.interlude-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 32px;
}

.interlude-caption {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-aqua);
    margin: 0;
    opacity: 0.75;
}

/* =============== ROOT FOOTER =============== */
.root-footer {
    position: relative;
    background: linear-gradient(180deg, #0B1B0B 0%, #050D05 100%);
    padding: 80px 32px 48px;
    text-align: center;
    overflow: hidden;
}

.root-header {
    margin-bottom: 24px;
}

.root-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 32px);
    color: var(--c-petal);
    letter-spacing: -0.01em;
    margin: 0;
}

.root-sub {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-lime);
    margin: 10px 0 0;
    opacity: 0.85;
}

.root-diagram {
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 12px auto 24px;
    display: block;
}

.root-trunk {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: vine-draw 1.8s ease-out forwards;
}

.root-branch {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke 0.35s ease-out, stroke-width 0.35s ease-out;
}

.root-branch.drawn {
    animation: vine-draw 1.4s ease-out forwards;
}

.root-branch.active {
    stroke: var(--c-pink);
    stroke-width: 2.4;
    filter: drop-shadow(0 0 6px rgba(255,45,120,0.5));
}

.root-node {
    cursor: pointer;
    outline: none;
}

.node-glow {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.node-dot {
    transition: r 0.3s ease-out, fill 0.3s ease-out;
}

.root-node:hover .node-glow,
.root-node.active .node-glow {
    opacity: 1;
}

.root-node:hover .node-dot,
.root-node.active .node-dot {
    fill: var(--c-pink);
    r: 7;
}

.node-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-anchor: middle;
    fill: var(--c-petal);
    opacity: 0.7;
    transition: fill 0.3s ease-out, opacity 0.3s ease-out;
}

.root-node:hover .node-label,
.root-node.active .node-label {
    fill: var(--c-pink);
    opacity: 1;
}

.footer-meta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.footer-meta .meta-token {
    color: var(--c-lime);
    border-color: rgba(173,255,2,0.25);
}

/* =============== RESPONSIVE =============== */
@media (max-width: 900px) {
    .entry-frame {
        grid-template-columns: 60px 1fr 60px;
    }
    .vine-border { width: 60px; }

    .report-frame {
        grid-template-columns: 36px 1fr 36px;
        gap: 16px;
        padding: 60px 20px;
    }
    .report-margin { display: none; }
    .report-frame { grid-template-columns: 1fr; }

    .report-data { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .entry-frame {
        grid-template-columns: 36px 1fr 36px;
    }
    .vine-border { width: 36px; }
    .wordmark { padding: 0 12px; }
    .wordmark-title { font-size: clamp(36px, 13vw, 64px); }
    .scroll-cue { margin-bottom: 24px; }
    .root-diagram { transform: scale(1); }
    .footer-meta { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .bubble, .wm-dot, .cue-arrow, .bg-vine, .vine-draw, .root-trunk, .root-branch.drawn { animation: none !important; }
    .bubble { display: none; }
    .report-body { opacity: 1; transform: none; }
    .leaf-cluster, .fore-leaf, .wordmark, .scroll-cue { opacity: 1 !important; animation: none !important; transform: none !important; }
}