/* ringworld.quest - Retro-Futuristic meets Pixel Art */

:root {
    --void-above: #0a1028;
    --ring-star: #c8a040;
    --surface: #4a6838;
    --sunset-band: #c86830;
    --upper-ring: #8878b0;
    --parchment: #f0ece0;
    --carbon: #2a2828;
    --scanner-green: #48b068;
    --aged-rule: #d0c8b8;
}

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

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: var(--carbon);
    background-color: var(--parchment);
    overflow-x: hidden;
    line-height: 1.85;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
}

h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* Paper noise overlay */
#paper-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1000;
}

/* Section 1: The Arrival */
#arrival {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sky-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, var(--void-above) 0%, #1a2040 30%, var(--upper-ring) 60%, var(--ring-star) 85%, var(--sunset-band) 100%);
}

.horizon-svg {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 14%;
    z-index: 2;
}

.horizon-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawHorizon 1.2s ease 0.3s forwards;
}

@keyframes drawHorizon {
    to { stroke-dashoffset: 0; }
}

.terrain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: var(--surface);
}

.arrival-text {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: 5vh;
}

.site-title {
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    color: var(--parchment);
    text-shadow: 0 0 20px rgba(200, 160, 64, 0.4);
    opacity: 0;
    animation: titleFadeIn 0.8s ease 1.5s forwards;
}

.expedition-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--ring-star);
    margin-top: 1rem;
    opacity: 0;
    animation: titleFadeIn 0.6s ease 2s forwards;
}

@keyframes titleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Section 2: Log Entries */
#log-entries {
    background-color: var(--parchment);
    padding: 6rem 0;
}

.log-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.log-entry {
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.log-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.entry-timestamp {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--scanner-green);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.entry-body {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.entry-text {
    flex: 1;
}

.entry-text h2 {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    color: var(--carbon);
}

.entry-text p {
    margin-top: 0.5rem;
}

.entry-rule {
    border: none;
    height: 1px;
    background-color: var(--aged-rule);
    margin-top: 3rem;
    width: 0;
    transition: width 0.3s ease;
}

.log-entry.visible .entry-rule {
    width: 100%;
}

/* Pixel Art */
.pixel-art {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
}

/* Pixel shelter - simple house shape */
#pixel-shelter {
    box-shadow:
        /* roof */
        12px 0px 0 0 var(--sunset-band),
        16px 0px 0 0 var(--sunset-band),
        20px 0px 0 0 var(--sunset-band),
        24px 0px 0 0 var(--sunset-band),
        28px 0px 0 0 var(--sunset-band),
        32px 0px 0 0 var(--sunset-band),
        8px 4px 0 0 var(--sunset-band),
        12px 4px 0 0 var(--sunset-band),
        16px 4px 0 0 var(--sunset-band),
        20px 4px 0 0 var(--sunset-band),
        24px 4px 0 0 var(--sunset-band),
        28px 4px 0 0 var(--sunset-band),
        32px 4px 0 0 var(--sunset-band),
        36px 4px 0 0 var(--sunset-band),
        /* walls */
        8px 8px 0 0 var(--aged-rule),
        12px 8px 0 0 var(--aged-rule),
        16px 8px 0 0 var(--aged-rule),
        20px 8px 0 0 var(--scanner-green),
        24px 8px 0 0 var(--aged-rule),
        28px 8px 0 0 var(--aged-rule),
        32px 8px 0 0 var(--aged-rule),
        36px 8px 0 0 var(--aged-rule),
        8px 12px 0 0 var(--aged-rule),
        12px 12px 0 0 var(--aged-rule),
        16px 12px 0 0 var(--aged-rule),
        20px 12px 0 0 var(--scanner-green),
        24px 12px 0 0 var(--aged-rule),
        28px 12px 0 0 var(--aged-rule),
        32px 12px 0 0 var(--aged-rule),
        36px 12px 0 0 var(--aged-rule),
        /* base */
        4px 16px 0 0 var(--surface),
        8px 16px 0 0 var(--surface),
        12px 16px 0 0 var(--surface),
        16px 16px 0 0 var(--surface),
        20px 16px 0 0 var(--surface),
        24px 16px 0 0 var(--surface),
        28px 16px 0 0 var(--surface),
        32px 16px 0 0 var(--surface),
        36px 16px 0 0 var(--surface),
        40px 16px 0 0 var(--surface);
    width: 4px;
    height: 4px;
    background: transparent;
}

/* Pixel plant */
#pixel-plant {
    box-shadow:
        /* stem */
        20px 16px 0 0 var(--surface),
        20px 12px 0 0 var(--surface),
        20px 8px 0 0 var(--surface),
        20px 4px 0 0 var(--surface),
        /* leaves */
        12px 4px 0 0 var(--scanner-green),
        16px 0px 0 0 var(--scanner-green),
        16px 4px 0 0 var(--scanner-green),
        24px 0px 0 0 var(--scanner-green),
        24px 4px 0 0 var(--scanner-green),
        28px 4px 0 0 var(--scanner-green),
        8px 8px 0 0 var(--upper-ring),
        12px 8px 0 0 var(--scanner-green),
        28px 8px 0 0 var(--scanner-green),
        32px 8px 0 0 var(--upper-ring),
        /* roots */
        16px 16px 0 0 var(--surface),
        24px 16px 0 0 var(--surface),
        12px 20px 0 0 var(--aged-rule),
        28px 20px 0 0 var(--aged-rule);
    width: 4px;
    height: 4px;
    background: transparent;
}

/* Pixel star */
#pixel-star {
    box-shadow:
        20px 0px 0 0 var(--ring-star),
        16px 4px 0 0 var(--ring-star),
        20px 4px 0 0 var(--ring-star),
        24px 4px 0 0 var(--ring-star),
        8px 8px 0 0 var(--ring-star),
        12px 8px 0 0 var(--ring-star),
        16px 8px 0 0 var(--ring-star),
        20px 8px 0 0 var(--parchment),
        24px 8px 0 0 var(--ring-star),
        28px 8px 0 0 var(--ring-star),
        32px 8px 0 0 var(--ring-star),
        16px 12px 0 0 var(--ring-star),
        20px 12px 0 0 var(--ring-star),
        24px 12px 0 0 var(--ring-star),
        20px 16px 0 0 var(--ring-star);
    width: 4px;
    height: 4px;
    background: transparent;
}

/* Pixel terrain */
#pixel-terrain {
    box-shadow:
        0px 12px 0 0 var(--surface),
        4px 12px 0 0 var(--surface),
        8px 8px 0 0 var(--surface),
        12px 4px 0 0 var(--surface),
        16px 4px 0 0 var(--surface),
        20px 0px 0 0 var(--surface),
        24px 0px 0 0 var(--surface),
        28px 4px 0 0 var(--surface),
        32px 8px 0 0 var(--surface),
        36px 8px 0 0 var(--surface),
        40px 12px 0 0 var(--surface),
        0px 16px 0 0 var(--aged-rule),
        4px 16px 0 0 var(--aged-rule),
        8px 16px 0 0 var(--aged-rule),
        12px 12px 0 0 var(--aged-rule),
        16px 8px 0 0 var(--aged-rule),
        20px 4px 0 0 var(--aged-rule),
        24px 4px 0 0 var(--aged-rule),
        28px 8px 0 0 var(--aged-rule),
        32px 12px 0 0 var(--aged-rule),
        36px 12px 0 0 var(--aged-rule),
        40px 16px 0 0 var(--aged-rule);
    width: 4px;
    height: 4px;
    background: transparent;
}

/* Pixel creature */
#pixel-creature {
    box-shadow:
        16px 0px 0 0 var(--carbon),
        20px 0px 0 0 var(--carbon),
        12px 4px 0 0 var(--carbon),
        16px 4px 0 0 var(--upper-ring),
        20px 4px 0 0 var(--upper-ring),
        24px 4px 0 0 var(--carbon),
        16px 8px 0 0 var(--carbon),
        20px 8px 0 0 var(--carbon),
        12px 12px 0 0 var(--carbon),
        16px 12px 0 0 var(--upper-ring),
        20px 12px 0 0 var(--upper-ring),
        24px 12px 0 0 var(--carbon),
        16px 16px 0 0 var(--carbon),
        20px 16px 0 0 var(--carbon),
        12px 20px 0 0 var(--carbon),
        24px 20px 0 0 var(--carbon);
    width: 4px;
    height: 4px;
    background: transparent;
}

/* Section 3: Ring Map */
#ring-map {
    padding: 8rem 2rem;
    text-align: center;
    background-color: var(--void-above);
    color: var(--parchment);
}

.map-title {
    color: var(--ring-star);
    margin-bottom: 3rem;
}

.ring-ellipse-svg {
    width: 90%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    display: block;
}

#expedition-dot {
    filter: drop-shadow(0 0 8px rgba(72, 176, 104, 0.6));
}

.map-note {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--scanner-green);
    margin-top: 2rem;
    opacity: 0.7;
}

/* Section 4: Upward Glance */
#upward-glance {
    height: 60vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5vh;
}

.terrain-above {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: var(--surface);
}

.horizon-inverted {
    top: 35%;
}

.sky-gradient-below {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(0deg, var(--void-above) 0%, #1a2040 30%, var(--upper-ring) 60%, var(--sunset-band) 85%, var(--ring-star) 100%);
}

.end-log {
    position: relative;
    z-index: 3;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--ring-star);
    opacity: 0;
    animation: titleFadeIn 0.6s ease 0.5s forwards;
}

/* Responsive */
@media (max-width: 768px) {
    .entry-body {
        flex-direction: column;
    }

    .pixel-art {
        margin-bottom: 1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .site-title,
    .expedition-tag,
    .end-log,
    .log-entry {
        opacity: 1 !important;
        transform: none !important;
    }

    .horizon-path {
        stroke-dashoffset: 0 !important;
    }

    .entry-rule {
        width: 100% !important;
    }
}