/* ============================================
   ronri.org — styles.css
   Ethereal-blue blobitecture logic playground
   ============================================ */

/* Palette */
:root {
    --sky-light: #c8e6f5;
    --sky-deep: #4a8db7;
    --text-primary: #1a3a5c;
    --text-body: #2c5f8a;
    --accent-warm: #e06b4f;
    --accent-hover: #ff7f5f;
    --bubble-surface: #f0f8ff;
    --bubble-highlight: #e8f4fd;
    --logic-mint: #6dcba4;
    --blush-rose: #e88b9c;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    color: var(--text-body);
    background: linear-gradient(160deg, var(--sky-light) 0%, var(--sky-deep) 100%);
}

/* ---- Particles ---- */
#particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(240, 248, 255, 0.4);
    animation: particleFloat var(--dur) ease-in-out infinite;
    animation-delay: var(--delay);
}
@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(var(--dx), var(--dy)); }
    50% { transform: translate(calc(var(--dx) * -0.5), calc(var(--dy) * 1.5)); }
    75% { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * -0.5)); }
}

/* ---- Progress Bar ---- */
#progress-bar {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%; height: 4px;
    background: rgba(26, 58, 92, 0.15);
    z-index: 100;
}
#progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4a8db7, #6dcba4);
    transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---- Nav Hint ---- */
#nav-hint {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    opacity: 0.6;
    transition: opacity 0.5s;
}
.nav-hint-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-body);
    letter-spacing: 0.04em;
}

/* ---- Slides Container ---- */
#slides-container {
    position: relative;
    width: 100%; height: 100%;
}
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    z-index: 1;
}
.slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 10;
}
.slide.exit-left {
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
}

/* ---- HUD Panels ---- */
.hud-panel {
    background: rgba(240, 248, 255, 0.65);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 24px;
    border: 1px solid rgba(74, 141, 183, 0.15);
    padding: 36px 40px;
    position: relative;
}
.primary-panel {
    max-width: 520px;
    z-index: 2;
}
.secondary-panel {
    position: absolute;
    top: 60px;
    right: 80px;
    padding: 20px 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 2;
}
.diagram-area {
    position: absolute;
    bottom: 80px;
    right: 100px;
    z-index: 2;
}

/* Title slide specifics */
.title-panel {
    max-width: 600px;
    text-align: center;
}
.site-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}
.site-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-body);
    line-height: 1.6;
}

/* ---- Section Titles ---- */
.section-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}

/* ---- Body Text ---- */
.body-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-body);
    font-weight: 400;
    margin-bottom: 14px;
}
.body-text strong {
    font-weight: 600;
}

/* ---- Pill Badges ---- */
.pill-badge {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem;
    color: var(--accent-warm);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 2px 14px;
    transition: transform 0.2s, color 0.2s;
    cursor: default;
}
.pill-badge.inline {
    font-size: 0.9rem;
    padding: 1px 10px;
    vertical-align: baseline;
}
.pill-badge:hover {
    transform: scale(1.05);
    color: var(--accent-hover);
}

/* ---- Crosshairs ---- */
.crosshair {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: rgba(44, 95, 138, 0.3);
    pointer-events: none;
}
.crosshair.tl { top: 10px; left: 14px; }
.crosshair.tr { top: 10px; right: 14px; }
.crosshair.bl { bottom: 10px; left: 14px; }
.crosshair.br { bottom: 10px; right: 14px; }

/* ---- HUD Arcs ---- */
.hud-arc {
    position: absolute;
    border: 1.5px solid rgba(74, 141, 183, 0.2);
    border-radius: 50%;
    pointer-events: none;
}
.arc-1 {
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    border-style: dashed;
    border-color: rgba(74, 141, 183, 0.12);
    animation: arcSpin 40s linear infinite;
}
.arc-2 {
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    border-style: dotted;
    border-color: rgba(74, 141, 183, 0.08);
    animation: arcSpin 60s linear infinite reverse;
}
@keyframes arcSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Decorative Bubbles (title slide) ---- */
.decorative-bubbles {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.deco-bubble {
    position: absolute;
}
.deco-bubble.b1 {
    width: 120px; height: 120px;
    bottom: 10%; left: 15%;
    animation: bubbleFloat 10s ease-in-out infinite;
}
.deco-bubble.b2 {
    width: 80px; height: 80px;
    bottom: 20%; right: 20%;
    animation: bubbleFloat 8s ease-in-out infinite 1s;
}
.deco-bubble.b3 {
    width: 60px; height: 60px;
    bottom: 30%; left: 45%;
    animation: bubbleFloat 12s ease-in-out infinite 2s;
}
@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ---- Proposition Bubble ---- */
.proposition-bubble {
    width: 160px; height: 160px;
    animation: gentlePulse 3s ease-in-out infinite;
}
@keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ---- Negation ---- */
.negation-bubble {
    width: 160px; height: 160px;
    cursor: pointer;
    transition: transform 0.3s;
}
.negation-bubble:hover {
    transform: scale(1.05);
}
.negation-text {
    transition: fill 0.4s;
}
.negation-circle {
    transition: stroke 0.4s;
}
.diagram-hint {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 8px;
    opacity: 0.6;
}

/* ---- Conjunction ---- */
.conjunction-svg {
    width: 280px; height: 160px;
}
.conj-left, .conj-right {
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.conjunction-merged .conj-left {
    transform: translateX(15px);
}
.conjunction-merged .conj-right {
    transform: translateX(-15px);
}
.conj-symbol {
    transition: opacity 0.6s;
}
.conjunction-merged .conj-symbol {
    opacity: 1;
}

/* ---- Disjunction ---- */
.disjunction-svg {
    width: 280px; height: 160px;
}
.disj-left, .disj-right {
    transition: fill-opacity 0.6s;
}

/* ---- Implication Arrow ---- */
.implication-svg {
    width: 320px; height: 160px;
}
.implication-arrow {
    transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.implication-arrow.drawn {
    stroke-dashoffset: 0;
}
.implication-arrowhead {
    transition: opacity 0.3s 1s;
}
.implication-arrowhead.visible {
    opacity: 1;
}

/* ---- Truth Table ---- */
.truth-table-area {
    right: 60px;
    bottom: 60px;
}
.truth-table {
    background: rgba(240, 248, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tt-header, .tt-row {
    display: flex;
    gap: 12px;
}
.tt-cell {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-head {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.tt-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1.5px solid rgba(74, 141, 183, 0.3);
    transition: transform 0.4s, background 0.3s, color 0.3s;
}
.tt-bubble.true {
    background: rgba(109, 203, 164, 0.25);
    color: #4a9e78;
}
.tt-bubble.false {
    background: rgba(232, 139, 156, 0.25);
    color: #c4606f;
}
.tt-input {
    cursor: pointer;
}
.tt-input:hover .tt-bubble {
    transform: scale(1.08);
}
.tt-row.pulse .tt-bubble {
    animation: rowPulse 0.4s ease-out;
}
@keyframes rowPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---- Equivalence ---- */
.equivalence-diagram {
    right: 60px;
    bottom: 80px;
}
.equiv-pair {
    display: flex;
    align-items: center;
    gap: 20px;
}
.equiv-bubble {
    width: 180px; height: 90px;
}
.equiv-symbol {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-warm);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .slide {
        flex-direction: column;
        padding: 20px;
    }
    .primary-panel {
        max-width: 100%;
    }
    .secondary-panel {
        position: relative;
        top: auto; right: auto;
        margin-top: 16px;
    }
    .diagram-area {
        position: relative;
        bottom: auto; right: auto;
        margin-top: 20px;
    }
    .truth-table-area {
        right: auto;
        bottom: auto;
    }
    .equivalence-diagram {
        right: auto;
        bottom: auto;
    }
}