/* ==========================================================================
   namu.quest -- glitch aesthetic, f-pattern layout, forest-green palette
   ========================================================================== */

:root {
    --forest-deep: #1A3A28;
    --glitch-red: #E83838;
    --glitch-cyan: #38E8E8;
    --bark-marble: #C8B898;
    --quest-cream: #F0EDE0;
    --abstract-gray: #6A7A68;
    --node-glow: #48C878;

    --margin-left: 15%;
    --column-width: 65%;
    --content-max: 720px;

    --font-headline: 'Bebas Neue', 'Inter', system-ui, sans-serif;
    --font-body: 'Merriweather', 'Lora', Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--forest-deep);
    color: var(--quest-cream);
    font-family: var(--font-body);
    font-size: clamp(15px, 1vw, 17px);
    line-height: 2.0;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    );
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Glitch Canopy (hero, 100vh)
   ========================================================================== */

.canopy {
    position: relative;
    min-height: 100vh;
    background: var(--forest-deep);
    padding: 12vh var(--margin-left) 8vh;
    overflow: hidden;
    isolation: isolate;
}

.canopy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(72, 200, 120, 0.10), transparent 55%),
                radial-gradient(ellipse at 70% 80%, rgba(56, 232, 232, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.canopy-bands {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.band {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 56, 56, 0.55) 30%,
        rgba(240, 237, 224, 0.85) 50%,
        rgba(56, 232, 232, 0.55) 70%,
        transparent 100%
    );
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(0);
}

.band-1 { top: 18%; animation: band-shift 7s steps(1, end) infinite; animation-delay: 0.3s; }
.band-2 { top: 42%; height: 2px; animation: band-shift 9s steps(1, end) infinite; animation-delay: 1.2s; }
.band-3 { top: 61%; height: 4px; animation: band-shift 6s steps(1, end) infinite; animation-delay: 2.7s; }
.band-4 { top: 76%; animation: band-shift 11s steps(1, end) infinite; animation-delay: 0.9s; }
.band-5 { top: 31%; height: 2px; animation: band-shift 8.5s steps(1, end) infinite; animation-delay: 3.4s; }

@keyframes band-shift {
    0%, 92% { opacity: 0; transform: translateX(0); }
    93%     { opacity: 0.85; transform: translateX(-12px); }
    94%     { opacity: 0.85; transform: translateX(20px); }
    95%     { opacity: 0.6;  transform: translateX(-6px); }
    96%     { opacity: 0;    transform: translateX(0); }
    100%    { opacity: 0;    transform: translateX(0); }
}

.canopy-inner {
    position: relative;
    z-index: 3;
    max-width: 960px;
}

.canopy-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--abstract-gray);
    text-transform: uppercase;
}

.meta-tag { display: inline-block; }

.meta-dot {
    width: 6px;
    height: 6px;
    background: var(--node-glow);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--node-glow);
    animation: dot-pulse 2.4s ease-in-out infinite;
}

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

.canopy-title {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(64px, 13vw, 200px);
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--quest-cream);
    text-transform: lowercase;
    margin-bottom: 36px;
    position: relative;
    --split-x: 4px;
    text-shadow:
        var(--split-x) 0 0 var(--glitch-red),
        calc(var(--split-x) * -1) 0 0 var(--glitch-cyan);
    animation: title-resolve 1.4s ease-out 0.4s both,
               title-jitter 6.5s steps(1, end) 2s infinite;
}

@keyframes title-resolve {
    0%   { --split-x: 14px; opacity: 0; transform: translateX(-8px); filter: blur(2px); }
    30%  { opacity: 1; }
    100% { --split-x: 2px; opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes title-jitter {
    0%, 96%  { transform: translateX(0); --split-x: 2px; }
    97%      { transform: translateX(-3px); --split-x: 6px; }
    98%      { transform: translateX(2px); --split-x: 1px; }
    99%      { transform: translateX(-1px); --split-x: 5px; }
    100%     { transform: translateX(0); --split-x: 2px; }
}

@property --split-x {
    syntax: '<length>';
    inherits: false;
    initial-value: 2px;
}

.canopy-sub {
    max-width: 60ch;
    color: var(--quest-cream);
    opacity: 0.86;
    margin-bottom: 56px;
    font-size: clamp(15px, 1.05vw, 17px);
}

.canopy-coords {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    font-family: var(--font-headline);
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--abstract-gray);
    border-top: 1px solid rgba(106, 122, 104, 0.4);
    padding-top: 22px;
    max-width: 760px;
}

.canopy-coords span {
    position: relative;
}

.canopy-coords span::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--node-glow);
    transform: translateY(-50%);
}

.canopy-floor {
    position: absolute;
    bottom: 28px;
    left: var(--margin-left);
    right: var(--margin-left);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-headline);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--abstract-gray);
    text-transform: uppercase;
}

.scroll-cue {
    position: relative;
    padding-left: 26px;
}

.scroll-cue::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 1px;
    background: var(--abstract-gray);
    transform: translateY(-50%);
    animation: cue-line 2.6s ease-in-out infinite;
}

@keyframes cue-line {
    0%, 100% { transform: translate(0, -50%) scaleX(1); opacity: 0.4; }
    50%      { transform: translate(6px, -50%) scaleX(1.4); opacity: 1; }
}

/* ==========================================================================
   Quest Log (f-pattern)
   ========================================================================== */

.quest-log {
    position: relative;
    padding: 14vh var(--margin-left) 12vh;
    max-width: 100%;
    z-index: 2;
}

.quest-log::before {
    content: '';
    position: absolute;
    left: var(--margin-left);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(106, 122, 104, 0.35) 8%,
        rgba(106, 122, 104, 0.35) 92%,
        transparent 100%
    );
    transform: translateX(-26px);
}

.quest-entry {
    position: relative;
    margin-bottom: 14vh;
    max-width: var(--content-max);
    width: var(--column-width);
    --split-x: 2px;
}

.entry-marker {
    position: absolute;
    left: -86px;
    top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-headline);
    color: var(--abstract-gray);
}

.marker-num {
    font-size: 20px;
    letter-spacing: 0.08em;
    color: var(--node-glow);
}

.marker-line {
    width: 28px;
    height: 1px;
    background: var(--abstract-gray);
}

.quest-title {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 56px);
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: var(--quest-cream);
    margin-bottom: 18px;
    text-transform: none;
    transition: --split-x 280ms ease-out, transform 280ms ease-out;
    text-shadow:
        var(--split-x) 0 0 var(--glitch-red),
        calc(var(--split-x) * -1) 0 0 var(--glitch-cyan);
}

.quest-title:hover {
    --split-x: 4px;
    transform: translateX(2px);
}

.quest-meta {
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--abstract-gray);
    text-transform: uppercase;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(106, 122, 104, 0.45);
}

.quest-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1vw, 17px);
    line-height: 2.0;
    color: var(--quest-cream);
    opacity: 0.92;
    margin-bottom: 22px;
    max-width: 60ch;
}

.quest-body:last-child { margin-bottom: 0; }

/* every 5th entry = glitch burst */
.quest-entry.glitch-burst {
    transform: translateX(0);
    transition: transform 200ms ease-out;
}

.quest-entry.glitch-burst.glitched {
    animation: entry-glitch 220ms ease-in-out 1;
}

@keyframes entry-glitch {
    0%   { transform: translateX(0);   filter: none; }
    20%  { transform: translateX(8px); filter: hue-rotate(40deg); }
    40%  { transform: translateX(-4px); filter: hue-rotate(-30deg); }
    60%  { transform: translateX(8px); filter: hue-rotate(20deg); }
    100% { transform: translateX(0);   filter: none; }
}

.quest-entry.glitch-burst .quest-title {
    --split-x: 3px;
}

.quest-entry.glitch-burst::before {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: 38%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--glitch-cyan) 30%, var(--glitch-red) 60%, transparent);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.quest-entry.glitch-burst.glitched::before {
    animation: glitch-band 220ms ease-out 1;
}

@keyframes glitch-band {
    0%   { opacity: 0; transform: translateX(-30%); }
    35%  { opacity: 0.9; }
    100% { opacity: 0; transform: translateX(30%); }
}

/* ==========================================================================
   Specimen Cards (marble texture, petrified-wood)
   ========================================================================== */

.specimen-card {
    position: relative;
    margin: 6vh 0 14vh auto;
    max-width: 420px;
    width: 38%;
    margin-right: 10%;
    padding: 28px 28px 26px;
    color: var(--forest-deep);
    background: var(--bark-marble);
    border: 1px solid rgba(26, 58, 40, 0.35);
    overflow: hidden;
    isolation: isolate;
    transform: rotate(0deg);
    transition: transform 320ms ease-out, box-shadow 320ms ease-out;
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, 0.6);
}

.specimen-card:nth-of-type(odd) {
    margin-right: auto;
    margin-left: 22%;
}

.specimen-card:hover {
    transform: rotate(0.5deg) translateY(-2px);
    box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.7);
}

.specimen-card:hover .specimen-marble {
    opacity: 1;
}

.specimen-marble {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    transition: opacity 600ms ease-out;
    background: var(--bark-marble);
}

.specimen-card[data-marble="1"] .specimen-marble {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='280'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.085' numOctaves='3' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.78  0 0 0 0 0.72  0 0 0 0 0.59  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' fill='%23C8B898'/><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
    background-size: cover;
}

.specimen-card[data-marble="2"] .specimen-marble {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='280'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.12' numOctaves='4' seed='13'/><feColorMatrix type='matrix' values='0 0 0 0 0.65  0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' fill='%23C8B898'/><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
    background-size: cover;
}

.specimen-card[data-marble="3"] .specimen-marble {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='280'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.025 0.07' numOctaves='3' seed='21'/><feColorMatrix type='matrix' values='0 0 0 0 0.82  0 0 0 0 0.76  0 0 0 0 0.62  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' fill='%23C8B898'/><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
    background-size: cover;
}

.specimen-content {
    position: relative;
    z-index: 1;
}

.specimen-tag {
    font-family: var(--font-headline);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--forest-deep);
    margin-bottom: 8px;
    opacity: 0.75;
}

.specimen-name {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 22px;
    line-height: 1.2;
    color: var(--forest-deep);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(26, 58, 40, 0.3);
}

.specimen-data {
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 6px;
    column-gap: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.specimen-data dt {
    font-family: var(--font-headline);
    letter-spacing: 0.16em;
    color: var(--forest-deep);
    opacity: 0.7;
}

.specimen-data dd {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--forest-deep);
}

/* ==========================================================================
   Quest Map (footer SVG network)
   ========================================================================== */

.quest-map {
    position: relative;
    padding: 12vh var(--margin-left) 10vh;
    background: linear-gradient(180deg, var(--forest-deep) 0%, #142d20 100%);
    overflow: hidden;
    z-index: 2;
}

.quest-map::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--abstract-gray) 20%, var(--abstract-gray) 80%, transparent);
    opacity: 0.5;
}

.map-meta {
    max-width: var(--content-max);
    margin-bottom: 42px;
}

.map-eyebrow {
    font-family: var(--font-headline);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--node-glow);
    margin-bottom: 14px;
}

.map-title {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: clamp(34px, 4vw, 64px);
    letter-spacing: 0.05em;
    color: var(--quest-cream);
    margin-bottom: 18px;
    --split-x: 2px;
    text-shadow:
        var(--split-x) 0 0 var(--glitch-red),
        calc(var(--split-x) * -1) 0 0 var(--glitch-cyan);
}

.map-sub {
    color: var(--abstract-gray);
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.8;
}

.map-canvas-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.map-canvas {
    width: 100%;
    height: auto;
    display: block;
}

.map-edges path {
    stroke: var(--node-glow);
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 0.85;
    transition: stroke-dashoffset 1.4s ease-out, opacity 280ms ease-out;
}

.map-edges path[data-pending="true"] {
    stroke: var(--abstract-gray);
    stroke-dasharray: 4 6;
    stroke-dashoffset: 0;
    opacity: 0.5;
}

.map-edges path.drawn {
    stroke-dashoffset: 0;
}

.map-edges path.bright {
    stroke-width: 2.4;
    filter: drop-shadow(0 0 6px var(--node-glow));
}

.map-node circle {
    fill: var(--node-glow);
    cursor: pointer;
    transition: transform 280ms ease-out, fill 280ms ease-out;
    transform-box: fill-box;
    transform-origin: center;
}

.map-node[data-status="pending"] circle {
    fill: transparent;
    stroke: var(--abstract-gray);
    stroke-width: 1.5;
}

.map-node text {
    fill: var(--abstract-gray);
    font-family: var(--font-headline);
    font-size: 13px;
    text-anchor: middle;
    letter-spacing: 0.14em;
}

.map-node:hover circle {
    transform: scale(1.3);
    fill: var(--quest-cream);
}

.map-node:hover text {
    fill: var(--quest-cream);
}

.map-legend {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    font-family: var(--font-headline);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--abstract-gray);
    border-top: 1px solid rgba(106, 122, 104, 0.3);
    padding-top: 22px;
}

.legend-done   { color: var(--node-glow); }
.legend-pending { color: var(--abstract-gray); }
.legend-edge   { color: var(--quest-cream); opacity: 0.7; }
.legend-stamp  { margin-left: auto; color: var(--abstract-gray); opacity: 0.55; }

/* ==========================================================================
   Page-load glitch curtain (Step 1 of narrative experience)
   ========================================================================== */

.glitch-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: var(--forest-deep);
    overflow: hidden;
}

.glitch-curtain.dismiss {
    animation: curtain-dismiss 320ms ease-out forwards;
}

@keyframes curtain-dismiss {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.curtain-line {
    position: absolute;
    left: -10%;
    width: 120%;
    background: linear-gradient(90deg, transparent, var(--quest-cream) 20%, var(--glitch-cyan) 50%, var(--glitch-red) 80%, transparent);
    mix-blend-mode: screen;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    :root {
        --margin-left: 8%;
        --column-width: 84%;
    }
    .canopy-floor { display: none; }
    .entry-marker {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 14px;
    }
    .specimen-card,
    .specimen-card:nth-of-type(odd) {
        width: 92%;
        max-width: none;
        margin: 4vh auto 12vh;
    }
    .canopy { padding-top: 16vh; }
    .canopy-coords { gap: 22px 30px; }
}

@media (max-width: 540px) {
    :root {
        --margin-left: 6%;
        --column-width: 92%;
    }
    .canopy-title { font-size: clamp(48px, 14vw, 84px); }
    .canopy-meta { flex-wrap: wrap; gap: 10px; }
    .canopy-coords span::before { display: none; }
    .map-legend { gap: 14px; }
    .legend-stamp { margin-left: 0; flex-basis: 100%; }
}