/* oning.stream - Isometric Reasoning Apparatus */
/* Colors: #FAF6F0, #2A2218, #4A6A8A, #F0E8D8, #7A6E58, #D0C4A8, #C4920A, #8A7458 */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Karla', sans-serif;
    color: #2A2218;
    background-color: #F0E8D8;
    overflow-x: hidden;
}

.parchment-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #F0E8D8;
    z-index: -3;
}

.parchment-bg::after {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none; z-index: -2;
}

.circuit-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1;
}

.circuit-trace {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawCircuit 3s ease 0.5s forwards;
}

.blob {
    position: fixed; border-radius: 50% 40% 60% 45%;
    background: #4A6A8A; opacity: 0.05; pointer-events: none; z-index: -1;
}
.thought-blob-1 { width: 250px; height: 230px; top: 20%; right: -40px; }
.thought-blob-2 { width: 200px; height: 210px; bottom: 15%; left: -30px; }

.hero {
    text-align: center; padding: 100px 24px 40px; position: relative; z-index: 1;
}

.hero-title {
    font-family: 'Bitter', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700; color: #2A2218;
    opacity: 0; animation: fadeInUp 0.8s ease 3s forwards;
}

.hero-sub {
    font-family: 'Anonymous Pro', monospace;
    font-size: 14px; color: #8A7458; margin-top: 8px;
    opacity: 0; animation: fadeInUp 0.6s ease 3.3s forwards;
}

.reasoning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; max-width: 960px; margin: 0 auto;
    padding: 40px 24px 100px; position: relative; z-index: 1;
}

.reason-card {
    background: #FAF6F0; border: 1px solid #D0C4A8;
    border-radius: 6px; padding: 24px; position: relative;
    overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease;
    opacity: 0; animation: cardReveal 0.5s ease forwards;
}

.reason-card:nth-child(1) { animation-delay: 3.4s; }
.reason-card:nth-child(2) { animation-delay: 3.5s; }
.reason-card:nth-child(3) { animation-delay: 3.6s; }
.reason-card:nth-child(4) { animation-delay: 3.7s; }
.reason-card:nth-child(5) { animation-delay: 3.8s; }
.reason-card:nth-child(6) { animation-delay: 3.9s; }

.reason-card:hover {
    border-color: #7A6E58;
    box-shadow: 0 4px 16px rgba(42, 34, 24, 0.08);
}

.card-premise:hover { border-color: #7A6E58; }
.card-inference:hover { border-color: #4A6A8A; }
.card-objection:hover { border-color: #C4920A; }
.card-conclusion:hover { border-color: #2A2218; }

.card-type-badge {
    font-family: 'Anonymous Pro', monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 3px;
    display: inline-block; margin-bottom: 12px;
}

.card-premise .card-type-badge { color: #7A6E58; background: rgba(122, 110, 88, 0.08); }
.card-inference .card-type-badge { color: #4A6A8A; background: rgba(74, 106, 138, 0.08); }
.card-objection .card-type-badge { color: #C4920A; background: rgba(196, 146, 10, 0.08); }
.card-conclusion .card-type-badge { color: #2A2218; background: rgba(42, 34, 24, 0.08); }

.card-gear {
    position: absolute; top: 12px; right: 12px;
    width: 24px; height: 24px;
}

.card-heading {
    font-family: 'Bitter', serif;
    font-size: 1.15rem; font-weight: 700; color: #2A2218; margin-bottom: 8px;
}

.card-body {
    font-family: 'Karla', sans-serif;
    font-size: 0.9rem; line-height: 1.7; color: #8A7458; margin-bottom: 12px;
}

.card-notation {
    font-family: 'Anonymous Pro', monospace;
    font-size: 13px; color: #4A6A8A; display: block;
    padding-top: 8px; border-top: 1px solid #D0C4A8;
}

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

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cardReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .reasoning-grid { grid-template-columns: 1fr; padding: 24px 16px 60px; }
    .hero { padding: 60px 16px 30px; }
}