/* =============================================
   logic.day — Styles
   Creamy-pastel terminal aesthetic with
   timeline-vertical layout and kinetic typography
   ============================================= */

/* CSS Custom Properties (Palette from DESIGN.md) */
:root {
    --canvas: #F5F0E8;
    --ink: #2A2438;
    --body-text: #4A3F5C;
    --accent-rose: #D4A5A5;
    --accent-sky: #A5C4D4;
    --accent-sage: #C4D4A5;
    --accent-lavender: #EDE7F6;
    --accent-violet: #6B5B8A;
    --inversion-bg: #1E1A2A;
    --highlight: #E8D5A0;
    --timeline-line: #B8A9C4;

    --font-display: 'Space Mono', monospace;
    --font-body: 'DM Sans', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
}

/* =============================================
   Typography
   ============================================= */

.dm-sans {
    font-family: var(--font-body);
}

.kinetic-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 48px;
    color: var(--ink);
    line-height: 1.3;
    position: relative;
    display: inline-block;
}

.kinetic-heading .typed-text {
    display: inline;
}

.kinetic-heading .typed-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.05s, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kinetic-heading .typed-char.visible {
    opacity: 1;
    transform: translateY(0);
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background-color: var(--accent-rose);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: cursor-blink 530ms step-end infinite;
}

.cursor.fade {
    opacity: 0.3;
    animation: none;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.body-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--body-text);
    line-height: 1.65;
    max-width: 580px;
}

.code-pill {
    font-family: var(--font-code);
    font-size: 15px;
    font-weight: 400;
    color: var(--accent-violet);
    background-color: var(--accent-lavender);
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* =============================================
   Timeline Spine
   ============================================= */

.timeline-spine {
    position: fixed;
    left: 20%;
    top: 0;
    bottom: 0;
    width: 12px;
    z-index: 100;
    pointer-events: none;
}

.timeline-line {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--timeline-line);
    transition: background-color 0.4s;
}

.timeline-line.dotted {
    background: repeating-linear-gradient(
        to bottom,
        var(--timeline-line) 0px,
        var(--timeline-line) 4px,
        transparent 4px,
        transparent 6px
    );
}

.timeline-progress-dot {
    position: absolute;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-rose);
    top: 0;
    transition: top 0.1s linear;
    z-index: 101;
}

.timeline-node {
    position: absolute;
    left: -1px;
    transform: translateY(-50%);
    z-index: 102;
    transition: all 0.3s ease;
}

.timeline-node svg {
    display: block;
}

.timeline-node.active svg circle,
.timeline-node.active svg polygon,
.timeline-node.active svg rect {
    fill: var(--highlight);
}

/* =============================================
   Entry (Section) Base
   ============================================= */

.entry {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0;
    overflow: hidden;
}

.entry-content {
    position: relative;
    z-index: 10;
    margin-left: calc(20% + 40px);
    max-width: 680px;
    padding: 0 20px;
}

.entry-content-wide {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
}

.entry-content-centered {
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    text-align: center;
    padding: 0 40px;
}

/* =============================================
   Entry 1 — The Premise
   ============================================= */

.entry-1 {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 30vh;
}

.entry-1 .kinetic-heading {
    font-size: 64px;
}

.entry-subtitle {
    margin-top: 24px;
    font-size: 20px;
    color: var(--body-text);
    max-width: 480px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 1.5s, transform 0.8s ease 1.5s;
}

.entry-1.in-view .entry-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Floating icons */
.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.float-icon {
    position: absolute;
}

.float-icon:nth-child(1) {
    top: 20%;
    right: 15%;
}

.float-icon:nth-child(2) {
    bottom: 25%;
    right: 25%;
}

/* =============================================
   Entry 2 — First Axiom
   ============================================= */

.entry-2 .kinetic-heading {
    font-size: 42px;
}

.axiom-formal {
    margin: 24px 0;
}

.content-panel {
    background: var(--canvas);
    padding: 40px;
    position: relative;
    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    border: 1px solid var(--timeline-line);
}

/* =============================================
   Tilt-3D System
   ============================================= */

.tilt-panel {
    will-change: transform;
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tilt-right {
    transform: perspective(1200px) rotateY(2deg) rotateX(1deg);
}

.tilt-left {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.tilt-forward {
    transform: perspective(1200px) rotateX(2deg) rotateY(1deg);
}

.tilt-back {
    transform: perspective(1200px) rotateX(-2deg) rotateY(-1deg);
}

.tilt-panel:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* =============================================
   Entry 3 — The Derivation
   ============================================= */

.entry-3 .entry-title {
    font-size: 36px;
    margin-bottom: 40px;
}

.derivation-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.derivation-panel {
    padding: 28px 32px;
    background: var(--canvas);
    position: relative;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.derivation-panel.in-view {
    opacity: 1;
    transform: none;
}

.derivation-panel.tilt-right.in-view {
    transform: perspective(1200px) rotateY(2deg) rotateX(1deg);
}

.derivation-panel.tilt-left.in-view {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.derivation-panel.tilt-right.in-view:hover,
.derivation-panel.tilt-left.in-view:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.accent-rose {
    border-left: 3px solid var(--accent-rose);
}

.accent-sky {
    border-left: 3px solid var(--accent-sky);
}

.accent-sage {
    border-left: 3px solid var(--accent-sage);
}

.step-number {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--accent-violet);
    margin-bottom: 8px;
}

.step-formal {
    margin-bottom: 8px;
}

.step-description {
    font-size: 16px;
    color: var(--body-text);
}

/* =============================================
   Dark Gradient Transitions
   ============================================= */

.dark-gradient-transition {
    height: 100px;
    background: linear-gradient(to bottom, var(--canvas), var(--inversion-bg));
    position: relative;
    z-index: 5;
}

.light-gradient-transition {
    height: 100px;
    background: linear-gradient(to bottom, var(--inversion-bg), var(--canvas));
    position: relative;
    z-index: 5;
}

/* =============================================
   Entry 4 — The Paradox (Dark)
   ============================================= */

.entry-4.dark-entry {
    background-color: var(--inversion-bg);
    min-height: 100vh;
}

.entry-4 .kinetic-heading {
    color: var(--canvas);
    font-size: 48px;
}

.entry-4 .entry-content-wide {
    text-align: center;
}

.paradox-statement {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--canvas);
    margin: 40px 0 24px;
    font-style: italic;
}

.light-text {
    color: rgba(245, 240, 232, 0.85);
}

.paradox-icons {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
}

.dark-fragments .angular-fragment {
    opacity: 0.05;
    border-color: var(--highlight);
}

/* =============================================
   Entry 5 — Resolution
   ============================================= */

.entry-5 .kinetic-heading.large-statement {
    font-size: 42px;
}

.resolution-text {
    margin-top: 32px;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.floating-logic-symbols {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.symbol-float {
    position: absolute;
}

.symbol-float:nth-child(1) { top: 15%; left: 10%; }
.symbol-float:nth-child(2) { top: 35%; right: 12%; }
.symbol-float:nth-child(3) { bottom: 30%; left: 18%; }
.symbol-float:nth-child(4) { bottom: 15%; right: 20%; }
.symbol-float:nth-child(5) { top: 60%; left: 55%; }

/* =============================================
   Entry 6 — The Corollary
   ============================================= */

.entry-6 .entry-title {
    font-size: 36px;
    margin-bottom: 40px;
}

.corollary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 620px;
}

.corollary-card {
    background: var(--canvas);
    padding: 28px 24px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    border: 1px solid var(--timeline-line);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.corollary-card.in-view {
    opacity: 1;
    transform: none;
}

.corollary-card.tilt-forward.in-view {
    transform: perspective(1200px) rotateX(2deg) rotateY(1deg);
}
.corollary-card.tilt-back.in-view {
    transform: perspective(1200px) rotateX(-2deg) rotateY(-1deg);
}
.corollary-card.tilt-right.in-view {
    transform: perspective(1200px) rotateY(2deg) rotateX(1deg);
}
.corollary-card.tilt-left.in-view {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}

.corollary-card.tilt-forward.in-view:hover,
.corollary-card.tilt-back.in-view:hover,
.corollary-card.tilt-right.in-view:hover,
.corollary-card.tilt-left.in-view:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.card-icon {
    margin-bottom: 16px;
}

.card-formal {
    margin-bottom: 12px;
}

.card-text {
    font-size: 15px;
    color: var(--body-text);
    line-height: 1.55;
}

/* =============================================
   Entry 7 — QED
   ============================================= */

.entry-7 {
    min-height: 80vh;
}

.entry-7 .qed-heading {
    font-size: 64px;
    letter-spacing: 8px;
}

.qed-text {
    margin-top: 32px;
    text-align: center;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.qed-marker {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

/* =============================================
   Angular Background Fragments
   ============================================= */

.entry-bg-fragments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.angular-fragment {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0.04;
    transition: transform 1s ease-out;
}

/* Triangles and parallelograms */
.fragment-1 {
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 200px solid var(--accent-rose);
    top: 10%;
    right: 5%;
    transform: rotate(15deg);
}

.fragment-2 {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 140px solid var(--accent-sky);
    bottom: 15%;
    left: 8%;
    transform: rotate(-20deg);
}

.fragment-3 {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 180px solid var(--accent-sage);
    top: 15%;
    right: 10%;
    transform: rotate(25deg);
}

.fragment-4 {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid var(--accent-violet);
    bottom: 20%;
    left: 5%;
    transform: rotate(-10deg);
}

.fragment-5 {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 160px solid var(--accent-rose);
    top: 5%;
    right: 15%;
    transform: rotate(30deg);
}

.fragment-6 {
    border-left: 110px solid transparent;
    border-right: 110px solid transparent;
    border-bottom: 190px solid var(--highlight);
    top: 10%;
    right: 8%;
    transform: rotate(20deg);
    opacity: 0.03;
}

.fragment-7 {
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 130px solid var(--highlight);
    bottom: 20%;
    left: 10%;
    transform: rotate(-15deg);
    opacity: 0.03;
}

.fragment-8 {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 170px solid var(--accent-sky);
    top: 20%;
    left: 5%;
    transform: rotate(10deg);
}

.fragment-9 {
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 140px solid var(--accent-sage);
    bottom: 10%;
    right: 10%;
    transform: rotate(-25deg);
}

.fragment-10 {
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 150px solid var(--accent-rose);
    top: 12%;
    right: 20%;
    transform: rotate(18deg);
}

.fragment-11 {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 160px solid var(--accent-violet);
    top: 8%;
    right: 5%;
    transform: rotate(12deg);
}

.fragment-12 {
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 120px solid var(--accent-sky);
    bottom: 15%;
    left: 15%;
    transform: rotate(-22deg);
}

/* =============================================
   Zigzag Dividers
   ============================================= */

.zigzag-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16px;
    z-index: 50;
    display: none;
}

/* =============================================
   Scroll-triggered animations
   ============================================= */

.entry-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.entry.in-view > .entry-content,
.entry.in-view > .entry-content-wide,
.entry.in-view > .entry-content-centered {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Mobile Responsive (< 768px)
   ============================================= */

@media (max-width: 768px) {
    .timeline-spine {
        display: none;
    }

    .entry-content,
    .entry-content-wide,
    .entry-content-centered {
        margin-left: 20px;
        margin-right: 20px;
        padding: 0 10px;
        max-width: 100%;
    }

    .entry {
        padding: 80px 0;
        border-left: 3px solid var(--timeline-line);
        margin-left: 16px;
    }

    .kinetic-heading {
        font-size: 32px;
    }

    .entry-1 .kinetic-heading {
        font-size: 42px;
    }

    .entry-7 .qed-heading {
        font-size: 42px;
    }

    .entry-5 .kinetic-heading.large-statement {
        font-size: 28px;
    }

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

    .tilt-right,
    .tilt-left,
    .tilt-forward,
    .tilt-back {
        transform: perspective(1200px) rotateY(1deg) rotateX(0.5deg);
    }

    .content-panel {
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    }

    .derivation-panel,
    .corollary-card {
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    }

    .paradox-statement {
        font-size: 24px;
    }

    .entry-2 .kinetic-heading {
        font-size: 28px;
    }
}

/* =============================================
   Scroll progress indicator on timeline
   ============================================= */

.timeline-spine.in-dark .timeline-line {
    background: repeating-linear-gradient(
        to bottom,
        var(--timeline-line) 0px,
        var(--timeline-line) 4px,
        transparent 4px,
        transparent 6px
    );
}