/* ═══════════════════════════════════════════════════════════════════
   homepage.css — lo-fi net art overrides
   loaded AFTER style.css
   jodi.org meets a poetry chapbook
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   Custom Properties
   ───────────────────────────────────────────────────── */

:root {
    --hp-reveal-duration: 0.4s;
    --hp-reveal-easing: ease-out;
    --hp-stagger-base: 0.05s;
    --hp-accent: #d4a574;
    --hp-accent-alt: #c9964f;
    --hp-void-bg: #1a1a18;
    --hp-void-text: #e8e4db;
    --hp-scanline-opacity: 0.04;
}

/* ─────────────────────────────────────────────────────
   Body Override for Homepage
   ───────────────────────────────────────────────────── */

/* Ensure homepage body uses dark void background */
body:has(.hero) {
    background-color: var(--hp-void-bg) !important;
    color: var(--hp-void-text) !important;
}

/* Fallback for browsers that don't support :has() */
.hero {
    background-color: var(--hp-void-bg);
}

.hero ~ section,
.hero ~ div,
.hero ~ .main {
    background-color: var(--hp-void-bg);
}

/* ─────────────────────────────────────────────────────
   Navigation Override for Homepage
   ───────────────────────────────────────────────────── */

/* Hide primary navigation on homepage - conflicts with dark void aesthetic */
.header .nav {
    display: none;
}

/* Keep secondary navigation if it exists (more aligned with terminal feel) */
.header .nav-secondary {
    color: var(--hp-void-text);
}

.header .nav-secondary a {
    color: var(--hp-void-text);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.header .nav-secondary a:hover {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   1. HERO SECTION — terminal boot sequence
   ═══════════════════════════════════════════════════════════════════ */

/* Staggered reveal: each child fades in sequentially */
@keyframes hero-line-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content > * {
    opacity: 0;
    animation: hero-line-in 0.6s var(--hp-reveal-easing) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.35s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.85s; }
.hero-content > *:nth-child(5) { animation-delay: 1.1s; }
.hero-content > *:nth-child(6) { animation-delay: 1.35s; }

/* Scanline effect on hero title */
.hero-title {
    position: relative;
}

.hero-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(42, 42, 40, var(--hp-scanline-opacity)) 2px,
        rgba(42, 42, 40, var(--hp-scanline-opacity)) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Breathing divider */
@keyframes divider-breathe {
    0%, 100% { letter-spacing: 0.2em; opacity: 0.6; }
    50%      { letter-spacing: 0.5em; opacity: 1; }
}

.hero-divider {
    animation: divider-breathe 4s ease-in-out infinite;
}

/* The breathing line element */
.hero-line {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--hp-accent);
    margin: 0 auto;
    transition: width 0.3s ease;
}

/* Status line: monospace system readout */
.hero-status {
    font-family: var(--font-family-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    text-transform: lowercase;
    margin-top: 20px;
    opacity: 0.5;
}

/* Irreverent skew on explainer */
.hero-explainer {
    transform: rotate(-0.3deg);
}


/* ═══════════════════════════════════════════════════════════════════
   2. SCROLL-TRIGGERED SECTION REVEALS
   ═══════════════════════════════════════════════════════════════════ */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--hp-reveal-duration) var(--hp-reveal-easing),
        transform var(--hp-reveal-duration) var(--hp-reveal-easing);
}

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

/* Stagger children */
.reveal.visible > *:nth-child(1) { transition-delay: calc(var(--hp-stagger-base) * 1); }
.reveal.visible > *:nth-child(2) { transition-delay: calc(var(--hp-stagger-base) * 2); }
.reveal.visible > *:nth-child(3) { transition-delay: calc(var(--hp-stagger-base) * 3); }
.reveal.visible > *:nth-child(4) { transition-delay: calc(var(--hp-stagger-base) * 4); }
.reveal.visible > *:nth-child(5) { transition-delay: calc(var(--hp-stagger-base) * 5); }
.reveal.visible > *:nth-child(6) { transition-delay: calc(var(--hp-stagger-base) * 6); }

.reveal.visible > * {
    transition:
        opacity var(--hp-reveal-duration) var(--hp-reveal-easing),
        transform var(--hp-reveal-duration) var(--hp-reveal-easing);
}


/* ═══════════════════════════════════════════════════════════════════
   3. SECTION TREATMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* --- Featured Thread: pulsing left border --- */

@keyframes border-pulse {
    0%, 100% { border-left-color: rgba(212, 165, 116, 0.3); }
    50%      { border-left-color: rgba(212, 165, 116, 0.7); }
}

.featured-thread {
    border-left: 2px dashed rgba(212, 165, 116, 0.3);
    animation: border-pulse 3s ease-in-out infinite;
}

/* --- Research Thread Columns: nervous hover --- */

.research-threads-grid .research-thread-column {
    transition: transform 0.2s var(--hp-reveal-easing);
}

.research-threads-grid .research-thread-column:hover {
    transform: translateX(-2px);
}

/* --- Threshold Zone: the void --- */

.threshold-zone {
    background-color: var(--hp-void-bg);
    color: var(--hp-void-text);
}

.threshold-zone .section-title,
.threshold-zone .section-descriptor,
.threshold-zone .threshold-piece h3 a,
.threshold-zone .threshold-piece-summary,
.threshold-zone .piece-meta,
.threshold-zone .see-all a {
    color: var(--hp-void-text);
}

.threshold-zone .threshold-piece {
    background: rgba(245, 241, 232, 0.05);
    border-left-color: rgba(168, 168, 168, 0.4);
}

.threshold-zone .see-all a:hover {
    color: var(--hp-accent);
}

/* --- How to Read: README treatment --- */

.how-to-read {
    font-family: var(--font-family-mono);
    font-size: 14px;
}

.how-to-read .reading-path h3 {
    font-family: var(--font-family-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.how-to-read .reading-path p {
    font-family: var(--font-family-mono);
    font-size: 13px;
    line-height: 1.6;
}

/* --- Section Titles: system labels --- */

.section-title {
    font-family: var(--font-family-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 400;
}

/* --- Section Descriptors: the human voice --- */

.section-descriptor {
    font-family: var(--font-family-serif);
    font-size: 18px;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   4. ARCHIVE SECTION REDESIGN
   ═══════════════════════════════════════════════════════════════════ */

/* Remove hatch pattern and invert filter */
.archive {
    background: var(--hp-void-bg);
    filter: none;
    color: var(--hp-void-text);
    padding: 40px;
    border-top: none;
    border-bottom: none;
}

.archive h2 {
    color: var(--hp-void-text);
}

.archive-structure {
    color: var(--hp-void-text);
    border-color: rgba(232, 227, 216, 0.15);
    background: rgba(245, 241, 232, 0.03);
}

/* Archive links: horizontal flex with pipe separators */
.archive-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 24px;
}

.archive-links a {
    color: var(--hp-void-text);
    text-decoration: none;
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-variant: small-caps;
    padding: 4px 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.archive-links a:hover {
    background: rgba(212, 165, 116, 0.2);
    color: var(--hp-accent);
}

/* Pipe separators between links */
.archive-links a + a::before {
    content: "|";
    color: rgba(232, 227, 216, 0.3);
    margin-right: 12px;
    font-variant: normal;
}

/* Archive header */
.archive-header {
    margin-bottom: 32px;
}

/* Archive grid: three columns of category counts */
.archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.archive-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.archive-category {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.archive-count {
    font-family: var(--font-family-mono);
    font-size: 32px;
    font-weight: 400;
    color: var(--hp-accent);
    line-height: 1;
}

.archive-label {
    font-family: var(--font-family-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hp-void-text);
}

.archive-sub {
    font-family: var(--font-family-serif);
    font-size: 13px;
    font-style: italic;
    color: rgba(232, 227, 216, 0.5);
}

/* Colophon */
.archive-colophon {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(232, 227, 216, 0.1);
}

.archive-colophon p {
    font-family: var(--font-family-mono);
    font-size: 12px;
    color: rgba(232, 227, 216, 0.4);
    margin: 0;
}

/* Mobile: stack archive grid */
@media (max-width: 768px) {
    .archive-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY FLOURISHES
   ═══════════════════════════════════════════════════════════════════ */

/* Callout blockquotes: larger, centered, em-dash framed */
.featured-thread-callout blockquote {
    font-size: 20px;
    text-align: center;
    position: relative;
    padding: 0 2em;
}

.featured-thread-callout blockquote::before {
    content: "\2014";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hp-accent);
    font-size: 20px;
}

.featured-thread-callout blockquote::after {
    content: "\2014";
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--hp-accent);
    font-size: 20px;
}

/* Featured thread label: badge style */
.featured-thread-label {
    display: inline-block;
    border: 1px solid var(--color-muted);
    padding: 2px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transform: rotate(0.5deg);
}

/* Rotation notice: dim, reveals on hover */
.rotation-notice {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.rotation-notice:hover {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   6. INTERACTIVE HOVER STATES
   ═══════════════════════════════════════════════════════════════════ */

/* Featured pieces: accent border slides in on hover */
.featured-piece {
    border-left: 3px solid transparent;
    padding-left: 0;
    transition:
        border-left-color 0.25s ease,
        padding-left 0.25s ease;
}

.featured-piece:hover {
    border-left-color: var(--hp-accent);
    padding-left: 8px;
}

/* Thread link / read-more: arrow slides in */
.thread-link,
.read-more {
    position: relative;
    display: inline-block;
    transition: padding-left 0.25s ease;
}

.thread-link::before,
.read-more::before {
    content: "\2192";
    position: absolute;
    left: -1em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.thread-link:hover,
.read-more:hover {
    padding-left: 1.2em;
}

.thread-link:hover::before,
.read-more:hover::before {
    opacity: 1;
    transform: translateX(0);
    left: 0;
}

/* Nav links: letter-spacing spread on hover */
.nav-triangle-vertex a,
.nav-secondary a {
    transition: letter-spacing 0.2s ease, color 0.2s ease;
}

.nav-triangle-vertex a:hover,
.nav-secondary a:hover {
    letter-spacing: 0.08em;
}


/* ═══════════════════════════════════════════════════════════════════
   7. MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Reduce stagger delays */
    :root {
        --hp-stagger-base: 0.03s;
    }

    .hero-content > *:nth-child(1) { animation-delay: 0.05s; }
    .hero-content > *:nth-child(2) { animation-delay: 0.15s; }
    .hero-content > *:nth-child(3) { animation-delay: 0.25s; }
    .hero-content > *:nth-child(4) { animation-delay: 0.35s; }
    .hero-content > *:nth-child(5) { animation-delay: 0.45s; }
    .hero-content > *:nth-child(6) { animation-delay: 0.55s; }

    /* Hero sizing */
    .hero {
        padding: 40px 20px;
    }

    .hero-title {
        font-size: 28px;
    }

    /* Threshold zone stays inverted (no override needed, just confirming) */
    .threshold-zone {
        background-color: var(--hp-void-bg);
        color: var(--hp-void-text);
    }

    /* Stack archive links vertically */
    .archive-links {
        flex-direction: column;
        align-items: flex-start;
    }

    .archive-links a + a::before {
        content: none;
    }

    .archive-links a {
        padding: 6px 0;
    }

    /* Stack homepage section grids on mobile */
    .featured-vigils,
    .featured-wanderings,
    .threshold-content,
    .oo-lens-content {
        grid-template-columns: 1fr;
    }

    .research-threads-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }
}