/* ============================================
   continu.st - Deep Burgundy Editorial Honeycomb
   ============================================ */

/* Typography: Inter's tall x-height and open apertures ensure legibility at body sizes
   "Inter" (Google Fonts) "JetBrains Mono" (Google Fonts) "Space Grotesk" (Google Fonts)
   Interaction:** pointer move, `IntersectionObserver` for triggering hex cell entrance animations
   Space Grotesk at an enormous size (clamp(4rem) */

/* --- CSS Custom Properties (Palette) --- */
:root {
    --primary-dark: #1A0B12;
    --primary-mid: #3A0E1E;
    --primary-light: #6B1D34;
    --accent-organic: #7CB085;
    --accent-warm: #D4A04A;
    --text-primary: #F5E6D0;
    --text-secondary: #D4C5B2;
    --text-tertiary: #C97B84;
    --highlight: #E8B4B8;
    --bg-alt: #2B0A16;
    --morph-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: var(--primary-dark);
    background: radial-gradient(ellipse at center, var(--primary-dark) 0%, var(--bg-alt) 100%);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.647;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Bokeh Background Layer --- */
#bokeh-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bokeh-orb {
    position: absolute;
    left: var(--orb-x);
    top: var(--orb-y);
    width: var(--orb-size);
    height: var(--orb-size);
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--orb-color) 0%, transparent 70%);
    --cursor-offset-x: 0px;
    --cursor-offset-y: 0px;
    transform: translate(-50%, -50%) translate(var(--cursor-offset-x), var(--cursor-offset-y));
    will-change: transform;
    transition: filter 1.2s ease;
}

.bokeh-large {
    animation: bokeh-drift-large 20s ease-in-out infinite alternate;
}

.bokeh-small {
    animation: bokeh-drift-small 15s ease-in-out infinite alternate;
}

.bokeh-orb[data-drift="1"] { animation-duration: 22s; animation-delay: 0s; }
.bokeh-orb[data-drift="2"] { animation-duration: 18s; animation-delay: -3s; }
.bokeh-orb[data-drift="3"] { animation-duration: 25s; animation-delay: -7s; }
.bokeh-orb[data-drift="4"] { animation-duration: 20s; animation-delay: -2s; }
.bokeh-orb[data-drift="5"] { animation-duration: 23s; animation-delay: -10s; }
.bokeh-orb[data-drift="6"] { animation-duration: 17s; animation-delay: -1s; }
.bokeh-orb[data-drift="7"] { animation-duration: 19s; animation-delay: -5s; }
.bokeh-orb[data-drift="8"] { animation-duration: 16s; animation-delay: -8s; }
.bokeh-orb[data-drift="9"] { animation-duration: 21s; animation-delay: -4s; }
.bokeh-orb[data-drift="10"] { animation-duration: 18s; animation-delay: -6s; }
.bokeh-orb[data-drift="11"] { animation-duration: 15s; animation-delay: -9s; }
.bokeh-orb[data-drift="12"] { animation-duration: 20s; animation-delay: -3s; }
.bokeh-orb[data-drift="13"] { animation-duration: 17s; animation-delay: -11s; }
.bokeh-orb[data-drift="14"] { animation-duration: 24s; animation-delay: -5s; }

@keyframes bokeh-drift-large {
    0% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(0px, 0px); }
    25% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(25px, -15px); }
    50% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(-10px, 30px); }
    75% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(20px, 10px); }
    100% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(-15px, -20px); }
}

@keyframes bokeh-drift-small {
    0% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(0px, 0px); }
    33% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(15px, -10px); }
    66% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(-8px, 18px); }
    100% { transform: translate(-50%, -50%) translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px)) translate(12px, -5px); }
}

/* Deepened bokeh state for deep-dive section */
#bokeh-layer.bokeh-deepened .bokeh-large {
    filter: hue-rotate(-10deg) saturate(1.3) brightness(1.1);
    transition: filter 1.5s ease;
}

#bokeh-layer.bokeh-deepened .bokeh-small {
    filter: hue-rotate(-10deg) saturate(1.2) brightness(1.05);
    transition: filter 1.5s ease;
}

/* --- Margin Leaf Decorations --- */
#margin-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 1.5s ease;
}

#margin-leaves.leaves-prominent {
    opacity: 1;
}

#margin-leaves.leaves-prominent .margin-leaf {
    opacity: 0.9;
}

.margin-leaf {
    position: absolute;
    opacity: 0.6;
    transition: opacity 1.5s ease;
}

/* --- Fixed Sidebar Navigation --- */
#sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 6px;
    background: var(--primary-mid);
    border-right: 1px solid var(--primary-light);
    z-index: 100;
    border-radius: 0 8px 8px 0;
}

.sidebar-hex {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.3s var(--morph-ease),
                transform 0.3s var(--morph-ease);
}

.sidebar-hex:hover,
.sidebar-hex.active {
    opacity: 1;
    transform: scale(1.15);
}

.sidebar-hex.active svg polygon {
    fill: rgba(212, 160, 74, 0.15);
}

/* --- Section Base --- */
.section {
    position: relative;
    z-index: 2;
    padding-left: 60px;
}

/* --- Leaf Divider --- */
.leaf-divider {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 40px 60px;
    opacity: 0.7;
}

/* --- Section 1: Opening --- */
.section-opening {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 48px;
}

.opening-content {
    text-align: center;
    position: relative;
    z-index: 3;
}

#site-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 24px;
    opacity: 1;
    transition: letter-spacing 0.8s var(--morph-ease),
                opacity 0.6s ease;
}

#site-title.morphing {
    letter-spacing: 0.5em;
    opacity: 0.6;
}

.subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    color: var(--text-tertiary);
    opacity: 0;
    animation: subtitle-fade 1.2s ease-out 0.5s forwards;
}

@keyframes subtitle-fade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Honeycomb Grid --- */
.honeycomb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    max-width: 70%;
    margin: 0 auto;
    padding: 60px 0;
    position: relative;
}

.honeycomb-deep {
    max-width: 75%;
}

/* --- Hexagonal Cells --- */
.hex-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--primary-mid);
    border: none;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.7) rotate(-2deg);
    transition: opacity 0.4s var(--morph-ease),
                transform 0.4s var(--morph-ease),
                background 0.3s ease;
    transition-delay: calc(var(--stagger) * 80ms);
}

.hex-cell.hex-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.hex-cell:hover {
    background: var(--primary-light);
}

/* 2x hex cells */
.hex-2x {
    grid-column: span 2;
    aspect-ratio: 2 / 1.1;
}

.hex-2x .hex-inner {
    clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}

/* Offset rows */
.hex-cell[data-row="2"],
.hex-cell[data-row="4"],
.hex-cell[data-row="6"] {
    margin-top: -30px;
}

/* Inner container */
.hex-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

.hex-inner-deep {
    background: rgba(43, 10, 22, 0.4);
}

/* Leaf vein pattern overlay */
.hex-vein {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 10 L100 210' stroke='%237CB085' stroke-width='0.8' fill='none'/%3E%3Cpath d='M100 40 L140 25' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 60 L60 45' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 80 L145 60' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 100 L55 82' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 120 L150 98' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 140 L50 120' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 160 L148 138' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3Cpath d='M100 180 L52 158' stroke='%237CB085' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.hex-vein-deep {
    opacity: 0.15;
}

/* Hex content */
.hex-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: left;
    overflow: hidden;
}

/* --- Typography in Hex Cells --- */
.hex-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.hex-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.hex-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.hex-body + .hex-body {
    margin-top: 12px;
}

.hex-body-small {
    font-size: 13px;
    line-height: 1.55;
}

.hex-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--primary-dark);
    color: var(--highlight);
    padding: 2px 6px;
    border-radius: 3px;
}

.hex-pullquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-tertiary);
    text-align: center;
    padding: 10px 0;
}

.hex-caption {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 18px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

/* --- Code Blocks --- */
.hex-content-code {
    width: 100%;
}

.code-block {
    background: var(--primary-dark);
    border: 1px solid var(--primary-mid);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.code-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.code-complete::before {
    background: var(--accent-organic);
}

.code-conceptual::before {
    background: var(--accent-warm);
}

.code-warning::before {
    background: var(--highlight);
}

.code-header {
    padding: 8px 12px 6px 16px;
    border-bottom: 1px solid rgba(58, 14, 30, 0.5);
}

.code-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-block pre {
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-block code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre;
    font-variant-ligatures: contextual;
}

/* Syntax highlighting */
.syn-keyword { color: var(--highlight); }
.syn-var { color: var(--text-secondary); }
.syn-string { color: var(--accent-organic); }
.syn-number { color: var(--accent-warm); }
.syn-comment { color: var(--primary-light); font-style: italic; }

/* --- Diagrams --- */
.hex-diagram {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hex-diagram svg {
    max-width: 180px;
    max-height: 180px;
}

/* --- Section 4: Closing --- */
.section-closing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 60px;
}

.closing-honeycomb {
    display: flex;
    gap: 3px;
    margin-bottom: 80px;
    justify-content: center;
}

.closing-honeycomb .hex-cell {
    width: 160px;
    height: 176px;
    flex-shrink: 0;
}

.hex-dissolve.hex-visible {
    animation: hex-dissolve-out 3s ease-out 2s forwards;
}

@keyframes hex-dissolve-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}

.closing-message {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.closing-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.closing-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 28px;
    color: var(--text-tertiary);
    max-width: 600px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.closing-attribution {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-warm);
}

/* --- Hex Cell Inner Shadow for 2x --- */
.hex-2x .hex-inner {
    box-shadow: inset 0 0 40px rgba(58, 14, 30, 0.3);
}

/* --- Hex Grout (border effect) --- */
.hex-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid var(--primary-mid);
    pointer-events: none;
    z-index: 3;
}

/* --- Progress Indicator (scroll) --- */
.section-deep .hex-cell:hover {
    background: var(--primary-light);
}

/* --- Leaf Loading Animation --- */
.hex-leaf-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.hex-cell:not(.hex-visible) .hex-leaf-icon {
    opacity: 1;
}

.hex-leaf-icon svg {
    width: 32px;
    height: 48px;
}

.hex-leaf-icon .leaf-draw {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: leaf-path-draw 500ms ease-out forwards;
}

@keyframes leaf-path-draw {
    from { stroke-dashoffset: 120; }
    to { stroke-dashoffset: 0; }
}

/* --- Morph transition between sections --- */
.hex-cell.hex-morphing-out {
    animation: hex-morph-out 600ms var(--morph-ease) forwards;
}

@keyframes hex-morph-out {
    0% { opacity: 1; transform: scale(1); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
    50% { opacity: 0.5; }
    100% { opacity: 0; transform: scale(0.5); clip-path: polygon(50% 25%, 75% 37.5%, 75% 62.5%, 50% 75%, 25% 62.5%, 25% 37.5%); }
}

.hex-cell.hex-morphing-in {
    animation: hex-morph-in 600ms var(--morph-ease) forwards;
}

@keyframes hex-morph-in {
    0% { opacity: 0; transform: scale(0.5); clip-path: polygon(50% 25%, 75% 37.5%, 75% 62.5%, 50% 75%, 25% 62.5%, 25% 37.5%); }
    50% { opacity: 0.5; }
    100% { opacity: 1; transform: scale(1); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    #sidebar {
        display: none;
    }

    .section {
        padding-left: 0;
    }

    .honeycomb-grid {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 30px 24px;
        gap: 16px;
    }

    .hex-cell {
        width: 100%;
        aspect-ratio: auto;
        clip-path: none;
        border-radius: 8px;
        border: 1px solid var(--primary-mid);
    }

    .hex-cell::after {
        clip-path: none;
        border-radius: 8px;
    }

    .hex-2x {
        grid-column: span 1;
        aspect-ratio: auto;
    }

    .hex-2x .hex-inner {
        clip-path: none;
    }

    .hex-cell[data-row="2"],
    .hex-cell[data-row="4"],
    .hex-cell[data-row="6"] {
        margin-top: 0;
    }

    .hex-inner {
        padding: 24px;
    }

    .hex-vein {
        display: none;
    }

    .hex-title {
        font-size: 24px;
    }

    .hex-subtitle {
        font-size: 18px;
    }

    .hex-pullquote {
        font-size: 18px;
    }

    #site-title {
        font-size: clamp(2.5rem, 10vw, 5rem);
    }

    .subtitle {
        font-size: 18px;
        padding: 0 20px;
    }

    .leaf-divider {
        padding: 20px 24px;
    }

    .closing-honeycomb {
        flex-direction: column;
        align-items: center;
    }

    .closing-honeycomb .hex-cell {
        width: 140px;
        height: 154px;
    }

    .closing-text {
        font-size: 22px;
        padding: 0 20px;
    }

    .section-opening {
        padding-left: 0;
    }

    .section-closing {
        padding: 40px 20px;
    }

    .closing-message {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .honeycomb-grid {
        padding: 20px 16px;
    }

    .hex-inner {
        padding: 18px;
    }

    .hex-body {
        font-size: 14px;
    }

    .hex-title {
        font-size: 22px;
    }

    .code-block code {
        font-size: 12px;
    }

    .closing-text {
        font-size: 20px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .honeycomb-grid {
        max-width: 85%;
        grid-template-columns: repeat(3, 1fr);
    }

    .hex-cell {
        aspect-ratio: 1 / 1;
    }

    .hex-2x {
        grid-column: span 2;
        aspect-ratio: 2 / 1;
    }
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--primary-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-mid);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* --- Selection --- */
::selection {
    background: var(--primary-light);
    color: var(--text-primary);
}