:root {
    --bg: #F7F3ED;
    --text: #2C2C2C;
    --text-secondary: #8A8578;
    --accent: #C4704B;
    --divider: #E5DFD5;
    --hover: #B8A088;
    --highlight: #FFF8E7;
}

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    overflow-x: hidden;
}

/* Paper texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(196, 112, 75, 0.3) 0%, transparent 1%),
        radial-gradient(circle at 45% 65%, rgba(196, 112, 75, 0.2) 0%, transparent 0.8%),
        radial-gradient(circle at 75% 35%, rgba(196, 112, 75, 0.25) 0%, transparent 1.2%),
        radial-gradient(circle at 85% 85%, rgba(196, 112, 75, 0.2) 0%, transparent 0.6%);
}

/* Sticky whisper nav */
.whisper-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    opacity: 0.4;
    z-index: 10;
    transition: opacity 2s ease;
}

.whisper-nav.faded {
    opacity: 0.15;
}

/* Dust motes */
.dust-mote {
    position: fixed;
    border-radius: 50%;
    background-color: var(--accent);
    pointer-events: none;
    z-index: 1;
}

.mote-1 {
    width: 3px;
    height: 3px;
    opacity: 0.1;
    animation: drift-1 45s linear infinite;
}

.mote-2 {
    width: 2px;
    height: 2px;
    opacity: 0.08;
    animation: drift-2 55s linear infinite;
}

.mote-3 {
    width: 4px;
    height: 4px;
    opacity: 0.12;
    animation: drift-3 38s linear infinite;
}

.mote-4 {
    width: 2px;
    height: 2px;
    opacity: 0.09;
    animation: drift-4 50s linear infinite;
}

.mote-5 {
    width: 3px;
    height: 3px;
    opacity: 0.15;
    animation: drift-5 60s linear infinite;
}

@keyframes drift-1 {
    0% { top: 20%; left: -5%; }
    100% { top: 60%; left: 105%; }
}

@keyframes drift-2 {
    0% { top: 70%; left: 105%; }
    100% { top: 30%; left: -5%; }
}

@keyframes drift-3 {
    0% { top: 40%; left: -5%; }
    100% { top: 80%; left: 105%; }
}

@keyframes drift-4 {
    0% { top: 10%; left: 80%; }
    100% { top: 90%; left: 20%; }
}

@keyframes drift-5 {
    0% { top: 85%; left: -5%; }
    100% { top: 15%; left: 105%; }
}

/* Sections */
.section {
    position: relative;
    z-index: 2;
}

/* The Arrival */
.section-arrival {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrival-content {
    text-align: center;
    opacity: 0;
    animation: arrival-fade 1.5s ease 1.2s forwards;
}

@keyframes arrival-fade {
    to { opacity: 1; }
}

.domain-name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.domain-subtitle {
    font-family: 'Karla', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-bottom: 40px;
    animation: subtitle-fade 1s ease 2.2s forwards;
    opacity: 0;
}

@keyframes subtitle-fade {
    to { opacity: 0.6; }
}

/* Enso */
.enso {
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.enso-path {
    stroke-dasharray: 540;
    stroke-dashoffset: 540;
    animation: draw-enso 3s ease-in-out 2.5s forwards;
}

@keyframes draw-enso {
    to { stroke-dashoffset: 0; }
}

/* Column */
.column {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The Thought */
.section-thought {
    min-height: 150vh;
    display: flex;
    align-items: center;
}

.moment-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent);
    margin-bottom: 24px;
    margin-left: -40px;
}

/* Body text */
.body-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
}

/* Fade-in elements */
[data-fade] {
    opacity: 0;
    transition: opacity 1.5s ease;
}

[data-fade].visible {
    opacity: 1;
}

/* The Pause */
.section-pause {
    min-height: 100vh;
}

/* The Collection */
.section-collection {
    min-height: 250vh;
    padding-top: 100px;
    padding-bottom: 100px;
}

.passage {
    margin-bottom: 80px;
}

/* Expanding horizontal rule */
.expanding-rule {
    width: 0;
    height: 1px;
    background-color: var(--divider);
    margin: 80px auto;
    transition: width 0.8s ease;
}

.expanding-rule.expanded {
    width: 120px;
}

/* The Space */
.section-space {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-character {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 300;
    font-size: 64px;
    color: var(--divider);
    transition: color 2s ease;
    cursor: default;
}

.ma-character:hover {
    color: var(--accent);
}

/* The Farewell */
.section-farewell {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
}

.farewell-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Mobile */
@media (max-width: 768px) {
    .column {
        max-width: 100%;
        padding: 0 24px;
    }

    .moment-dot {
        margin-left: 0;
    }
}