/* ============================================
   bable.pro - Styles
   Probability Tower / Surreal Dreamscape
   ============================================ */

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

:root {
    --deep-void: #0b0e1a;
    --marble-fog: #e8e4df;
    --probability-blue: #4a6fa5;
    --oracle-gold: #c9a84c;
    --entropy-rose: #8c4356;
    --periwinkle-data: #8b9cc4;
    --fissure-charcoal: #2a2d3a;
    --ghost-script: #e8e4df70;
    --block-border: #ffffff12;
    --void-center: #0f1225;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-void);
    background-image: radial-gradient(ellipse at 50% 30%, var(--void-center) 0%, var(--deep-void) 70%);
    color: var(--marble-fog);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* --- Noise texture overlay for stone blocks --- */
.stone-block::before,
.cloud-block::before {
    content: '';
    position: absolute;
    inset: 0;
    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='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
    border-radius: inherit;
}

/* --- Home Glyph --- */
.home-glyph {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1000;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    color: var(--probability-blue);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.home-glyph:hover {
    color: var(--oracle-gold);
}

.glyph-x, .glyph-y {
    font-style: italic;
}

/* --- Impossible Tower Wireframe --- */
.tower-wireframe {
    position: fixed;
    right: 24px;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* --- Floor Base --- */
.floor {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

/* ============================================
   FOUNDATION FLOOR
   ============================================ */
.floor--foundation {
    min-height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15vh;
    position: relative;
    overflow: hidden;
}

.foundation-content {
    position: relative;
    text-align: center;
    z-index: 10;
    margin-bottom: 80px;
}

/* Ghost script texts */
.ghost-scripts {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ghost-text {
    position: absolute;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 8vw, 6rem);
    color: var(--ghost-script);
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1.2s ease;
}

.ghost-text--1 { animation: ghostDrift1 20s infinite alternate ease-in-out; }
.ghost-text--2 { animation: ghostDrift2 22s infinite alternate ease-in-out; animation-delay: -3s; }
.ghost-text--3 { animation: ghostDrift3 18s infinite alternate ease-in-out; animation-delay: -6s; }
.ghost-text--4 { animation: ghostDrift4 24s infinite alternate ease-in-out; animation-delay: -9s; }
.ghost-text--5 { animation: ghostDrift5 19s infinite alternate ease-in-out; animation-delay: -12s; }
.ghost-text--6 { animation: ghostDrift6 21s infinite alternate ease-in-out; animation-delay: -2s; }
.ghost-text--7 { animation: ghostDrift7 23s infinite alternate ease-in-out; animation-delay: -5s; }
.ghost-text--8 { animation: ghostDrift8 17s infinite alternate ease-in-out; animation-delay: -8s; }

.ghost-text.ghost-text--visible {
    opacity: 1;
}

@keyframes ghostDrift1 { from { transform: translate(calc(-50% + 15px), calc(-50% - 10px)); } to { transform: translate(calc(-50% - 10px), calc(-50% + 8px)); } }
@keyframes ghostDrift2 { from { transform: translate(calc(-50% - 20px), calc(-50% + 12px)); } to { transform: translate(calc(-50% + 8px), calc(-50% - 15px)); } }
@keyframes ghostDrift3 { from { transform: translate(calc(-50% + 10px), calc(-50% + 20px)); } to { transform: translate(calc(-50% - 15px), calc(-50% - 5px)); } }
@keyframes ghostDrift4 { from { transform: translate(calc(-50% - 25px), calc(-50% - 8px)); } to { transform: translate(calc(-50% + 12px), calc(-50% + 18px)); } }
@keyframes ghostDrift5 { from { transform: translate(calc(-50% + 18px), calc(-50% + 5px)); } to { transform: translate(calc(-50% - 8px), calc(-50% - 20px)); } }
@keyframes ghostDrift6 { from { transform: translate(calc(-50% - 12px), calc(-50% + 15px)); } to { transform: translate(calc(-50% + 20px), calc(-50% - 10px)); } }
@keyframes ghostDrift7 { from { transform: translate(calc(-50% + 5px), calc(-50% - 25px)); } to { transform: translate(calc(-50% - 18px), calc(-50% + 12px)); } }
@keyframes ghostDrift8 { from { transform: translate(calc(-50% - 8px), calc(-50% + 22px)); } to { transform: translate(calc(-50% + 15px), calc(-50% - 8px)); } }

/* Site title */
.site-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 8rem);
    letter-spacing: 0.03em;
    color: var(--marble-fog);
    position: relative;
    z-index: 5;
}

.site-title .letter {
    display: inline-block;
    transition: transform 0.4s ease, color 0.4s ease;
}

.site-title .letter:hover {
    color: var(--oracle-gold);
    transform: translateY(-4px);
}

.site-title .dot {
    color: var(--probability-blue);
}

/* Tagline */
.tagline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    color: var(--periwinkle-data);
    margin-top: 24px;
    letter-spacing: 0.03em;
}

/* Script shimmer */
.script-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.shimmer-layer {
    position: absolute;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--ghost-script);
    opacity: 0;
    transition: opacity 1.2s ease;
    white-space: nowrap;
}

.shimmer-layer--active {
    opacity: 0.3;
}

/* Masonry - Foundation */
.masonry--foundation {
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0 auto;
    z-index: 10;
    position: relative;
}

.stone-block {
    position: relative;
    background-color: rgba(42, 45, 58, 0.6);
    border: 3px solid var(--block-border);
    padding: 32px;
    border-radius: 2px;
    overflow: hidden;
}

.stone-block p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--marble-fog);
}

.stone-block--large {
    grid-column: span 1;
}

/* Marginalia */
.marginalia {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--periwinkle-data);
    margin-top: 16px;
    text-align: right;
    letter-spacing: 0.02em;
}

/* ============================================
   BRANCHING FLOOR
   ============================================ */
.floor--branching {
    min-height: 150vh;
    padding: 80px 24px;
    position: relative;
    background: linear-gradient(to bottom, var(--deep-void) 0%, rgba(15, 18, 37, 0.95) 50%, var(--deep-void) 100%);
}

.branching-header {
    text-align: center;
    margin-bottom: 40px;
}

.floor-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 6rem);
    letter-spacing: 0.03em;
    color: var(--marble-fog);
}

/* Branching SVG */
.branching-svg {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto 40px;
}

.branch-line {
    stroke: var(--entropy-rose);
    stroke-opacity: 0.6;
    stroke-width: 1;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s ease-out;
}

.branch-line.branch-line--drawn {
    stroke-dashoffset: 0;
}

.branch-node {
    fill: var(--entropy-rose);
    fill-opacity: 0.8;
    r: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.branch-node.branch-node--visible {
    opacity: 1;
}

/* Branch columns */
.branch-columns {
    max-width: 1000px;
    margin: 0 auto;
}

.branch-trunk {
    max-width: 680px;
    margin: 0 auto 60px;
}

.branch-text {
    background-color: rgba(42, 45, 58, 0.5);
    border: 3px solid var(--block-border);
    padding: 24px;
    border-radius: 2px;
    position: relative;
}

.branch-text p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--marble-fog);
}

.branch-split--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.branch-split--2.branch-split--visible {
    opacity: 1;
    transform: translateY(0);
}

.branch-split--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.branch-split--4.branch-split--visible {
    opacity: 1;
    transform: translateY(0);
}

.branch-text--narrow p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 300;
}

.branch-split--8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;
}

.branch-split--8.branch-split--visible {
    opacity: 1;
    transform: translateY(0);
}

.branch-text--filament {
    padding: 12px 8px;
    background-color: rgba(42, 45, 58, 0.3);
    border: 2px solid var(--block-border);
}

.branch-text--filament p {
    font-size: 11px;
    line-height: 1.5;
    font-weight: 300;
    color: var(--ghost-script);
}

/* ============================================
   CLOUD FLOOR
   ============================================ */
.floor--cloud {
    min-height: 150vh;
    padding: 80px 24px;
    position: relative;
    background: linear-gradient(to bottom, var(--deep-void) 0%, rgba(42, 45, 58, 0.3) 50%, var(--deep-void) 100%);
    overflow: hidden;
}

/* Falling glyphs */
.falling-glyphs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.falling-glyph {
    position: absolute;
    font-family: 'Noto Sans', sans-serif;
    color: var(--ghost-script);
    opacity: 0;
    animation: glyphFall linear infinite;
}

@keyframes glyphFall {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    5% {
        opacity: 0.4;
    }
    95% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

/* Cloud grid */
.cloud-grid {
    position: relative;
    z-index: 5;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 24px;
}

.cloud-block {
    position: relative;
    background-color: rgba(42, 45, 58, 0.7);
    border: 3px solid var(--block-border);
    padding: 32px;
    border-radius: 2px;
    transform: rotate(var(--rot, 0deg));
    filter: blur(1px);
    opacity: 0.7;
    transition: filter 0.4s ease, opacity 0.4s ease;
    overflow: hidden;
}

.cloud-block.cloud-block--focused {
    filter: blur(0);
    opacity: 1;
}

.cloud-block h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: var(--marble-fog);
    margin-bottom: 16px;
}

.cloud-block p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--marble-fog);
    font-weight: 400;
}

.cloud-block--1 {
    grid-column: 1 / 3;
}

.cloud-block--2 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

.cloud-block--3 {
    grid-column: 1 / 2;
}

.cloud-block--4 {
    grid-column: 2 / 4;
}

.cloud-block--5 {
    grid-column: 1 / 2;
}

.cloud-block--6 {
    grid-column: 2 / 4;
}

/* ============================================
   APEX
   ============================================ */
.floor--apex {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-void);
    position: relative;
}

.apex-content {
    text-align: center;
    max-width: 900px;
    padding: 0 24px;
}

.apex-statement {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--oracle-gold);
    letter-spacing: 0.03em;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease-in, transform 2s ease-in;
}

.apex-statement.apex-statement--visible {
    opacity: 1;
    transform: translateY(0);
}

.apex-line {
    width: 0;
    height: 1px;
    background-color: rgba(74, 111, 165, 0.4);
    margin: 40px auto;
    transition: width 1.5s ease-out;
}

.apex-line.apex-line--visible {
    width: 60%;
}

.apex-coda {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    color: var(--periwinkle-data);
    opacity: 0;
    transition: opacity 1.5s ease-in;
    letter-spacing: 0.02em;
}

.apex-coda.apex-coda--visible {
    opacity: 1;
}

/* ============================================
   TOWER WIREFRAME (drawn via JS)
   ============================================ */
.tower-floor {
    position: absolute;
    width: 80px;
    border: 1px solid rgba(74, 111, 165, 0.125);
    pointer-events: none;
}

.tower-floor--horizontal {
    height: 0;
    left: 20px;
}

.tower-floor--left {
    height: 40px;
    width: 0;
    left: 20px;
}

.tower-floor--right {
    height: 40px;
    width: 0;
    left: 100px;
}

.tower-floor--diagonal {
    height: 0;
    width: 56px;
    transform: rotate(-45deg);
    transform-origin: left top;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .masonry--foundation {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 12px;
    }

    .branch-split--2 {
        grid-template-columns: 1fr;
    }

    .branch-split--4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .branch-split--8 {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .cloud-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cloud-block--1,
    .cloud-block--2,
    .cloud-block--3,
    .cloud-block--4,
    .cloud-block--5,
    .cloud-block--6 {
        grid-column: auto;
        grid-row: auto;
    }

    .tower-wireframe {
        display: none;
    }

    .branching-svg {
        max-width: 100%;
    }

    .branch-text--filament p {
        font-size: 9px;
    }

    .ghost-text {
        font-size: clamp(1.5rem, 6vw, 3rem);
    }
}

@media (max-width: 480px) {
    .branch-split--4 {
        grid-template-columns: 1fr 1fr;
    }

    .branch-split--8 {
        grid-template-columns: repeat(2, 1fr);
    }
}