/* mujun.xyz - Honeycomb of Contradictions */
/* Fonts: Playfair Display, Lato (Google Fonts) */
/* Palette: #faf3e8, #f0e5d0, #2c1e14, #1a1209, #6b5a48, #c4632a, #e89830, #8b3a1a, #ff7a2e, #9a9490 */

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

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

body {
    background: #faf3e8;
    color: #1a1209;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    letter-spacing: 0.015em;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ===== LIGHT BEAM (fixed background gradient) ===== */
.light-beam {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%, rgba(232, 152, 48, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ===== FLOATING MOTES ===== */
.floating-motes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.mote {
    position: absolute;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #c4632a;
    pointer-events: none;
}

.mote-1 { width: 32px; height: 37px; top: 8%; left: 5%; opacity: 0.12; animation: float-mote 8s ease-in-out infinite; }
.mote-2 { width: 48px; height: 55px; top: 15%; left: 85%; opacity: 0.08; animation: float-mote 10s ease-in-out infinite 1s; }
.mote-3 { width: 40px; height: 46px; top: 35%; left: 92%; opacity: 0.15; animation: float-mote 7s ease-in-out infinite 2s; }
.mote-4 { width: 56px; height: 65px; top: 55%; left: 3%; opacity: 0.10; animation: float-mote 11s ease-in-out infinite 0.5s; }
.mote-5 { width: 36px; height: 41px; top: 70%; left: 88%; opacity: 0.14; animation: float-mote 9s ease-in-out infinite 3s; }
.mote-6 { width: 64px; height: 74px; top: 25%; left: 10%; opacity: 0.06; animation: float-mote 12s ease-in-out infinite 1.5s; }
.mote-7 { width: 44px; height: 51px; top: 80%; left: 15%; opacity: 0.11; animation: float-mote 8.5s ease-in-out infinite 4s; }
.mote-8 { width: 32px; height: 37px; top: 45%; left: 75%; opacity: 0.09; animation: float-mote 10.5s ease-in-out infinite 2.5s; }
.mote-9 { width: 52px; height: 60px; top: 90%; left: 60%; opacity: 0.07; animation: float-mote 9.5s ease-in-out infinite 0.8s; }
.mote-10 { width: 38px; height: 44px; top: 5%; left: 50%; opacity: 0.13; animation: float-mote 7.5s ease-in-out infinite 3.5s; }

@keyframes float-mote {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(3deg); }
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.scroll-hex-svg {
    width: 48px;
    height: 48px;
}

.scroll-hex-bg {
    opacity: 0.3;
}

.scroll-hex-fill {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    filter: drop-shadow(0 0 6px #ff7a2e66);
    transition: stroke-dashoffset 0.1s linear;
}

.scroll-indicator-label {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-variant: small-caps;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: #9a9490;
    transition: opacity 0.5s ease;
}

/* ===== HEXAGONAL CELL BASE ===== */
.hex-cell {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #faf3e8;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    will-change: transform;
    position: relative;
}

.hex-cell:hover {
    transform: scale(1.08);
    z-index: 10;
}

.hex-cell:active {
    background: #8b3a1a;
    color: #faf3e8;
}

/* Cell labels */
.cell-label {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-variant: small-caps;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: #c4632a;
    display: block;
    margin-bottom: 8px;
}

.cell-label--light {
    color: #e89830;
}

/* ===== ZONE: PRIME ===== */
.zone--prime {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.prime-cell {
    width: min(600px, 80vw);
    height: min(600px, 80vw);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf3e8;
    box-shadow: inset 0 2px 8px rgba(26, 18, 9, 0.08),
                0 0 12px rgba(255, 122, 46, 0.35),
                0 0 24px rgba(196, 99, 42, 0.15);
    position: relative;
}

.prime-cell:hover {
    transform: none;
}

.prime-cell-content {
    text-align: center;
    padding: 60px 40px;
    position: relative;
    z-index: 2;
}

.spear-shield-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    opacity: 0.04;
    animation: rotate-watermark 120s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes rotate-watermark {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.prime-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: #1a1209;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.prime-subtitle {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: #6b5a48;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.prime-statement {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: #1a1209;
    max-width: 380px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== ZONE: FRACTURE ===== */
.zone--fracture {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 80px 0;
}

.fracture-container {
    position: relative;
    width: min(600px, 85vw);
    height: min(600px, 85vw);
}

.fracture-cell {
    position: absolute;
    width: min(180px, 28vw);
    height: min(180px, 28vw);
    top: 50%;
    left: 50%;
    margin-left: calc(min(180px, 28vw) / -2);
    margin-top: calc(min(180px, 28vw) / -2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf3e8;
    box-shadow: inset 0 2px 8px rgba(26, 18, 9, 0.08);
    opacity: 0;
    transform: translate(0, 0);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.6s ease;
}

.fracture-cell.is-visible {
    opacity: 1;
    transform: translate(var(--target-x), var(--target-y));
}

.fracture-cell:hover {
    transform: translate(var(--target-x), var(--target-y)) scale(1.08);
    z-index: 10;
}

.fracture-center {
    z-index: 5;
    background: #f0e5d0;
}

.fracture-cell-content {
    text-align: center;
    padding: 16px 12px;
    overflow: hidden;
}

.fracture-cell-content h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    line-height: 1.2;
    color: #1a1209;
    margin-bottom: 4px;
}

.fracture-cell-content p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    line-height: 1.4;
    color: #6b5a48;
}

/* ===== ZONE: LATTICE ===== */
.zone--lattice {
    min-height: 200vh;
    padding: 80px 20px;
    position: relative;
    z-index: 1;
}

.lattice-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.lattice-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        60deg,
        transparent 0px,
        transparent 276px,
        rgba(255, 122, 46, 0.06) 278px,
        transparent 280px
    );
    animation: crack-flow 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes crack-flow {
    0% { background-position: 0 0; }
    100% { background-position: 280px 0; }
}

.lattice-cell {
    width: 220px;
    height: 254px;
    margin: -20px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(26, 18, 9, 0.08);
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                opacity 0.6s ease;
    position: relative;
    z-index: 1;
}

.lattice-cell:nth-child(even) {
    margin-top: 8px;
}

.lattice-cell.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lattice-cell:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px #ff7a2e66,
                0 0 32px rgba(196, 99, 42, 0.15);
    z-index: 10;
}

.lattice-cell:active {
    background: #8b3a1a;
}

.lattice-cell:active .lattice-cell-content h3,
.lattice-cell:active .lattice-cell-content p,
.lattice-cell:active .cell-label {
    color: #faf3e8;
}

.lattice-cell:nth-child(odd) {
    background: #faf3e8;
}

.lattice-cell:nth-child(even) {
    background: #f0e5d0;
}

.lattice-cell-content {
    text-align: center;
    padding: 24px 16px;
    overflow: hidden;
}

.lattice-cell-content h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    line-height: 1.2;
    color: #1a1209;
    margin-bottom: 8px;
}

.lattice-cell-content p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    line-height: 1.5;
    color: #6b5a48;
}

/* ===== ZONE: CONVERGENCE ===== */
.zone--convergence {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2c1e14;
    position: relative;
    z-index: 1;
}

.convergence-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.convergence-cell {
    width: min(550px, 80vw);
    height: min(550px, 80vw);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2c1e14;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.convergence-cell.is-visible {
    opacity: 1;
    transform: scale(1);
}

.convergence-cell::after {
    content: '';
    position: absolute;
    inset: -6px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    box-shadow: 0 0 20px #ff7a2e80,
                0 0 40px rgba(196, 99, 42, 0.2);
    z-index: -1;
    pointer-events: none;
}

.convergence-cell:hover {
    transform: none;
}

.convergence-cell-content {
    text-align: center;
    padding: 60px 40px;
    position: relative;
    z-index: 2;
}

.spear-shield-final {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    opacity: 0.08;
    animation: rotate-watermark 120s linear infinite reverse;
    z-index: 0;
    pointer-events: none;
}

.convergence-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    color: #faf3e8;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 20px #ff7a2e4d;
}

.convergence-subtitle {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.3vw, 1.15rem);
    color: #e89830;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.convergence-statement {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.65;
    color: #f0e5d0;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== MAIN NARRATIVE ===== */
.honeycomb-narrative {
    position: relative;
    z-index: 1;
}

/* ===== LINK UNDERLINES (accent secondary) ===== */
a {
    color: #c4632a;
    text-decoration: none;
    border-bottom: 1px solid #e89830;
    transition: color 0.3s ease, border-color 0.3s ease;
}

a:hover {
    color: #8b3a1a;
    border-bottom-color: #ff7a2e;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .prime-cell {
        width: 85vw;
        height: 85vw;
    }

    .prime-cell-content {
        padding: 30px 20px;
    }

    .fracture-container {
        width: 90vw;
        height: 90vw;
    }

    .fracture-cell {
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
    }

    .fracture-cell-content p {
        display: none;
    }

    .lattice-cell {
        width: 160px;
        height: 185px;
        margin: -15px 1px;
    }

    .convergence-cell {
        width: 85vw;
        height: 85vw;
    }

    .convergence-cell-content {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .fracture-cell {
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
    }

    .lattice-cell {
        width: 140px;
        height: 162px;
    }

    .lattice-cell-content {
        padding: 16px 10px;
    }
}