/* Base Styles - Reset and Foundation */

/* Global page scaffold */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--page-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    transition: background-color var(--transition-theme);
}

/* LAYER 1: Background visualization layer */
/* Fixed position covers full viewport, sits behind all content */
#viz-layer {
    position: fixed;
    top: var(--nav-height, 80px); /* Start below nav */
    left: 0;
    right: 0;
    bottom: 0;                   /* Canvas cell grid creates natural small gap */
    z-index: 1;                  /* Behind nav (100), behind content (10) */
    pointer-events: none;        /* Click through to content below */
}

#viz-container {
    width: 100%;
    height: 100%;
    position: relative;          /* For positioning canvas and badge inside */
}

/* LAYER 2: Main content area */
/* Transparent by default so viz shows through; sections can override */
.main-content-area {
    position: relative;
    z-index: 10;                 /* Above viz-layer (1), below nav (100) */
    min-height: calc(100dvh - var(--nav-height, 80px));
    background-color: transparent;  /* Viz shows through by default */
    overflow-y: auto;
    overflow-x: clip;
    display: flex;
    pointer-events: none;        /* Click through to viz-layer buttons */
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

/* Stretch the <main> element so 100% on its children is meaningful */
.main-content-area > main {
    flex: 1 1 auto;   /* let flexbox give it the full column */
    height: 100%;     /* concrete height for percentage descendants */
}

/* Let sections fill the space */
main > section {
    flex: 1 1 auto;
    min-height: 100%;
    width: 100%;
}

/* Sections that should COVER the visualization get solid backgrounds */
/* Retro-window sections (windowed content) need solid backgrounds */
#questions,
#projects,
#blog,
#cats,
#dao {
    background-color: var(--page-bg);
    transition: background-color var(--transition-theme);
}

/* Visualization canvas container (inside #viz-container) */
.agi-life-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Typography */
h1 {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: left;
    color: var(--color-text);
}

h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 0px;
    letter-spacing: -0.3px;
}

h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}

.intro-text {
    text-align: left;
    font-size: 20px;
    margin-bottom: 100px;
    line-height: 1.8;
    color: var(--color-text);
    opacity: 0.9;
}

/* Cats theme - white phase overrides */
body.cats-theme {
    --page-bg: #FFFFFF;
}

/* Note: Wireframe mode no longer needs special background overrides.
   main-content-area is transparent by default, viz-layer shows through. */

/* Exponential AGI Life Canvas - transparent background for theme transitions */
.agi-life-canvas-container {
    background-color: transparent !important;
}

.year-display-canvas {
    background: var(--page-bg) !important;
}

/* Music Toggle Button */
/* Desktop: Fixed position at bottom-right of viewport */
.music-toggle {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    border: 2px solid #000;
    border-radius: 4px;
    background: var(--page-bg);
    transition: background-color var(--transition-theme);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.music-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.music-toggle:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.music-icon {
    font-size: 20px;
    font-family: var(--font-heading);
    line-height: 1;
    color: #000;
}

/* Muted state - strikethrough effect */
.music-toggle.muted .music-icon {
    opacity: 0.4;
}

.music-toggle.muted::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 2px;
    background: #000;
    transform: rotate(-45deg);
    opacity: 0.6;
}

/* Hide on cats theme (no music there) */
body.cats-theme .music-toggle {
    display: none;
}