/* ============================================
   cbdc.study — Styles
   Zen aesthetic · Modular blocks · Bubble motif
   ============================================ */

/* --- CSS Custom Properties (Palette) --- */
:root {
    /* Backgrounds */
    --bg-cloud: #FAFBFC;
    --bg-ice: #EEF4F8;
    --bg-lavender-mist: #F5F0FA;

    /* Primary */
    --primary: #6BAFCB;
    --primary-deep: #3D8BA6;

    /* Complement */
    --complement: #7E6BA4;
    --complement-deep: #5B4A7A;

    /* Text */
    --text-primary: #2A3D50;
    --text-secondary: #4A5C6D;
    --text-muted: #94A3B5;

    /* Bubbles */
    --bubble-teal: #A8DAE8;
    --bubble-lavender: #C4B5E0;
    --bubble-peach: #F2D1C4;

    /* White */
    --white: #FFFFFF;

    /* Elastic easing */
    --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Spacing */
    --gap-mobile: 32px;
    --gap-tablet: 48px;
    --gap-desktop: 64px;
    --padding-block: clamp(24px, 4vw, 48px);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-cloud);
    color: var(--text-secondary);
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Nunito', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

h1 {
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    margin-bottom: 0.5em;
}

h2 {
    font-weight: 700;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    margin-bottom: 0.5em;
}

h3 {
    font-weight: 600;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 0.5em;
}

p {
    max-width: 65ch;
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 400ms var(--elastic);
}

a:hover {
    color: var(--primary-deep);
}

a:visited {
    color: var(--complement-deep);
}

code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.9em;
    color: var(--complement);
    background: var(--bg-lavender-mist);
    border-radius: 8px;
    padding: 2px 8px;
}

blockquote {
    border: none;
    margin: 0;
    padding: 0;
}

blockquote p {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
}

cite {
    display: block;
    margin-top: 0.75em;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    color: var(--text-muted);
    font-style: normal;
}

/* --- Block Labels --- */
.block-label {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75em;
}

/* --- Section Layout --- */
.section {
    padding: clamp(48px, 8vw, 96px) 0;
}

/* --- Block Grid --- */
.block-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-desktop);
}

/* --- Block Base --- */
.block {
    position: relative;
    padding: var(--padding-block);
    border-radius: 24px;
    z-index: 1;
    overflow: hidden;
}

/* --- Block Types --- */
.concept-block {
    background: var(--bg-cloud);
    border: 1px solid rgba(107, 175, 203, 0.08);
}

.diagram-block {
    background: var(--bg-ice);
    border-radius: 32px;
}

.quote-block {
    background: var(--bg-cloud);
    border-left: 4px solid var(--primary);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flow-block {
    background: linear-gradient(135deg, var(--bg-ice), var(--bg-lavender-mist));
    border-radius: 40px;
}

/* --- Block Spans --- */
.span-1 {
    grid-column: span 1;
}

.span-2 {
    grid-column: span 2;
}

.full-width {
    grid-column: 1 / -1;
}

/* --- Breathing Row --- */
.breathing-row {
    grid-column: 1 / -1;
    height: 48px;
}

/* --- Hero Block --- */
.hero-block {
    padding: 120px var(--padding-block);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-mission {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--text-secondary);
    max-width: 55ch;
    margin: 0 auto 1.5em;
}

.hero-invite {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Hero Bubbles --- */
.hero-bubbles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bubble {
    position: absolute;
    mix-blend-mode: screen;
    opacity: 0.35;
}

.hb-1 { top: 10%; left: 8%; animation: drift-1 25s ease-in-out infinite alternate; }
.hb-2 { top: 20%; right: 12%; animation: drift-2 30s ease-in-out infinite alternate; }
.hb-3 { bottom: 15%; left: 15%; animation: drift-3 22s ease-in-out infinite alternate; }
.hb-4 { top: 55%; right: 25%; animation: drift-4 28s ease-in-out infinite alternate; }
.hb-5 { bottom: 25%; right: 8%; animation: drift-5 35s ease-in-out infinite alternate; }
.hb-6 { top: 35%; left: 30%; animation: drift-6 20s ease-in-out infinite alternate; }
.hb-7 { bottom: 35%; left: 55%; animation: drift-7 32s ease-in-out infinite alternate; }

/* --- Closing Block --- */
.closing-block {
    padding: 100px var(--padding-block);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.closing-content {
    position: relative;
    z-index: 1;
}

.closing-content p {
    max-width: 55ch;
    margin: 0 auto 1em;
}

.closing-thought {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: var(--primary);
    margin-top: 1em;
}

.closing-bubbles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.closing-bubble {
    position: absolute;
    mix-blend-mode: screen;
    opacity: 0.3;
}

.cb-1 { top: 15%; right: 10%; animation: drift-2 28s ease-in-out infinite alternate; }
.cb-2 { bottom: 20%; left: 12%; animation: drift-5 32s ease-in-out infinite alternate; }
.cb-3 { top: 30%; left: 25%; animation: drift-3 24s ease-in-out infinite alternate; }
.cb-4 { bottom: 15%; right: 30%; animation: drift-7 36s ease-in-out infinite alternate; }
.cb-5 { top: 50%; right: 40%; animation: drift-1 30s ease-in-out infinite alternate; }

/* --- Diagrams --- */
.diagram-container {
    margin-top: 1.5em;
    width: 100%;
}

.diagram-svg {
    width: 100%;
    height: auto;
    display: block;
}

.flow-description {
    margin-top: 1.5em;
    color: var(--text-secondary);
}

/* --- Diagram Animations (initial states, animated by JS) --- */
.diagram-node {
    transform-origin: center;
    transform: scale(0);
    transition: transform 600ms var(--elastic);
}

.diagram-node.animate-in {
    transform: scale(1);
}

.diagram-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1000ms var(--elastic);
}

.diagram-line.animate-in {
    stroke-dashoffset: 0;
}

.diagram-text,
.diagram-label {
    opacity: 0;
    transition: opacity 600ms ease;
}

.diagram-text.animate-in,
.diagram-label.animate-in {
    opacity: 1;
}

/* Layer rects */
.layer-rect {
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 800ms var(--elastic);
}

.layer-rect.animate-in {
    transform: scaleX(1);
}

/* Layer text inside rects */
.layer-text {
    opacity: 0;
    transition: opacity 500ms ease;
}

.layer-text.animate-in {
    opacity: 1;
}

/* Spectrum elements */
.spectrum-bar {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1000ms var(--elastic);
}

.spectrum-bar.animate-in {
    transform: scaleX(1);
}

.spectrum-marker {
    transform-origin: center;
    transform: scale(0);
    transition: transform 600ms var(--elastic);
}

.spectrum-marker.animate-in {
    transform: scale(1);
}

.spectrum-label,
.spectrum-sublabel {
    opacity: 0;
    transition: opacity 500ms ease;
}

.spectrum-label.animate-in,
.spectrum-sublabel.animate-in {
    opacity: 1;
}

/* Global bubbles in diagram */
.global-bubble {
    transform-origin: center;
    transform: scale(0);
    transition: transform 700ms var(--elastic);
}

.global-bubble.animate-in {
    transform: scale(1);
}

/* Global text labels */
.global-text {
    opacity: 0;
    transition: opacity 500ms ease;
}

.global-text.animate-in {
    opacity: 1;
}

/* Flow lines */
.flow-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 800ms var(--elastic);
}

.flow-line.animate-in {
    stroke-dashoffset: 0;
}

/* --- Block Entry Animation --- */
.block-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms var(--elastic), transform 800ms var(--elastic);
}

.block-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Pill Navigator --- */
.pill-navigator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    height: 48px;
    box-shadow: 0 4px 24px rgba(42, 61, 80, 0.08);
    opacity: 0;
    transition: opacity 300ms ease;
}

.pill-navigator.visible {
    opacity: 1;
}

.pill-link {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 400ms var(--elastic), transform 200ms var(--elastic), background 300ms ease;
}

.pill-link:visited {
    color: var(--text-muted);
}

.pill-link:hover {
    transform: scale(1.05);
    color: var(--primary);
}

.pill-link.active {
    color: var(--primary-deep);
    background: rgba(107, 175, 203, 0.1);
}

.pill-icon {
    display: none;
}

.pill-text {
    display: inline;
}

/* --- Micro-Bubbles (Background) --- */
.micro-bubbles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.micro-bubble {
    position: absolute;
    opacity: 0.15;
}

.mb-1  { top: 5%;  left: 10%; animation: drift-1 18s ease-in-out infinite alternate; }
.mb-2  { top: 12%; left: 85%; animation: drift-2 25s ease-in-out infinite alternate; }
.mb-3  { top: 20%; left: 45%; animation: drift-3 22s ease-in-out infinite alternate; }
.mb-4  { top: 8%;  left: 60%; animation: drift-4 30s ease-in-out infinite alternate; }
.mb-5  { top: 30%; left: 25%; animation: drift-5 20s ease-in-out infinite alternate; }
.mb-6  { top: 35%; left: 75%; animation: drift-6 28s ease-in-out infinite alternate; }
.mb-7  { top: 15%; left: 35%; animation: drift-7 35s ease-in-out infinite alternate; }
.mb-8  { top: 45%; left: 90%; animation: drift-1 24s ease-in-out infinite alternate; }
.mb-9  { top: 50%; left: 15%; animation: drift-2 32s ease-in-out infinite alternate; }
.mb-10 { top: 55%; left: 55%; animation: drift-3 19s ease-in-out infinite alternate; }
.mb-11 { top: 60%; left: 80%; animation: drift-4 27s ease-in-out infinite alternate; }
.mb-12 { top: 65%; left: 40%; animation: drift-5 23s ease-in-out infinite alternate; }
.mb-13 { top: 70%; left: 5%;  animation: drift-6 31s ease-in-out infinite alternate; }
.mb-14 { top: 75%; left: 70%; animation: drift-7 21s ease-in-out infinite alternate; }
.mb-15 { top: 80%; left: 30%; animation: drift-1 29s ease-in-out infinite alternate; }
.mb-16 { top: 85%; left: 50%; animation: drift-2 17s ease-in-out infinite alternate; }
.mb-17 { top: 90%; left: 20%; animation: drift-3 33s ease-in-out infinite alternate; }
.mb-18 { top: 25%; left: 95%; animation: drift-4 26s ease-in-out infinite alternate; }
.mb-19 { top: 40%; left: 8%;  animation: drift-5 38s ease-in-out infinite alternate; }
.mb-20 { top: 48%; left: 65%; animation: drift-6 22s ease-in-out infinite alternate; }
.mb-21 { top: 58%; left: 42%; animation: drift-7 29s ease-in-out infinite alternate; }
.mb-22 { top: 72%; left: 88%; animation: drift-1 34s ease-in-out infinite alternate; }
.mb-23 { top: 78%; left: 12%; animation: drift-2 20s ease-in-out infinite alternate; }
.mb-24 { top: 92%; left: 72%; animation: drift-3 36s ease-in-out infinite alternate; }
.mb-25 { top: 18%; left: 52%; animation: drift-4 25s ease-in-out infinite alternate; }

/* --- Bubble Drift Keyframes --- */
@keyframes drift-1 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(25px, -35px); }
    50%  { transform: translate(-15px, -50px); }
    75%  { transform: translate(40px, -20px); }
    100% { transform: translate(-20px, 30px); }
}

@keyframes drift-2 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-30px, 20px); }
    50%  { transform: translate(20px, 45px); }
    75%  { transform: translate(-45px, 15px); }
    100% { transform: translate(15px, -25px); }
}

@keyframes drift-3 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(35px, 25px); }
    50%  { transform: translate(-25px, -30px); }
    75%  { transform: translate(15px, 40px); }
    100% { transform: translate(-40px, -15px); }
}

@keyframes drift-4 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-20px, -40px); }
    50%  { transform: translate(45px, 10px); }
    75%  { transform: translate(-10px, -25px); }
    100% { transform: translate(30px, 35px); }
}

@keyframes drift-5 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(40px, 15px); }
    50%  { transform: translate(-35px, 50px); }
    75%  { transform: translate(20px, -30px); }
    100% { transform: translate(-25px, 20px); }
}

@keyframes drift-6 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-15px, 35px); }
    50%  { transform: translate(30px, -20px); }
    75%  { transform: translate(-40px, 45px); }
    100% { transform: translate(20px, -35px); }
}

@keyframes drift-7 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30px, -15px); }
    50%  { transform: translate(-20px, 40px); }
    75%  { transform: translate(35px, 25px); }
    100% { transform: translate(-30px, -45px); }
}

/* --- Responsive: Tablet --- */
@media (max-width: 1200px) {
    .block-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-tablet);
        padding: 0 40px;
    }

    .span-2 {
        grid-column: span 2;
    }

    .span-1 {
        grid-column: span 1;
    }

    .full-width {
        grid-column: 1 / -1;
    }
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    .block-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-mobile);
        padding: 0 24px;
    }

    .span-1,
    .span-2,
    .full-width {
        grid-column: 1 / -1;
    }

    .hero-block {
        padding: 80px var(--padding-block);
        min-height: 60vh;
    }

    .closing-block {
        padding: 60px var(--padding-block);
        min-height: 40vh;
    }

    /* Pill navigator: icons only on mobile */
    .pill-text {
        display: none;
    }

    .pill-icon {
        display: block;
    }

    .pill-link {
        padding: 6px 8px;
    }

    .pill-navigator {
        padding: 8px 12px;
    }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    .micro-bubble,
    .hero-bubble,
    .closing-bubble {
        animation: none !important;
    }

    .block-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .diagram-node,
    .diagram-line,
    .diagram-text,
    .diagram-label,
    .layer-rect,
    .layer-text,
    .spectrum-bar,
    .spectrum-marker,
    .spectrum-label,
    .spectrum-sublabel,
    .global-bubble,
    .global-text,
    .flow-line {
        transform: none;
        opacity: 1;
        stroke-dashoffset: 0;
        transition: none;
    }
}