/* quietjoon.com -- Wabi-Sabi Ceramic */
:root {
    --parchment: #F5F0E8;
    --clay-dark: #3A3228;
    --clay-mid: #5A4F42;
    --clay-light: #8A7E6F;
    --ash: #C4B5A0;
    --kiln: #B87A56;
    --smoke: #EDE6DA;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Crimson Pro', serif; font-weight: 300; font-size: 18px; line-height: 2.0; color: var(--clay-mid); background: var(--parchment); overflow-x: hidden; }

.paper-grain { position: fixed; inset: 0; opacity: 0.03; filter: url(#grain); pointer-events: none; z-index: 0; }

.scroll-space { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 200px 24px; }

/* Spacing blocks */
.space-200 { height: 200px; }
.space-400 { height: 400px; }
.space-600 { height: 600px; }

/* Station: Name */
.station-name { text-align: center; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.site-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 42px;
    color: var(--clay-dark);
    letter-spacing: 0.04em;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 2.5s linear;
}
.site-name.visible { opacity: 1; }

.brush-stroke { width: 200px; height: 6px; margin-top: 16px; }
.brush-draw {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
}
.brush-draw.drawn { animation: draw-brush 1.2s ease-out forwards; }
@keyframes draw-brush { to { stroke-dashoffset: 0; } }

.domain-suffix {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    color: var(--clay-light);
    letter-spacing: 0.06em;
    margin-top: 12px;
    margin-left: 20px;
    opacity: 0;
    transition: opacity 1s linear;
}
.domain-suffix.visible { opacity: 1; }

/* Station: Circle */
.station-circle { display: flex; align-items: flex-start; gap: 0; position: relative; }
.ceramic-circle {
    width: 280px;
    height: 280px;
    flex-shrink: 0;
    margin-left: -60px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s linear, transform 0.8s ease-out;
}
.ceramic-circle.visible { opacity: 1; transform: translateX(0); }
.ceramic-circle svg { width: 100%; height: 100%; }

.circle-text {
    margin-left: -40px;
    padding-top: 60px;
    margin-right: -20px;
    opacity: 0;
    transition: opacity 1s linear 0.2s;
}
.circle-text.visible { opacity: 1; }

.body-text { color: var(--clay-mid); max-width: 36em; margin-bottom: 24px; }
.body-text:last-child { margin-bottom: 0; }

/* Station: Mark */
.station-mark { padding-left: 0; }
.mark-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 36px;
    color: var(--clay-dark);
    letter-spacing: 0.04em;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 1.2s linear;
}
.mark-heading.visible { opacity: 1; }
.offset-left { margin-left: -30px; }

.mark-accent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 1s linear 0.3s;
}
.mark-accent.visible { opacity: 1; }

.ink-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--kiln); flex-shrink: 0; }
.mark-caption { font-family: 'Shippori Mincho', serif; font-size: 13px; letter-spacing: 0.06em; color: var(--clay-light); }

/* Station: Ending */
.station-ending { text-align: center; }
.ending-word {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 28px;
    color: var(--ash);
    display: block;
    opacity: 0;
    transition: opacity 1.5s linear;
}
.ending-word.visible { opacity: 1; }

.brush-final { width: 160px; height: 6px; margin: 16px auto 0; display: block; }
.brush-draw-end {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
}
.station-ending.visible .brush-draw-end { animation: draw-brush 1.2s ease-out 0.5s forwards; }

@media (max-width: 768px) {
    .scroll-space { padding: 120px 20px; }
    .station-circle { flex-direction: column; align-items: center; }
    .ceramic-circle { margin-left: 0; width: 200px; height: 200px; }
    .circle-text { margin-left: 0; padding-top: 24px; margin-right: 0; }
    .site-name { font-size: 32px; }
    .mark-heading { font-size: 28px; margin-left: 0; }
}