/* ============================================================
   ppuzzl.com — Gold-Black-Luxury Chronicle
   Palette: #0A0907 #16120C #C9A961 #E8C77A #7A6233 #F5EAD0 #3A3024 #9A8B6A #1A1208
   Fonts: JetBrains Mono (display), Space Mono (body), IBM Plex Mono (micro)
   ============================================================

   Typography specification:
   Display headings: "JetBrains Mono" (Google Fonts) weight 800 tracking -0.02em
   Body / chronicle prose: "Space Mono" (Google Fonts) weight 400 16px line-height 1.7
     letter-spacing 0.005em — the slight typewriter-warmth provides legibility while
     keeping the monospaced rhythm intact across long passages.
   Micro-typography (timestamps coordinates metadata strips): "IBM Plex Mono" (Google Fonts)
     weight 500 11px uppercase letter-spaced 0.18em color #C9A961 — archive-grade
     micro-caps. Below: coordinate strips — pure typography for micro-typography panels.
   Numerals: "JetBrains Mono" tabular figures (font-variant-numeric: tabular-nums)
   Fonts sourced: "Space Mono", "JetBrains Mono", "IBM Plex Mono" (Google Fonts)

   Layout: IntersectionObserver-driven panel reveals with spring easing.
   Motifs: circuit traces, gold-leaf nodes, grainy-textured fields.
   These strips are pure typography. JetBrains Mono is pushed to hero scale.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;800&family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    background: #0A0907;
    color: #F5EAD0;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.005em;
    min-height: 100vh;
    position: relative;
}

/* ============================================================
   Grain noise overlay
   ============================================================ */

.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: overlay;
    animation: grain-breathe 14s ease-in-out infinite alternate;
    opacity: 0.11;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 220px;
}

.grain-overlay svg {
    display: none;
}

@keyframes grain-breathe {
    from { opacity: 0.08; }
    to   { opacity: 0.13; }
}

/* ============================================================
   Fixed timeline spine
   ============================================================ */

body::after {
    content: '';
    position: fixed;
    left: 12vw;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #C9A961 8%, #C9A961 92%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   Hero Band
   ============================================================ */

.hero-band {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    padding-left: 12vw;
    position: relative;
    z-index: 3;
    align-items: center;
}

.hero-inner {
    padding-left: 6vw;
    padding-top: 12vh;
    padding-bottom: 10vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-row: 2;
}

.hero-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #C9A961;
    margin-bottom: 20px;
}

.hero-hairline {
    width: 38vw;
    height: 1px;
    background: linear-gradient(90deg, #C9A961, transparent);
    margin-bottom: 24px;
}

.hero-headline {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: clamp(72px, 14vw, 220px);
    letter-spacing: -0.02em;
    line-height: 0.92;
    color: #F5EAD0;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.illuminated {
    color: #C9A961;
    text-shadow: 0 0 1px #7A6233;
}

.hero-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #7A6233;
    text-transform: uppercase;
}

/* ============================================================
   Chronicle Container
   ============================================================ */

.chronicle {
    position: relative;
    padding-bottom: 120px;
    z-index: 3;
}

/* ============================================================
   Chronicle Entry (node + panel row)
   ============================================================ */

.chronicle-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-bottom: 0;
}

/* Fibonacci-rhythm spacing between entries */
.entry-1  { margin-top: 40px; }
.entry-2  { margin-top: 280px; }
.entry-3  { margin-top: 320px; }
.entry-4  { margin-top: 480px; }
.entry-5  { margin-top: 720px; }
.entry-6  { margin-top: 800px; }
.entry-7  { margin-top: 720px; }
.entry-8  { margin-top: 480px; }
.entry-9  { margin-top: 320px; }
.entry-10 { margin-top: 280px; }
.entry-11 { margin-top: 320px; }
.entry-12 { margin-top: 480px; }

/* ============================================================
   Node wrapper — sits on the spine
   ============================================================ */

.node-wrapper {
    position: absolute;
    left: calc(12vw - 14px);
    top: 0;
    display: flex;
    align-items: center;
    z-index: 5;
}

/* Hexagonal gold token */
.timeline-node {
    width: 28px;
    height: 28px;
    transform: rotate(30deg);
    background: radial-gradient(circle at 30% 30%, #E8C77A, #C9A961 40%, #7A6233);
    border: 1px solid #1A1208;
    box-shadow: 0 0 0 4px #0A0907, 0 6px 12px rgba(0,0,0,0.6);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.timeline-node:hover {
    box-shadow: 0 0 0 4px #0A0907, 0 0 16px rgba(201, 169, 97, 0.5), 0 6px 12px rgba(0,0,0,0.6);
}

.timeline-node.punched-in {
    animation: node-punch 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes node-punch {
    0%   { transform: rotate(30deg) scale(0.6); opacity: 0; }
    60%  { transform: rotate(30deg) scale(1.18); }
    100% { transform: rotate(30deg) scale(1); opacity: 1; }
}

.node-inner {
    position: absolute;
    inset: 0;
}

/* Nature nodes get a hexagonal clipped image */
.node-nature .node-inner {
    transform: rotate(-30deg);
}

.nature-hex {
    width: 28px;
    height: 28px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: grayscale(0.7) sepia(0.4) contrast(1.1) brightness(0.85);
    mix-blend-mode: luminosity;
}

.nature-magnolia {
    background: radial-gradient(ellipse at 40% 35%, #C9A961 0%, #7A6233 50%, #3A3024 100%);
    animation: ken-burns 22s ease-in-out infinite;
}
.nature-fern {
    background: radial-gradient(ellipse at 60% 40%, #9A8B6A 0%, #C9A961 40%, #3A3024 100%);
    animation: ken-burns 22s ease-in-out infinite 4s;
}
.nature-dew {
    background: radial-gradient(circle at 50% 30%, #E8C77A 0%, #C9A961 30%, #16120C 80%);
    animation: ken-burns 22s ease-in-out infinite 8s;
}
.nature-bee {
    background: radial-gradient(ellipse at 35% 55%, #C9A961 0%, #9A8B6A 40%, #1A1208 100%);
    animation: ken-burns 22s ease-in-out infinite 12s;
}

@keyframes ken-burns {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1.0); }
}

/* Node circuit-trace stub branching right */
.node-stub {
    margin-left: 0;
    flex-shrink: 0;
}

/* ============================================================
   Content Panels
   ============================================================ */

.panel {
    margin-left: calc(12vw + 160px);
    padding: 48px 0 96px 56px;
    position: relative;
    opacity: 0;
    transform: translateY(60px) scale(0.96);
    transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Panel width variants — asymmetric ragged-right */
.panel-56 { max-width: 56vw; }
.panel-48 { max-width: 48vw; }
.panel-62 { max-width: 62vw; }
.panel-44 { max-width: 44vw; }

/* ============================================================
   Panel Typography
   ============================================================ */

.meta {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #C9A961;
    margin-bottom: 20px;
    display: block;
}

.panel-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: clamp(36px, 4.5vw, 64px);
    letter-spacing: -0.02em;
    line-height: 0.92;
    color: #F5EAD0;
    margin-bottom: 32px;
    font-variant-numeric: tabular-nums;
}

.panel p {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(245, 234, 208, 0.92);
    max-width: 52ch;
    margin-bottom: 20px;
}

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

/* ============================================================
   Circuit Maps (SVG trace animations)
   ============================================================ */

.circuit-map {
    display: block;
    width: 100%;
    margin-bottom: 32px;
    overflow: visible;
}

.circuit-map .trace,
.circuit-overlay .trace {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel.visible .trace {
    stroke-dashoffset: 0;
}

/* Staggered trace delays */
.panel.visible .trace:nth-child(2) { transition-delay: 0.15s; }
.panel.visible .trace:nth-child(3) { transition-delay: 0.3s; }
.panel.visible .trace:nth-child(4) { transition-delay: 0.45s; }
.panel.visible .trace:nth-child(5) { transition-delay: 0.6s; }

/* ============================================================
   Nature Panel Images
   ============================================================ */

.nature-panel-image {
    position: relative;
    margin-bottom: 32px;
    height: 220px;
    display: flex;
    align-items: flex-start;
}

.hex-clip {
    width: 180px;
    height: 180px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    animation: ken-burns 22s ease-in-out infinite;
    flex-shrink: 0;
    align-self: center;
}

.nature-magnolia-large {
    background: radial-gradient(ellipse at 40% 35%, #E8C77A 0%, #C9A961 25%, #9A8B6A 50%, #3A3024 80%, #1A1208 100%);
    filter: grayscale(0.7) sepia(0.4) contrast(1.1) brightness(0.85);
    mix-blend-mode: luminosity;
}
.nature-fern-large {
    background: radial-gradient(ellipse at 55% 45%, #C9A961 0%, #9A8B6A 30%, #7A6233 55%, #3A3024 80%, #16120C 100%);
    filter: grayscale(0.7) sepia(0.4) contrast(1.1) brightness(0.85);
    mix-blend-mode: luminosity;
}
.nature-dew-large {
    background: radial-gradient(circle at 45% 30%, #F5EAD0 0%, #E8C77A 15%, #C9A961 35%, #7A6233 60%, #16120C 90%);
    filter: grayscale(0.7) sepia(0.4) contrast(1.1) brightness(0.85);
    mix-blend-mode: luminosity;
}
.nature-bee-large {
    background: radial-gradient(ellipse at 38% 52%, #C9A961 0%, #E8C77A 20%, #9A8B6A 45%, #3A3024 70%, #0A0907 100%);
    filter: grayscale(0.7) sepia(0.4) contrast(1.1) brightness(0.85);
    mix-blend-mode: luminosity;
}

.grain-over {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 220px;
    opacity: 0.14;
    pointer-events: none;
}

.circuit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   Terminal Medallion
   ============================================================ */

.terminal-medallion {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0 160px;
    position: relative;
    z-index: 3;
}

.medallion-seal {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #E8C77A, #C9A961 40%, #7A6233 75%, #3A3024);
    box-shadow: inset 0 0 24px rgba(26, 18, 8, 0.6), 0 12px 40px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.medallion-seal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.09;
    pointer-events: none;
}

.medallion-circuit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

.medallion-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #16120C;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin-top: 100px;
}

/* ============================================================
   Cursor override on nodes
   ============================================================ */

.timeline-node {
    cursor: crosshair;
}

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

@media (max-width: 1024px) {
    body::after {
        left: 6vw;
    }
    .node-wrapper {
        left: calc(6vw - 14px);
    }
    .panel {
        margin-left: calc(6vw + 140px);
    }
    .hero-band {
        padding-left: 6vw;
    }
    .hero-inner {
        padding-left: 4vw;
    }
    .panel-56, .panel-48, .panel-62, .panel-44 {
        max-width: 78vw;
    }
}

@media (max-width: 640px) {
    body::after {
        left: 4vw;
    }
    .node-wrapper {
        left: calc(4vw - 14px);
    }
    .panel {
        margin-left: calc(4vw + 100px);
        padding: 32px 0 64px 24px;
    }
    .hero-band {
        padding-left: 4vw;
    }
    .hero-headline {
        font-size: clamp(48px, 18vw, 100px);
    }
    .panel-56, .panel-48, .panel-62, .panel-44 {
        max-width: 86vw;
    }
    .panel-title {
        font-size: clamp(28px, 7vw, 48px);
    }
    .entry-2  { margin-top: 160px; }
    .entry-3  { margin-top: 180px; }
    .entry-4  { margin-top: 220px; }
    .entry-5  { margin-top: 300px; }
    .entry-6  { margin-top: 320px; }
    .entry-7  { margin-top: 300px; }
    .entry-8  { margin-top: 220px; }
    .entry-9  { margin-top: 180px; }
    .entry-10 { margin-top: 160px; }
    .entry-11 { margin-top: 180px; }
    .entry-12 { margin-top: 220px; }
    .hex-clip {
        width: 120px;
        height: 120px;
    }
    .terminal-medallion {
        padding: 80px 0 100px;
    }
    .medallion-seal {
        width: 160px;
        height: 160px;
    }
    .medallion-text {
        margin-top: 70px;
        font-size: 9px;
    }
}