/* logical.day -- isometric proof-tree */

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

:root{
    --slate:#0E1117;
    --chalk:#E8ECF1;
    --blue:#4C9EEB;
    --amber:#D4A84B;
    --teal:#2DBDA8;
    --grid-dim:#1E2530;
    --rose:#C74B6F;
    --fog:#6B7B8D;
}

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

body{
    background:var(--slate);
    color:var(--chalk);
    font-family:'Crimson Pro',serif;
    font-weight:400;
    font-size:clamp(1rem,1.8vw,1.25rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Minimap cube */
.minimap-cube{
    position:fixed;
    top:1.5rem;left:1.5rem;
    width:32px;height:32px;
    perspective:100px;
    z-index:100;
    cursor:pointer;
}

.cube-inner{
    width:100%;height:100%;
    position:relative;
    transform-style:preserve-3d;
    animation:cube-spin 30s linear infinite;
}

.cube-face{
    position:absolute;
    width:32px;height:32px;
    border:1px solid var(--blue);
    opacity:0.4;
}

.cube-face.front{transform:translateZ(16px)}
.cube-face.back{transform:translateZ(-16px)}
.cube-face.left{transform:rotateY(-90deg) translateZ(16px)}
.cube-face.right{transform:rotateY(90deg) translateZ(16px)}
.cube-face.top{transform:rotateX(90deg) translateZ(16px)}
.cube-face.bottom{transform:rotateX(-90deg) translateZ(16px)}

@keyframes cube-spin{
    from{transform:rotateX(15deg) rotateY(0deg)}
    to{transform:rotateX(15deg) rotateY(360deg)}
}

/* Isometric grid */
.iso-grid{
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(30deg,var(--grid-dim) 0px,var(--grid-dim) 1px,transparent 1px,transparent 60px),
        repeating-linear-gradient(-30deg,var(--grid-dim) 0px,var(--grid-dim) 1px,transparent 1px,transparent 60px);
    opacity:0.3;
    pointer-events:none;
}

.iso-grid.warp{
    perspective:800px;
    transform:perspective(800px) rotateX(5deg);
}

/* Proof zones */
.proof-zone{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:4rem 2rem;
    overflow:hidden;
}

/* Proposition cards */
.prop-card{
    background:rgba(30,37,48,0.8);
    border:1px solid var(--grid-dim);
    padding:clamp(1.5rem,2.5vw,2.5rem);
    position:relative;
    max-width:600px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.prop-card.visible{
    opacity:1;
    transform:translateY(0);
}

.prop-text{
    font-family:'Crimson Pro',serif;
    font-weight:400;
    line-height:1.65;
}

/* Zone A: Axioms */
.zone-axioms{
    background:var(--slate);
}

.axiom-tiles{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:3rem;
    z-index:2;
}

.axiom-card{
    border-color:var(--teal);
    max-width:400px;
}

.axiom-card .symbol{
    font-family:'JetBrains Mono',monospace;
    font-size:1.5rem;
    color:var(--teal);
    display:block;
    margin-bottom:0.75rem;
}

.zone-title{
    font-family:'Inclusive Sans',sans-serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--chalk);
    letter-spacing:0.04em;
    z-index:2;
}

/* Zone B: Derivations */
.zone-derivations{
    min-height:150vh;
}

.connector-svg{
    position:absolute;
    width:80%;
    top:10%;
    left:10%;
    z-index:1;
    opacity:0.4;
}

.draw-connector{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 1.5s ease;
}

.zone-derivations.in-view .draw-connector{
    stroke-dashoffset:0;
}

.derivation-flow{
    display:flex;
    flex-direction:column;
    gap:4rem;
    z-index:2;
    align-items:center;
}

.derive-card{
    border-left:3px solid var(--blue);
}

.rule-label{
    font-family:'JetBrains Mono',monospace;
    font-size:0.85rem;
    color:var(--blue);
    letter-spacing:0.04em;
    display:block;
    margin-bottom:0.75rem;
}

/* Zone C: Lemmas */
.lemma-cluster{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    max-width:700px;
    z-index:2;
}

.lemma-card{
    padding:1rem;
    border-color:var(--amber);
    text-align:center;
}

.lemma-text{
    font-family:'Crimson Pro',serif;
    font-weight:600;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--amber);
}

/* Zone D: Contradiction */
.zone-contradiction{
    background:var(--slate);
}

.contradiction-content{
    text-align:center;
    max-width:600px;
    z-index:2;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.contradiction-content.visible{
    opacity:1;
    transform:scale(1);
}

.contradiction-symbol{
    font-family:'JetBrains Mono',monospace;
    font-size:3rem;
    color:var(--rose);
    display:block;
    margin-bottom:1rem;
}

.contradiction-text{
    font-family:'Crimson Pro',serif;
    line-height:1.65;
}

/* Zone E: Q.E.D. */
.zone-qed{
    background:var(--slate);
}

.qed-card{
    background:rgba(30,37,48,0.9);
    border:2px solid var(--amber);
    padding:clamp(2rem,4vw,4rem);
    max-width:700px;
    text-align:center;
    z-index:2;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.qed-card.visible{
    opacity:1;
    transform:translateY(0);
}

.qed-heading{
    font-family:'Inclusive Sans',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,4vw,4rem);
    color:var(--amber);
    letter-spacing:0.04em;
    margin-bottom:1.5rem;
}

.qed-text{
    font-family:'Crimson Pro',serif;
    font-weight:400;
    line-height:1.65;
    margin-bottom:2rem;
}

.qed-domain{
    font-family:'JetBrains Mono',monospace;
    font-size:0.85rem;
    color:var(--fog);
    letter-spacing:0.04em;
}

/* Responsive */
@media(max-width:768px){
    .axiom-tiles{flex-direction:column;align-items:center}
    .lemma-cluster{grid-template-columns:repeat(2,1fr)}
    .connector-svg{display:none}
}

@media(prefers-reduced-motion:reduce){
    .cube-inner{animation:none}
    .draw-connector{stroke-dashoffset:0;transition:none}
    .prop-card,.contradiction-content,.qed-card{
        opacity:1;transform:none;transition:none;
    }
}