/* ============================
   logical.day — styles.css
   Aurora Gradient + Broken Grid
   Typography names retained from DESIGN.md without fetching external assets:
   IBM Plex Mono" (Google Fonts Source Sans 3" (Google Fonts.
   Script uses IntersectionObserver` that adds body classes like `.section-dawn`.
   ============================ */

/* === CSS Custom Properties === */
:root {
    --void-indigo: #0e0b1a;
    --twilight-plum: #1a1530;
    --logic-mint: #7dcea0;
    --synapse-violet: #c792ea;
    --clarity-ice: #89ddff;
    --dawn-blush: #f78da7;
    --pale-nebula: #f0e6ff;
    --muted-lavender: #c8bdd4;
    --deep-evergreen: #2d5a4a;
    --dim-amethyst: #3a2f5c;
    --card-front-start: #1a1530;
    --card-front-end: #2a1f45;
    --card-back-start: #1f2a3a;
    --card-back-end: #1a1530;
    --bg-dawn: #12101f;
    --bg-night: #0e0b1a;
    --body-bg: var(--bg-dawn);
}

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

/* === Body === */
body {
    background-color: var(--body-bg);
    color: var(--muted-lavender);
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    transition: background-color 1.5s ease;
}

body.section-dawn { --body-bg: #12101f; }
body.section-morning { --body-bg: #100e1d; }
body.section-midday { --body-bg: #0f0d1c; }
body.section-dusk { --body-bg: #0e0c1b; }
body.section-night { --body-bg: #0e0b1a; }

/* === SVG Defs (hidden) === */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* === Aurora Wash Blobs === */
.aurora-blob {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(100px);
}

.aurora-blob-1 {
    width: 600px;
    height: 600px;
    top: 10%;
    left: 15%;
    background: rgba(125, 206, 160, 0.10);
    animation: aurora-drift-1 30s ease-in-out infinite;
}

.aurora-blob-2 {
    width: 500px;
    height: 500px;
    top: 40%;
    right: 10%;
    background: rgba(199, 146, 234, 0.08);
    animation: aurora-drift-2 35s ease-in-out infinite;
}

.aurora-blob-3 {
    width: 450px;
    height: 450px;
    top: 70%;
    left: 30%;
    background: rgba(247, 141, 167, 0.06);
    animation: aurora-drift-3 40s ease-in-out infinite;
}

.aurora-blob-4 {
    width: 700px;
    height: 700px;
    top: 20%;
    right: 30%;
    background: rgba(137, 221, 255, 0.05);
    animation: aurora-drift-1 38s ease-in-out infinite reverse;
}

.aurora-blob-5 {
    width: 550px;
    height: 550px;
    top: 85%;
    left: 5%;
    background: rgba(125, 206, 160, 0.07);
    animation: aurora-drift-2 28s ease-in-out infinite;
}

@keyframes aurora-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.10; }
    33% { transform: translate(30px, -20px) scale(1.05); opacity: 0.14; }
    66% { transform: translate(-20px, 15px) scale(0.97); opacity: 0.08; }
}

@keyframes aurora-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.08; }
    33% { transform: translate(-25px, 25px) scale(1.03); opacity: 0.12; }
    66% { transform: translate(15px, -10px) scale(0.95); opacity: 0.06; }
}

@keyframes aurora-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
    33% { transform: translate(20px, 15px) scale(1.04); opacity: 0.10; }
    66% { transform: translate(-30px, -20px) scale(0.98); opacity: 0.05; }
}

/* === Typography === */
h1 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-variation-settings: 'WONK' 1;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    line-height: 1.08;
    color: var(--pale-nebula);
    text-shadow: 0 0 60px rgba(120, 200, 160, 0.15);
}

h2 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-variation-settings: 'WONK' 1;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    line-height: 1.08;
    color: var(--pale-nebula);
    text-shadow: 0 0 60px rgba(120, 200, 160, 0.15);
    margin-bottom: 1.5rem;
}

h3 {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-variation-settings: 'WONK' 1;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    color: var(--pale-nebula);
    margin-bottom: 0.75rem;
}

.caveat, .gate-label {
    font-family: 'Caveat', cursive;
}

code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.9em;
    color: var(--clarity-ice);
    background: rgba(20, 15, 40, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
    margin-top: 0.5rem;
}

.annotation {
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    color: var(--logic-mint);
    opacity: 0.8;
    margin-top: 0.5rem;
}

.floating-symbol {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    color: var(--synapse-violet);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Branch Sections === */
.branch {
    position: relative;
    min-height: 100vh;
    padding: 8vh 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(125, 206, 160, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(199, 146, 234, 0.10) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(247, 141, 167, 0.08) 0%, transparent 40%);
}

/* === Broken Grid === */
.branch-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 0;
    padding: 0 2vw;
    position: relative;
    min-height: 80vh;
}

/* Circuit background SVGs */
.circuit-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
    pointer-events: none;
}

/* === Branch 1 Layout === */
.branch-1 .block-a {
    grid-column: 2 / 8;
    grid-row: 1 / 3;
    z-index: 1;
    padding: 3rem 2rem;
    margin-left: 8vw;
}

.branch-1 .block-b {
    grid-column: 8 / 15;
    grid-row: 2 / 4;
    z-index: 1;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    margin-top: -3vh;
    margin-right: 8vw;
}

/* === Branch 2 Layout === */
.branch-2 .block-c {
    grid-column: 9 / 16;
    grid-row: 1 / 2;
    z-index: 1;
    padding: 2.5rem;
    margin-right: 8vw;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
}

.card-flip-cluster {
    grid-column: 2 / 16;
    grid-row: 2 / 5;
    z-index: 1;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 2rem 0;
    margin-left: 5vw;
}

.card-flip-cluster.cluster-2 {
    grid-column: 3 / 14;
    margin-left: 0;
    margin-right: 10vw;
}

/* === Branch 3 Layout === */
.branch-3 .block-d {
    grid-column: 2 / 9;
    grid-row: 1 / 2;
    z-index: 1;
    padding: 2.5rem;
    margin-left: 8vw;
}

.branch-3 .block-e {
    grid-column: 9 / 16;
    grid-row: 1 / 3;
    z-index: 1;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    margin-right: 8vw;
    margin-top: 2vh;
}

.branch-3 .block-f {
    grid-column: 3 / 11;
    grid-row: 3 / 5;
    z-index: 1;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    margin-top: -2vh;
    margin-left: 18vw;
}

/* === Branch 4 Layout === */
.branch-4 .block-g {
    grid-column: 3 / 10;
    grid-row: 1 / 2;
    z-index: 1;
    padding: 2.5rem;
    margin-right: 18vw;
}

/* === Branch 5 Layout === */
.branch-5 .block-h {
    grid-column: 8 / 16;
    grid-row: 1 / 2;
    z-index: 1;
    padding: 2.5rem;
    margin-right: 8vw;
}

.branch-5 .block-i {
    grid-column: 2 / 9;
    grid-row: 2 / 4;
    z-index: 1;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    margin-left: 8vw;
    margin-top: -1vh;
}

.branch-5 .block-j {
    grid-column: 9 / 15;
    grid-row: 3 / 5;
    z-index: 1;
    padding: 2rem;
    margin-top: -3vh;
}

.large-annotation {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
}

/* === Branch 6 Layout === */
.branch-6 .block-k {
    grid-column: 4 / 13;
    grid-row: 1 / 2;
    z-index: 1;
    padding: 2.5rem;
    text-align: center;
}

.branch-6 .block-l {
    grid-column: 5 / 12;
    grid-row: 2 / 4;
    z-index: 1;
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    text-align: center;
    margin-top: 2vh;
}

/* === Gate Nodes === */
.gate-node {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2rem auto 0;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 12px rgba(125, 206, 160, 0.3));
}

.gate-label {
    font-family: 'Caveat', cursive;
    font-size: 11px;
}

/* === Card Flip === */
.card-flip {
    width: 280px;
    height: 380px;
    perspective: 1200px;
    cursor: pointer;
    flex-shrink: 0;
}

.card-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-flip.flipped .card-flip-inner,
.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-front {
    background: linear-gradient(135deg, var(--card-front-start) 0%, var(--card-front-end) 100%);
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
}

.card-back {
    background: linear-gradient(135deg, var(--card-back-start) 0%, var(--card-back-end) 100%);
    box-shadow: 0 8px 40px rgba(20, 10, 45, 0.25);
    transform: rotateY(180deg);
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
}

.card-back h3 {
    color: var(--synapse-violet);
}

.card-illustration {
    width: 160px;
    height: 200px;
    margin-bottom: 1rem;
}

.card-label {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    color: var(--logic-mint);
    font-weight: 700;
}

/* === Truth Table === */
.truth-table {
    margin-top: 1.5rem;
    overflow-x: auto;
}

.truth-table table {
    border-collapse: collapse;
    width: 100%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
}

.truth-table th, .truth-table td {
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--dim-amethyst);
}

.truth-table th {
    color: var(--synapse-violet);
    font-weight: 600;
    border-bottom: 2px solid var(--dim-amethyst);
}

.truth-table td {
    color: var(--clarity-ice);
}

/* === Connector Line Animation === */
@keyframes data-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

.connector-line {
    animation: data-flow 2s linear infinite;
}

/* === Pulse Dot Animation === */
@keyframes pulse-scale {
    0%, 100% { r: 4; opacity: 0.5; }
    50% { r: 7; opacity: 0.8; }
}

.pulse-dot {
    animation: pulse-scale 2.5s ease-in-out infinite;
}

/* === Radial Navigation === */
.radial-nav {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
}

.nav-trigger {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--logic-mint), var(--synapse-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(125, 206, 160, 0.3);
    animation: nav-pulse 3s ease-in-out infinite;
    position: relative;
    z-index: 101;
}

@keyframes nav-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(125, 206, 160, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(125, 206, 160, 0.5); }
}

.nav-item {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--twilight-plum);
    border: 1px solid var(--dim-amethyst);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

.nav-item .nav-icon {
    color: var(--logic-mint);
    font-size: 14px;
}

.nav-item .nav-label {
    position: absolute;
    right: 44px;
    white-space: nowrap;
    color: var(--pale-nebula);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
    pointer-events: none;
}

/* Nav open state */
.radial-nav.open .nav-item {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.radial-nav.open .nav-item .nav-label {
    opacity: 1;
}

.radial-nav.open .nav-item:nth-child(2) { transform: translate(-10px, -60px); }
.radial-nav.open .nav-item:nth-child(3) { transform: translate(-40px, -52px); }
.radial-nav.open .nav-item:nth-child(4) { transform: translate(-62px, -32px); }
.radial-nav.open .nav-item:nth-child(5) { transform: translate(-70px, -2px); }
.radial-nav.open .nav-item:nth-child(6) { transform: translate(-62px, 28px); }
.radial-nav.open .nav-item:nth-child(7) { transform: translate(-40px, 50px); }

.nav-item:hover {
    background: var(--dim-amethyst);
    border-color: var(--logic-mint);
}

/* === Paragraph spacing === */
p + p {
    margin-top: 1rem;
}

/* === Responsive === */
@media (max-width: 768px) {
    .branch-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 5vw;
    }

    .branch-grid > .block,
    .branch-grid > .card-flip-cluster {
        margin: 0 !important;
    }

    .floating-symbol {
        display: none;
    }

    .card-flip-cluster {
        flex-direction: column;
        align-items: center;
    }

    .card-flip {
        width: 260px;
        height: 360px;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}