/* ============================================
   chloengine.com - Translucent Frost / Retro Tech
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --substrate: #0d1b22;
    --frost-layer-1: rgba(40, 70, 85, 0.55);
    --frost-layer-2: rgba(25, 50, 62, 0.75);
    --border-ice: #4a6670;
    --border-deep: #3a5560;
    --text-primary: #e8f0f4;
    --text-secondary: #c0d0d8;
    --text-tertiary: #8a9ca6;
    --accent-warm: #e8a840;
    --accent-cool: #68e0cf;
    --accent-alert: #d45050;
    --frost-bloom: rgba(104, 224, 207, 0.12);
    --frost-glow: rgba(104, 224, 207, 0.04);
    --gap: 8px;
    --radius: 2px;
    --max-width: 1280px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Zilla Slab', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.72;
    color: var(--text-secondary);
    background-color: var(--substrate);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- SVG Filter (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Background Particle Canvas --- */
#particle-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- Bento Container --- */
.bento-container {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: min(5vw, 64px);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    grid-template-areas:
        "header   header   header   header   header   header   header   header   header   header   header   header"
        "hero     hero     hero     hero     hero     hero     hero     hero     hero     hero     hero     hero"
        "hero     hero     hero     hero     hero     hero     hero     hero     hero     hero     hero     hero"
        "pipeline pipeline pipeline pipeline pipeline pipeline pipeline pipeline pipeline pipeline pipeline pipeline"
        "vertices vertices vertices vertices vertices vertices shaders  shaders  shaders  shaders  shaders  shaders"
        "buffers  buffers  buffers  buffers  buffers  buffers  frames   frames   frames   frames   frames   frames"
        "demo     demo     demo     demo     demo     demo     demo     demo     demo     demo     demo     demo"
        "demo     demo     demo     demo     demo     demo     demo     demo     demo     demo     demo     demo"
        "doc1     doc1     doc1     doc2     doc2     doc2     doc3     doc3     doc3     doc4     doc4     doc4"
        "footer   footer   footer   footer   footer   footer   footer   footer   footer   footer   footer   footer";
}

/* --- Bento Cell Base --- */
.bento-cell {
    position: relative;
    background: var(--frost-layer-1);
    border: 1px solid transparent;
    border-radius: var(--radius);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: inset 0 0 30px var(--frost-glow);
    overflow: hidden;
    padding: clamp(16px, 2vw, 32px);
}

/* Frost noise overlay on each cell */
.bento-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#frost-noise);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* Border-animate overlay */
.cell-border-overlay {
    position: absolute;
    inset: 0;
    border: 1px solid var(--border-ice);
    border-radius: var(--radius);
    pointer-events: none;
    z-index: 10;
    clip-path: inset(0 100% 100% 0);
    transition: none;
}

.bento-cell.border-animating .cell-border-overlay {
    animation: border-draw 0.6s ease-out forwards;
}

.bento-cell.border-complete .cell-border-overlay {
    clip-path: inset(0 0 0 0);
    border-color: var(--border-ice);
}

.bento-cell.border-flash .cell-border-overlay {
    border-color: var(--accent-cool);
}

@keyframes border-draw {
    0% {
        clip-path: inset(0 100% 100% 0);
    }
    25% {
        clip-path: inset(0 0 100% 0);
    }
    50% {
        clip-path: inset(0 0 0 100%);
    }
    75% {
        clip-path: inset(100% 0 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* --- Grid Area Assignments --- */
.cell-header    { grid-area: header; }
.cell-hero      { grid-area: hero; }
.cell-pipeline  { grid-area: pipeline; }
.cell-vertices  { grid-area: vertices; }
.cell-shaders   { grid-area: shaders; }
.cell-buffers   { grid-area: buffers; }
.cell-frames    { grid-area: frames; }
.cell-demo      { grid-area: demo; }
.cell-footer    { grid-area: footer; }

.cell-doc-link:nth-of-type(1) { grid-area: doc1; }
.cell-doc-link:nth-of-type(2) { grid-area: doc2; }
.cell-doc-link:nth-of-type(3) { grid-area: doc3; }
.cell-doc-link:nth-of-type(4) { grid-area: doc4; }

/* --- doc links use data-cell for specificity --- */
a.bento-cell[data-cell="doc1"] { grid-area: doc1; }
a.bento-cell[data-cell="doc2"] { grid-area: doc2; }
a.bento-cell[data-cell="doc3"] { grid-area: doc3; }
a.bento-cell[data-cell="doc4"] { grid-area: doc4; }

/* --- Header --- */
.cell-header {
    background: var(--frost-layer-2);
    padding: clamp(12px, 1.5vw, 20px) clamp(16px, 2vw, 32px);
    display: flex;
    align-items: center;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.wordmark {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.main-nav {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
}

.nav-link {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    position: relative;
    transition: color 0.2s ease;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-cool);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-cool);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    width: 100%;
    background: var(--accent-warm);
}

/* --- Hero Cell --- */
.cell-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cell-hero .cell-border-overlay {
    /* Slower hero border animation */
}

.cell-hero.border-animating .cell-border-overlay {
    animation-duration: 0.8s;
}

#vertex-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cell-hero.hero-canvas-visible #vertex-grid {
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cell-hero.hero-text-visible .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--text-primary);
    letter-spacing: 0.06em;
    margin-bottom: 0.4em;
}

.hero-tagline {
    font-family: 'Zilla Slab', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.cell-hero.hero-text-visible .hero-tagline {
    opacity: 1;
    transform: translateY(0);
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Roboto Slab', serif;
    color: var(--text-primary);
}

h1 {
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0.02em;
}

h2 {
    font-weight: 700;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    letter-spacing: 0.01em;
    margin-bottom: 0.6em;
    position: relative;
    z-index: 2;
}

h3 {
    font-weight: 700;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    letter-spacing: 0.01em;
    margin-bottom: 0.5em;
    position: relative;
    z-index: 2;
}

p {
    position: relative;
    z-index: 2;
}

/* --- Pipeline Section --- */
.cell-pipeline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}

.pipeline-stage {
    display: flex;
    align-items: center;
}

.stage-box {
    background: var(--frost-layer-2);
    border: 1px solid var(--border-ice);
    border-radius: 4px;
    padding: clamp(8px, 1.2vw, 16px) clamp(12px, 1.5vw, 24px);
    white-space: nowrap;
}

.stage-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: var(--accent-cool);
}

.pipeline-connector {
    width: clamp(30px, 4vw, 60px);
    height: 20px;
    flex-shrink: 0;
}

.connector-line {
    width: 100%;
    height: 100%;
}

.flow-dash {
    stroke: var(--accent-cool);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    animation: dash-flow 3s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -30;
    }
}

/* --- Core Concept Cells --- */
.cell-vertices,
.cell-shaders,
.cell-buffers,
.cell-frames {
    display: flex;
    flex-direction: column;
}

/* --- Shader Gradient Background --- */
.cell-shaders {
    position: relative;
}

.shader-gradient-bg {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        rgba(104, 224, 207, 0.1),
        #0d1b22,
        rgba(232, 168, 64, 0.05),
        #0d1b22,
        rgba(104, 224, 207, 0.1)
    );
    z-index: 0;
    animation: shader-rotate 720s linear infinite;
}

@keyframes shader-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* --- Code Blocks --- */
.code-block {
    background: var(--frost-layer-2);
    border: 1px solid var(--border-deep);
    border-radius: var(--radius);
    padding: clamp(10px, 1.2vw, 16px);
    margin-top: auto;
    position: relative;
    z-index: 2;
    transition: border-color 0.3s ease;
    overflow-x: auto;
}

.code-block:hover {
    border-color: var(--accent-cool);
}

.code-line {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    line-height: 1.7;
    color: var(--text-secondary);
    display: flex;
    align-items: baseline;
    white-space: pre;
}

.line-num {
    color: var(--text-tertiary);
    opacity: 0.6;
    width: 2.5em;
    flex-shrink: 0;
    text-align: right;
    margin-right: 1em;
    user-select: none;
}

.code-keyword {
    color: var(--accent-cool);
}

.code-string {
    color: var(--accent-warm);
}

/* --- Demo Cell --- */
.cell-demo {
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.demo-description {
    font-weight: 300;
    color: var(--text-tertiary);
    margin-bottom: 1em;
    position: relative;
    z-index: 2;
}

#wireframe-cube {
    flex: 1;
    width: 100%;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

/* --- Documentation Link Cells --- */
.cell-doc-link {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cell-doc-link:hover {
    background: var(--frost-bloom);
}

.cell-doc-link:hover h3 {
    color: var(--accent-cool);
}

.doc-desc {
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    color: var(--text-tertiary);
    font-weight: 300;
    flex: 1;
}

.doc-arrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.2rem;
    color: var(--accent-cool);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.cell-doc-link:hover .doc-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Footer --- */
.cell-footer {
    background: var(--frost-layer-2);
    padding: clamp(12px, 1.5vw, 20px) clamp(16px, 2vw, 32px);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.footer-version,
.footer-copy,
.footer-repo {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    color: var(--text-tertiary);
}

.footer-repo {
    color: var(--accent-cool);
}

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {
    .bento-container {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "header   header   header   header   header   header"
            "hero     hero     hero     hero     hero     hero"
            "hero     hero     hero     hero     hero     hero"
            "pipeline pipeline pipeline pipeline pipeline pipeline"
            "vertices vertices vertices shaders  shaders  shaders"
            "buffers  buffers  buffers  frames   frames   frames"
            "demo     demo     demo     demo     demo     demo"
            "demo     demo     demo     demo     demo     demo"
            "doc1     doc1     doc1     doc2     doc2     doc2"
            "doc3     doc3     doc3     doc4     doc4     doc4"
            "footer   footer   footer   footer   footer   footer";
    }

    .pipeline-flow {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pipeline-connector {
        width: 30px;
    }
}

/* --- Mobile (max 640px) --- */
@media (max-width: 640px) {
    .bento-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "header   header"
            "hero     hero"
            "hero     hero"
            "pipeline pipeline"
            "vertices vertices"
            "shaders  shaders"
            "buffers  buffers"
            "frames   frames"
            "demo     demo"
            "demo     demo"
            "doc1     doc2"
            "doc3     doc4"
            "footer   footer";
    }

    .main-nav {
        gap: 12px;
    }

    .nav-link {
        font-size: 0.75rem;
    }

    .cell-hero {
        min-height: 60vh;
    }

    .pipeline-flow {
        flex-direction: column;
        align-items: center;
    }

    .pipeline-connector {
        transform: rotate(90deg);
        width: 30px;
        height: 30px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}