/* ============================================================
   luminary.dev - Pixel-Art Timeline Design
   Colors: #E8E0D8, #7A7A60, #5A4A3A, #8A9A78, #F5F0E8, #B88A80, #FFFFF0, #D0C8C0
   Fonts: Silkscreen, IBM Plex Sans, IBM Plex Mono
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
    color: #5A4A3A;
    background-color: #E8E0D8;
    overflow-x: hidden;
    position: relative;
}

/* --- Grid-line Overlay --- */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(208, 200, 192, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(208, 200, 192, 0.3) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Silkscreen', cursive;
    font-weight: 400;
    color: #5A4A3A;
}

h2 {
    font-size: clamp(20px, 3vw, 40px);
    margin-bottom: 16px;
}

p {
    margin-bottom: 12px;
}

code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    background: #F0E8E0;
    border-radius: 3px;
    padding: 2px 6px;
    color: #5A4A3A;
    display: inline-block;
    margin-top: 8px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8E0D8;
}

.hero-content {
    text-align: center;
    position: relative;
}

/* --- Pixel-Art Logotype --- */
.logotype {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    margin-bottom: 48px;
    min-height: 60px;
    flex-wrap: wrap;
}

.pixel-letter,
.pixel-letter-dot {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pixel-letter.visible,
.pixel-letter-dot.visible {
    opacity: 1;
}

/* Pixel letter scale factor - each "pixel" is 4px */
.pixel-letter {
    transform: scale(4);
    transform-origin: bottom left;
    margin-right: 28px;
    margin-bottom: 20px;
}

.pixel-letter-dot {
    transform: scale(4);
    transform-origin: bottom left;
    margin-right: 28px;
    margin-bottom: 20px;
}

/* Pixel font data via box-shadow - 5x7 pixel grid per character */
/* Each shadow: Xpx Ypx 0 0 color */
.pixel-letter[data-letter="l"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 6px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A,
        3px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="u"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 6px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A,
        3px 6px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        4px 3px 0 0 #5A4A3A,
        4px 4px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="m"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 1px 0 0 #5A4A3A,
        2px 2px 0 0 #5A4A3A,
        3px 1px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        4px 3px 0 0 #5A4A3A,
        4px 4px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="i"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        1px 0px 0 0 #5A4A3A,
        2px 0px 0 0 #5A4A3A,
        1px 1px 0 0 #5A4A3A,
        1px 2px 0 0 #5A4A3A,
        1px 3px 0 0 #5A4A3A,
        1px 4px 0 0 #5A4A3A,
        1px 5px 0 0 #5A4A3A,
        1px 6px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="n"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 1px 0 0 #5A4A3A,
        2px 2px 0 0 #5A4A3A,
        3px 3px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        4px 3px 0 0 #5A4A3A,
        4px 4px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="a"] {
    box-shadow:
        1px 0px 0 0 #5A4A3A,
        2px 0px 0 0 #5A4A3A,
        3px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        1px 3px 0 0 #5A4A3A,
        2px 3px 0 0 #5A4A3A,
        3px 3px 0 0 #5A4A3A,
        4px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        4px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="r"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        1px 0px 0 0 #5A4A3A,
        2px 0px 0 0 #5A4A3A,
        3px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        1px 3px 0 0 #5A4A3A,
        2px 3px 0 0 #5A4A3A,
        3px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        3px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="y"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        1px 2px 0 0 #5A4A3A,
        3px 2px 0 0 #5A4A3A,
        2px 3px 0 0 #5A4A3A,
        2px 4px 0 0 #5A4A3A,
        2px 5px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A;
}

.pixel-letter-dot[data-letter="."] {
    box-shadow:
        1px 5px 0 0 #B88A80,
        1px 6px 0 0 #B88A80,
        2px 5px 0 0 #B88A80,
        2px 6px 0 0 #B88A80;
}

.pixel-letter[data-letter="d"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        1px 0px 0 0 #5A4A3A,
        2px 0px 0 0 #5A4A3A,
        3px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        4px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        4px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        4px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 6px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A,
        3px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="e"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        1px 0px 0 0 #5A4A3A,
        2px 0px 0 0 #5A4A3A,
        3px 0px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        0px 3px 0 0 #5A4A3A,
        1px 3px 0 0 #5A4A3A,
        2px 3px 0 0 #5A4A3A,
        3px 3px 0 0 #5A4A3A,
        0px 4px 0 0 #5A4A3A,
        0px 5px 0 0 #5A4A3A,
        0px 6px 0 0 #5A4A3A,
        1px 6px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A,
        3px 6px 0 0 #5A4A3A,
        4px 6px 0 0 #5A4A3A;
}

.pixel-letter[data-letter="v"] {
    box-shadow:
        0px 0px 0 0 #5A4A3A,
        4px 0px 0 0 #5A4A3A,
        0px 1px 0 0 #5A4A3A,
        4px 1px 0 0 #5A4A3A,
        0px 2px 0 0 #5A4A3A,
        4px 2px 0 0 #5A4A3A,
        1px 3px 0 0 #5A4A3A,
        3px 3px 0 0 #5A4A3A,
        1px 4px 0 0 #5A4A3A,
        3px 4px 0 0 #5A4A3A,
        2px 5px 0 0 #5A4A3A,
        2px 6px 0 0 #5A4A3A;
}

/* --- Pixel Star --- */
.pixel-star {
    width: 1px;
    height: 1px;
    background: transparent;
    image-rendering: pixelated;
    transform: scale(4);
    margin: 0 auto 48px;
    opacity: 0;
    position: relative;
    left: 50%;
    transform-origin: center center;
    box-shadow:
        /* Center cross */
        3px 0px 0 0 #B88A80,
        3px 1px 0 0 #B88A80,
        3px 2px 0 0 #B88A80,
        2px 3px 0 0 #B88A80,
        3px 3px 0 0 #FFFFF0,
        4px 3px 0 0 #B88A80,
        1px 3px 0 0 #B88A80,
        5px 3px 0 0 #B88A80,
        0px 3px 0 0 #B88A80,
        6px 3px 0 0 #B88A80,
        3px 4px 0 0 #B88A80,
        3px 5px 0 0 #B88A80,
        3px 6px 0 0 #B88A80,
        /* Diagonal rays */
        1px 1px 0 0 #8A9A78,
        5px 1px 0 0 #8A9A78,
        2px 2px 0 0 #8A9A78,
        4px 2px 0 0 #8A9A78,
        2px 4px 0 0 #8A9A78,
        4px 4px 0 0 #8A9A78,
        1px 5px 0 0 #8A9A78,
        5px 5px 0 0 #8A9A78;
}

.pixel-star.visible {
    animation: starBounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes starBounceIn {
    0% {
        opacity: 0;
        transform: scale(4) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(4) translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: scale(4) translateY(0);
    }
}

@keyframes starPulse {
    0%, 100% {
        transform: scale(4);
    }
    50% {
        transform: scale(4.5);
    }
}

.pixel-star.pulsing {
    animation: starPulse 2.5s ease-in-out infinite;
}

/* --- Hero Tagline --- */
.hero-tagline {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    color: #7A7A60;
    letter-spacing: 0.05em;
    margin-top: 60px;
    opacity: 0;
    transition: opacity 0.8s ease 2s;
}

.hero-tagline.visible {
    opacity: 1;
}

/* --- Scroll Hint --- */
.scroll-hint {
    margin-top: 48px;
    opacity: 0;
    transition: opacity 0.8s ease 2.5s;
}

.scroll-hint.visible {
    opacity: 0.5;
}

.scroll-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #7A7A60;
    border-bottom: 2px solid #7A7A60;
    transform: rotate(45deg);
    animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(6px); }
}

/* ============================================================
   TIMELINE SECTION
   ============================================================ */
.timeline-section {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 24px 120px;
}

/* --- Timeline Spine --- */
.timeline-spine {
    position: absolute;
    left: 50%;
    top: 80px;
    bottom: 120px;
    width: 4px;
    margin-left: -2px;
    background-image: repeating-linear-gradient(
        to bottom,
        #7A7A60 0px,
        #7A7A60 8px,
        transparent 8px,
        transparent 12px
    );
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 0.01s linear;
}

/* --- Timeline Items --- */
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 64px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Left-side items */
.timeline-left {
    flex-direction: row-reverse;
}

.timeline-left .timeline-card {
    margin-right: 55%;
    margin-left: 0;
    border-radius: 8px 2px 2px 8px;
    text-align: right;
}

/* Right-side items */
.timeline-right .timeline-card {
    margin-left: 55%;
    margin-right: 0;
    border-radius: 2px 8px 8px 2px;
    text-align: left;
}

/* --- Timeline Node (dot on spine) --- */
.timeline-node {
    position: absolute;
    left: 50%;
    top: 24px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background-color: #E8E0D8;
    border: 2px solid #7A7A60;
    border-radius: 50%;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 0.3s ease;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.timeline-node:hover {
    transform: scale(1.5);
    background-color: #8A9A78;
}

.node-icon {
    width: 1px;
    height: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: scale(0.8);
    image-rendering: pixelated;
}

.timeline-node:hover .node-icon {
    opacity: 1;
}

/* Small 8x8 pixel icons for node hover */
.node-icon-star {
    box-shadow:
        3px 0px 0 0 #FFFFF0,
        3px 1px 0 0 #FFFFF0,
        1px 2px 0 0 #FFFFF0,
        2px 2px 0 0 #FFFFF0,
        3px 2px 0 0 #FFFFF0,
        4px 2px 0 0 #FFFFF0,
        5px 2px 0 0 #FFFFF0,
        2px 3px 0 0 #FFFFF0,
        3px 3px 0 0 #FFFFF0,
        4px 3px 0 0 #FFFFF0,
        3px 4px 0 0 #FFFFF0,
        2px 5px 0 0 #FFFFF0,
        4px 5px 0 0 #FFFFF0;
}

.node-icon-bracket {
    box-shadow:
        2px 0px 0 0 #FFFFF0,
        3px 0px 0 0 #FFFFF0,
        1px 1px 0 0 #FFFFF0,
        1px 2px 0 0 #FFFFF0,
        1px 3px 0 0 #FFFFF0,
        2px 4px 0 0 #FFFFF0,
        3px 4px 0 0 #FFFFF0,
        4px 0px 0 0 #FFFFF0,
        5px 0px 0 0 #FFFFF0,
        5px 1px 0 0 #FFFFF0,
        5px 2px 0 0 #FFFFF0,
        5px 3px 0 0 #FFFFF0,
        4px 4px 0 0 #FFFFF0,
        5px 4px 0 0 #FFFFF0;
}

.node-icon-bulb {
    box-shadow:
        2px 0px 0 0 #FFFFF0,
        3px 0px 0 0 #FFFFF0,
        1px 1px 0 0 #FFFFF0,
        4px 1px 0 0 #FFFFF0,
        1px 2px 0 0 #FFFFF0,
        4px 2px 0 0 #FFFFF0,
        2px 3px 0 0 #FFFFF0,
        3px 3px 0 0 #FFFFF0,
        2px 4px 0 0 #FFFFF0,
        3px 4px 0 0 #FFFFF0,
        2px 5px 0 0 #FFFFF0,
        3px 5px 0 0 #FFFFF0;
}

.node-icon-compass {
    box-shadow:
        2px 0px 0 0 #FFFFF0,
        3px 0px 0 0 #FFFFF0,
        1px 1px 0 0 #FFFFF0,
        4px 1px 0 0 #FFFFF0,
        0px 2px 0 0 #FFFFF0,
        2px 2px 0 0 #FFFFF0,
        3px 2px 0 0 #FFFFF0,
        5px 2px 0 0 #FFFFF0,
        0px 3px 0 0 #FFFFF0,
        2px 3px 0 0 #FFFFF0,
        3px 3px 0 0 #FFFFF0,
        5px 3px 0 0 #FFFFF0,
        1px 4px 0 0 #FFFFF0,
        4px 4px 0 0 #FFFFF0,
        2px 5px 0 0 #FFFFF0,
        3px 5px 0 0 #FFFFF0;
}

.node-icon-book {
    box-shadow:
        1px 0px 0 0 #FFFFF0,
        2px 0px 0 0 #FFFFF0,
        3px 0px 0 0 #FFFFF0,
        4px 0px 0 0 #FFFFF0,
        0px 1px 0 0 #FFFFF0,
        5px 1px 0 0 #FFFFF0,
        0px 2px 0 0 #FFFFF0,
        2px 2px 0 0 #FFFFF0,
        3px 2px 0 0 #FFFFF0,
        5px 2px 0 0 #FFFFF0,
        0px 3px 0 0 #FFFFF0,
        5px 3px 0 0 #FFFFF0,
        1px 4px 0 0 #FFFFF0,
        2px 4px 0 0 #FFFFF0,
        3px 4px 0 0 #FFFFF0,
        4px 4px 0 0 #FFFFF0;
}

/* --- Timeline Card --- */
.timeline-card {
    position: relative;
    background-color: #F5F0E8;
    border: 2px solid #D0C8C0;
    padding: 28px 24px;
    width: 42%;
    overflow: hidden;
}

.timeline-card h2 {
    font-size: clamp(16px, 2.5vw, 28px);
    margin-bottom: 12px;
    color: #5A4A3A;
}

.timeline-card p {
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
    color: #5A4A3A;
}

.timeline-card code {
    display: inline-block;
    margin-top: 12px;
}

/* --- Card Pixel-Art Icons --- */
.card-icon-star,
.card-icon-bracket,
.card-icon-bulb,
.card-icon-compass,
.card-icon-book {
    width: 1px;
    height: 1px;
    background: transparent;
    image-rendering: pixelated;
    transform: scale(3);
    transform-origin: top left;
    margin-bottom: 24px;
    display: inline-block;
}

.timeline-left .timeline-card .card-icon-star,
.timeline-left .timeline-card .card-icon-bracket,
.timeline-left .timeline-card .card-icon-bulb,
.timeline-left .timeline-card .card-icon-compass,
.timeline-left .timeline-card .card-icon-book {
    float: right;
    transform-origin: top right;
    margin-left: 16px;
    margin-right: 0;
}

.timeline-right .timeline-card .card-icon-star,
.timeline-right .timeline-card .card-icon-bracket,
.timeline-right .timeline-card .card-icon-bulb,
.timeline-right .timeline-card .card-icon-compass,
.timeline-right .timeline-card .card-icon-book {
    float: left;
    margin-right: 16px;
    margin-left: 0;
}

/* 16x16 pixel-art card icons */
.card-icon-star {
    box-shadow:
        7px 0px 0 0 #8A9A78,
        7px 1px 0 0 #8A9A78,
        6px 2px 0 0 #7A7A60,
        7px 2px 0 0 #8A9A78,
        8px 2px 0 0 #7A7A60,
        3px 3px 0 0 #7A7A60,
        4px 3px 0 0 #7A7A60,
        5px 3px 0 0 #8A9A78,
        6px 3px 0 0 #8A9A78,
        7px 3px 0 0 #B88A80,
        8px 3px 0 0 #8A9A78,
        9px 3px 0 0 #8A9A78,
        10px 3px 0 0 #7A7A60,
        11px 3px 0 0 #7A7A60,
        4px 4px 0 0 #8A9A78,
        5px 4px 0 0 #8A9A78,
        6px 4px 0 0 #8A9A78,
        7px 4px 0 0 #B88A80,
        8px 4px 0 0 #8A9A78,
        9px 4px 0 0 #8A9A78,
        10px 4px 0 0 #8A9A78,
        5px 5px 0 0 #8A9A78,
        6px 5px 0 0 #B88A80,
        7px 5px 0 0 #B88A80,
        8px 5px 0 0 #B88A80,
        9px 5px 0 0 #8A9A78,
        5px 6px 0 0 #7A7A60,
        6px 6px 0 0 #8A9A78,
        7px 6px 0 0 #8A9A78,
        8px 6px 0 0 #8A9A78,
        9px 6px 0 0 #7A7A60,
        4px 7px 0 0 #7A7A60,
        5px 7px 0 0 #7A7A60,
        9px 7px 0 0 #7A7A60,
        10px 7px 0 0 #7A7A60;
}

.card-icon-bracket {
    box-shadow:
        3px 1px 0 0 #7A7A60,
        4px 1px 0 0 #7A7A60,
        5px 1px 0 0 #7A7A60,
        2px 2px 0 0 #7A7A60,
        2px 3px 0 0 #7A7A60,
        2px 4px 0 0 #7A7A60,
        2px 5px 0 0 #7A7A60,
        1px 3px 0 0 #8A9A78,
        1px 4px 0 0 #8A9A78,
        3px 6px 0 0 #7A7A60,
        4px 6px 0 0 #7A7A60,
        5px 6px 0 0 #7A7A60,
        9px 1px 0 0 #7A7A60,
        10px 1px 0 0 #7A7A60,
        11px 1px 0 0 #7A7A60,
        11px 2px 0 0 #7A7A60,
        11px 3px 0 0 #7A7A60,
        11px 4px 0 0 #7A7A60,
        11px 5px 0 0 #7A7A60,
        12px 3px 0 0 #8A9A78,
        12px 4px 0 0 #8A9A78,
        9px 6px 0 0 #7A7A60,
        10px 6px 0 0 #7A7A60,
        11px 6px 0 0 #7A7A60;
}

.card-icon-bulb {
    box-shadow:
        5px 0px 0 0 #B88A80,
        6px 0px 0 0 #B88A80,
        7px 0px 0 0 #B88A80,
        4px 1px 0 0 #B88A80,
        8px 1px 0 0 #B88A80,
        3px 2px 0 0 #B88A80,
        5px 2px 0 0 #FFFFF0,
        6px 2px 0 0 #FFFFF0,
        9px 2px 0 0 #B88A80,
        3px 3px 0 0 #B88A80,
        9px 3px 0 0 #B88A80,
        3px 4px 0 0 #B88A80,
        9px 4px 0 0 #B88A80,
        4px 5px 0 0 #B88A80,
        8px 5px 0 0 #B88A80,
        5px 6px 0 0 #7A7A60,
        6px 6px 0 0 #7A7A60,
        7px 6px 0 0 #7A7A60,
        5px 7px 0 0 #7A7A60,
        6px 7px 0 0 #7A7A60,
        7px 7px 0 0 #7A7A60;
}

.card-icon-compass {
    box-shadow:
        5px 0px 0 0 #7A7A60,
        6px 0px 0 0 #7A7A60,
        7px 0px 0 0 #7A7A60,
        4px 1px 0 0 #7A7A60,
        8px 1px 0 0 #7A7A60,
        3px 2px 0 0 #7A7A60,
        6px 2px 0 0 #B88A80,
        9px 2px 0 0 #7A7A60,
        2px 3px 0 0 #7A7A60,
        5px 3px 0 0 #8A9A78,
        6px 3px 0 0 #8A9A78,
        7px 3px 0 0 #B88A80,
        10px 3px 0 0 #7A7A60,
        2px 4px 0 0 #7A7A60,
        5px 4px 0 0 #B88A80,
        6px 4px 0 0 #8A9A78,
        7px 4px 0 0 #8A9A78,
        10px 4px 0 0 #7A7A60,
        3px 5px 0 0 #7A7A60,
        6px 5px 0 0 #B88A80,
        9px 5px 0 0 #7A7A60,
        4px 6px 0 0 #7A7A60,
        8px 6px 0 0 #7A7A60,
        5px 7px 0 0 #7A7A60,
        6px 7px 0 0 #7A7A60,
        7px 7px 0 0 #7A7A60;
}

.card-icon-book {
    box-shadow:
        2px 1px 0 0 #7A7A60,
        3px 1px 0 0 #7A7A60,
        4px 1px 0 0 #7A7A60,
        5px 1px 0 0 #7A7A60,
        6px 1px 0 0 #7A7A60,
        7px 1px 0 0 #7A7A60,
        8px 1px 0 0 #7A7A60,
        9px 1px 0 0 #7A7A60,
        10px 1px 0 0 #7A7A60,
        1px 2px 0 0 #8A9A78,
        2px 2px 0 0 #F5F0E8,
        3px 2px 0 0 #7A7A60,
        4px 2px 0 0 #7A7A60,
        5px 2px 0 0 #7A7A60,
        6px 2px 0 0 #F5F0E8,
        7px 2px 0 0 #7A7A60,
        8px 2px 0 0 #7A7A60,
        9px 2px 0 0 #7A7A60,
        10px 2px 0 0 #F5F0E8,
        11px 2px 0 0 #8A9A78,
        1px 3px 0 0 #8A9A78,
        2px 3px 0 0 #F5F0E8,
        3px 3px 0 0 #F5F0E8,
        4px 3px 0 0 #F5F0E8,
        5px 3px 0 0 #F5F0E8,
        6px 3px 0 0 #F5F0E8,
        7px 3px 0 0 #F5F0E8,
        8px 3px 0 0 #F5F0E8,
        9px 3px 0 0 #F5F0E8,
        10px 3px 0 0 #F5F0E8,
        11px 3px 0 0 #8A9A78,
        1px 4px 0 0 #8A9A78,
        2px 4px 0 0 #F5F0E8,
        3px 4px 0 0 #7A7A60,
        4px 4px 0 0 #7A7A60,
        5px 4px 0 0 #7A7A60,
        6px 4px 0 0 #7A7A60,
        7px 4px 0 0 #7A7A60,
        8px 4px 0 0 #F5F0E8,
        9px 4px 0 0 #F5F0E8,
        10px 4px 0 0 #F5F0E8,
        11px 4px 0 0 #8A9A78,
        1px 5px 0 0 #8A9A78,
        2px 5px 0 0 #F5F0E8,
        3px 5px 0 0 #F5F0E8,
        4px 5px 0 0 #F5F0E8,
        5px 5px 0 0 #F5F0E8,
        6px 5px 0 0 #F5F0E8,
        7px 5px 0 0 #F5F0E8,
        8px 5px 0 0 #F5F0E8,
        9px 5px 0 0 #F5F0E8,
        10px 5px 0 0 #F5F0E8,
        11px 5px 0 0 #8A9A78,
        2px 6px 0 0 #7A7A60,
        3px 6px 0 0 #7A7A60,
        4px 6px 0 0 #7A7A60,
        5px 6px 0 0 #7A7A60,
        6px 6px 0 0 #7A7A60,
        7px 6px 0 0 #7A7A60,
        8px 6px 0 0 #7A7A60,
        9px 6px 0 0 #7A7A60,
        10px 6px 0 0 #7A7A60;
}

/* --- Organic Blob Decorations --- */
.blob-decoration {
    position: absolute;
    background-color: rgba(138, 154, 120, 0.15);
    z-index: 0;
    pointer-events: none;
}

.blob-1 {
    width: 120px;
    height: 100px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: -20px;
    right: -30px;
}

.blob-2 {
    width: 140px;
    height: 110px;
    border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
    bottom: -25px;
    left: -35px;
}

.blob-3 {
    width: 100px;
    height: 130px;
    border-radius: 50% 50% 30% 70% / 70% 30% 70% 30%;
    top: -15px;
    left: -25px;
}

.blob-4 {
    width: 130px;
    height: 90px;
    border-radius: 40% 60% 70% 30% / 50% 50% 50% 50%;
    bottom: -20px;
    right: -20px;
}

.blob-5 {
    width: 110px;
    height: 120px;
    border-radius: 60% 40% 30% 70% / 60% 40% 60% 40%;
    top: 10px;
    right: -15px;
}

.blob-6 {
    width: 125px;
    height: 95px;
    border-radius: 30% 70% 60% 40% / 40% 70% 30% 60%;
    bottom: -10px;
    left: -20px;
}

/* --- Bounce-Enter Animation for Nodes --- */
.node {
    opacity: 0;
    transform: translateY(30px);
}

.node.is-visible {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    60% {
        opacity: 1;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered delay for alternating sides */
.timeline-right.node.is-visible {
    animation-delay: 150ms;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 64px 24px 48px;
    background-color: #E8E0D8;
    border-top: 2px dashed #D0C8C0;
}

.footer-pixel-star {
    width: 1px;
    height: 1px;
    background: transparent;
    image-rendering: pixelated;
    transform: scale(3);
    margin: 0 auto 32px;
    display: inline-block;
    box-shadow:
        3px 0px 0 0 #B88A80,
        3px 1px 0 0 #B88A80,
        1px 2px 0 0 #B88A80,
        2px 2px 0 0 #B88A80,
        3px 2px 0 0 #FFFFF0,
        4px 2px 0 0 #B88A80,
        5px 2px 0 0 #B88A80,
        3px 3px 0 0 #B88A80,
        3px 4px 0 0 #B88A80,
        2px 3px 0 0 #8A9A78,
        4px 3px 0 0 #8A9A78,
        1px 4px 0 0 #8A9A78,
        5px 4px 0 0 #8A9A78;
}

.footer-text {
    font-family: 'Silkscreen', cursive;
    font-size: clamp(14px, 2vw, 20px);
    color: #5A4A3A;
    margin-bottom: 8px;
}

.footer-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: #7A7A60;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .timeline-spine {
        left: 24px;
    }

    .timeline-node {
        left: 24px;
    }

    .timeline-left .timeline-card,
    .timeline-right .timeline-card {
        margin-left: 56px;
        margin-right: 0;
        width: calc(100% - 56px);
        text-align: left;
        border-radius: 2px 8px 8px 2px;
    }

    .timeline-left .timeline-card .card-icon-star,
    .timeline-left .timeline-card .card-icon-bracket,
    .timeline-left .timeline-card .card-icon-bulb,
    .timeline-left .timeline-card .card-icon-compass,
    .timeline-left .timeline-card .card-icon-book {
        float: left;
        transform-origin: top left;
        margin-right: 16px;
        margin-left: 0;
    }

    .logotype {
        gap: 4px;
        transform: scale(0.8);
    }

    .pixel-star {
        left: 48%;
    }
}

@media (max-width: 480px) {
    .logotype {
        transform: scale(0.6);
    }

    .timeline-section {
        padding: 40px 16px 80px;
    }
}