/* ===========================================================================
concurrengine.com — moss-lit shoin
japanese-minimal · timeline-vertical · playful-rounded · forest-green
===========================================================================*/
:root {
--ink-deep: #0E1A14;
--moss-shadow: #1F3A2A;
--moss-mid: #2D5C3E;
--moss-leaf: #5A8C6E;
--moss-bright: #8AB89A;
--neon-spore: #3FE6A4;
--washi: #F4EFE3;
--washi-deep: #E8E0CC;
/* trunk geometry */
--trunk-offset: clamp(-3vw, -1.6%, -16px);
--viewport-max: min(1180px, 92vw);
/* type scale, golden ratio */
--t-11: 11px;
--t-13: 13.5px;
--t-16: 16.5px;
--t-21: 21px;
--t-33: 33px;
--t-53: 53.5px;
--t-86: 86.5px;
/* easing */
--ease-koi: cubic-bezier(0.32, 0.72, 0, 1);
/* velocity (set by JS on ) */
--velocity-glow-opacity: 0.5;
--velocity-wave-opacity: 1;
}
html {
background: var(--washi);
color: var(--ink-deep);
scroll-behavior: auto;
}
html[data-velocity-state="slow"] {
--velocity-glow-opacity: 1;
--velocity-wave-opacity: 1;
}
html[data-velocity-state="mid"] {
--velocity-glow-opacity: 0.55;
--velocity-wave-opacity: 1;
}
html[data-velocity-state="fast"] {
--velocity-glow-opacity: 0;
--velocity-wave-opacity: 0.3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
font-weight: 300;
font-size: var(--t-16);
line-height: 1.85;
letter-spacing: 0.012em;
color: var(--ink-deep);
background: var(--washi);
overflow-x: hidden;
position: relative;
min-height: 100vh;
}
/* ===== Washi grain underprint ============================================= */
.washi-grain {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: multiply;
background-image: none;
will-change: transform;
}
.washi-grain svg {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 600px;
/* tiled via repeated use of background-image generated by JS, alternate approach: */
}
/* tiled grain via repeating SVG background, baked in CSS */
body::before {
content: "";
position: fixed;
inset: -10vh -5vw;
pointer-events: none;
z-index: 1;
opacity: 0.06;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 420px 420px;
transform: translateY(var(--washi-parallax, 0));
will-change: transform;
}
/* ===== The trunk (full-document inline SVG) =============================== */
.trunk-svg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(calc(-50% + var(--trunk-offset)));
width: 12px;
height: 100%;
z-index: 2;
pointer-events: none;
overflow: visible;
}
.trunk-ink {
stroke: var(--ink-deep);
}
.trunk-swell {
stroke: var(--ink-deep);
}
.trunk-neon {
stroke: var(--neon-spore);
opacity: var(--velocity-glow-opacity);
transition: opacity 1.4s var(--ease-koi);
filter: drop-shadow(0 0 4px var(--neon-spore))
drop-shadow(0 0 12px rgba(63, 230, 164, 0.55))
drop-shadow(0 0 36px rgba(63, 230, 164, 0.18));
}
/* ===== Scroll stage ======================================================= */
.scroll-stage {
position: relative;
z-index: 3;
width: 100%;
max-width: var(--viewport-max);
margin: 0 auto;
padding: 0;
}
.section {
position: relative;
width: 100%;
padding: 220px 0;
}
/* section heights via golden-spiral cadence */
.section-1 { min-height: 110vh; padding-top: 18vh; padding-bottom: 30vh; }
.section-2 { min-height: 160vh; padding: 18vh 0 14vh; }
.section-3 { min-height: 220vh; padding: 16vh 0 18vh; }
.section-4 { min-height: 140vh; padding: 18vh 0 18vh; }
.section-5 { min-height: 220vh; padding: 14vh 0 14vh; }
.section-6 { min-height: 120vh; padding: 14vh 0 12vh; }
.section-7 { min-height: 110vh; padding: 14vh 0 28vh; }
/* ===== Decorative kanji ==================================================== */
.kanji-glyph {
position: absolute;
font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
font-size: var(--t-86);
color: var(--moss-shadow);
opacity: 0.18;
line-height: 1;
transition: opacity 600ms var(--ease-koi), transform 800ms var(--ease-koi);
pointer-events: none;
user-select: none;
z-index: 4;
}
.kanji-glyph.in-focus {
opacity: 1;
transform: translateY(-6px);
}
.kanji-left {
left: calc(50% - 200px + var(--trunk-offset));
transform: translateX(-100%);
top: 12vh;
}
.kanji-right {
left: calc(50% + 32px + var(--trunk-offset));
top: 12vh;
}
.terminus-kanji {
top: 18vh;
}
/* ===== Section 1: opening wave ============================================ */
.section-mist {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32vh;
background: linear-gradient(to bottom, var(--washi) 0%, rgba(244, 239, 227, 0.72) 60%, transparent 100%);
pointer-events: none;
z-index: 5;
}
.opening-wave {
position: relative;
margin: 36vh auto 4vh;
width: 60%;
max-width: 720px;
z-index: 6;
}
.opening-wave .wave-form {
width: 100%;
height: 80px;
opacity: var(--velocity-wave-opacity);
transition: opacity 600ms var(--ease-koi);
}
.opening-line {
position: relative;
text-align: center;
margin: 6vh auto 0;
z-index: 6;
}
.opening-statement {
font-family: "Klee One", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-21);
line-height: 1.5;
color: var(--moss-shadow);
letter-spacing: 0.02em;
}
/* ===== Node anatomy ======================================================= */
.node {
position: relative;
width: 100%;
margin: 14vh 0;
z-index: 6;
opacity: 0;
transform: translateY(40px);
transition: opacity 1200ms var(--ease-koi), transform 1200ms var(--ease-koi);
}
.node.entered {
opacity: 1;
transform: translateY(0);
}
.node-left { padding-right: calc(50% - var(--trunk-offset) + 24px); padding-left: 0; text-align: right; }
.node-right { padding-left: calc(50% + var(--trunk-offset) + 24px); padding-right: 0; text-align: left; }
/* Ring (on the trunk itself) */
.ring {
position: absolute;
top: 28px;
left: calc(50% + var(--trunk-offset));
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
z-index: 7;
}
.ring-outer, .ring-inner {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.ring-outer {
width: 18px;
height: 18px;
border: 1.5px solid var(--ink-deep);
background: var(--washi);
transition: box-shadow 1.4s var(--ease-koi), border-color 600ms var(--ease-koi);
}
.ring-inner {
width: 6px;
height: 6px;
background: var(--washi);
border: 1px solid var(--ink-deep);
}
.node.in-focus .ring-outer {
box-shadow:
0 0 4px rgba(63, 230, 164, calc(0.8 * var(--velocity-glow-opacity))),
0 0 18px rgba(63, 230, 164, calc(0.4 * var(--velocity-glow-opacity))),
0 0 48px rgba(63, 230, 164, calc(0.16 * var(--velocity-glow-opacity)));
border-color: var(--moss-shadow);
}
/* Bough — hand-curved Bezier, underline-draw on entry */
.bough {
position: absolute;
top: 22px;
width: 220px;
height: 60px;
z-index: 5;
overflow: visible;
}
.bough-left {
right: calc(50% - var(--trunk-offset));
}
.bough-right {
left: calc(50% + var(--trunk-offset));
}
.bough-path {
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 1100ms var(--ease-koi);
opacity: var(--velocity-wave-opacity);
}
.node.entered .bough-path {
stroke-dashoffset: 0;
}
/* Panel — washi card 1:1.618 */
.panel {
position: relative;
display: inline-block;
text-align: left;
background: rgba(244, 239, 227, 0.92);
border: 1px solid rgba(14, 26, 20, 0.2);
padding: 28px 32px 20px;
width: 320px;
max-width: 100%;
margin-top: 6px;
}
.node-left .panel { margin-right: 0; }
.node-right .panel { margin-left: 0; }
.panel::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.08;
pointer-events: none;
}
.timestamp {
display: block;
font-family: "Kosugi Maru", "Hiragino Sans", system-ui, sans-serif;
font-weight: 400;
font-size: var(--t-11);
color: var(--moss-leaf);
letter-spacing: 0.16em;
font-variant-numeric: tabular-nums;
margin-bottom: 8px;
}
.node-title {
font-family: "Klee One", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-33);
line-height: 1.2;
color: var(--moss-shadow);
letter-spacing: 0.005em;
margin-bottom: 14px;
position: relative;
display: inline-block;
}
/* underline-draw — SVG-style, simulated by an animated background-size on a linear-gradient that uses moss-mid */
.node-title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 2px;
background: linear-gradient(to right, var(--moss-mid) 0%, var(--moss-mid) 100%);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 480ms var(--ease-koi);
}
.node.entered .node-title::after {
background-size: 100% 100%;
}
.node-body {
font-family: "Zen Maru Gothic", "Hiragino Sans", system-ui, sans-serif;
font-weight: 300;
font-size: var(--t-16);
line-height: 1.85;
color: var(--ink-deep);
margin-bottom: 8px;
}
.node-body.subtle {
color: var(--moss-leaf);
font-size: var(--t-13);
}
/* wave-strip at panel base */
.wave-strip {
display: block;
width: 100%;
height: 12px;
margin-top: 14px;
opacity: var(--velocity-wave-opacity);
transition: opacity 600ms var(--ease-koi);
}
/* ===== Section 4: ma ====================================================== */
.ma-stretch {
position: relative;
width: 100%;
height: 100vh;
margin: 30vh 0 30vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.ma-whisper {
text-align: center;
}
.ma-line {
font-family: "Shippori Mincho", "Yu Mincho", serif;
font-weight: 500;
font-size: var(--t-13);
color: var(--moss-leaf);
letter-spacing: 0.4em;
opacity: 0.5;
}
.drift-wave {
position: absolute;
bottom: 12vh;
left: 0;
right: 0;
width: 100%;
height: 60px;
opacity: var(--velocity-wave-opacity);
transition: opacity 600ms var(--ease-koi);
}
.drift-wave .wave-form {
width: 100%;
height: 60px;
}
/* ===== Section 5: neon hint =============================================== */
.velocity-hint {
position: relative;
text-align: center;
margin-top: 16vh;
font-family: "Klee One", "Hiragino Sans", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-13);
color: var(--moss-bright);
letter-spacing: 0.08em;
opacity: calc(0.4 + 0.6 * var(--velocity-glow-opacity));
transition: opacity 800ms var(--ease-koi), color 800ms var(--ease-koi);
z-index: 6;
}
html[data-velocity-state="slow"] .velocity-hint {
color: var(--neon-spore);
}
/* ===== Section 6: pool ==================================================== */
.pool {
position: relative;
width: min(820px, 90%);
margin: 8vh auto 8vh;
padding: 56px 48px 64px;
background: linear-gradient(180deg, var(--washi-deep) 0%, var(--washi) 60%, var(--washi-deep) 100%);
border: 1px solid rgba(14, 26, 20, 0.18);
z-index: 8;
overflow: hidden;
}
.pool::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.08;
pointer-events: none;
}
.pool-water {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 80px;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
opacity: var(--velocity-wave-opacity);
}
.pool-wave {
width: 100%;
height: 80px;
}
.pool-content {
position: relative;
z-index: 2;
text-align: center;
}
.pool-title {
font-family: "Klee One", "Hiragino Sans", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-53);
color: var(--moss-shadow);
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: 0.005em;
}
.pool-body {
font-family: "Zen Maru Gothic", "Hiragino Sans", system-ui, sans-serif;
font-weight: 300;
font-size: var(--t-16);
line-height: 1.85;
max-width: 60ch;
margin: 0 auto 12px;
color: var(--ink-deep);
}
.pool-body.subtle {
color: var(--moss-leaf);
font-size: var(--t-13);
}
/* ===== Section 7: terminus ================================================ */
.terminus {
position: relative;
text-align: center;
margin-top: 30vh;
z-index: 6;
}
.terminus-line {
font-family: "Klee One", "Hiragino Sans", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-21);
color: var(--moss-shadow);
letter-spacing: 0.02em;
margin-bottom: 12vh;
}
.terminus-contact {
display: inline-block;
font-family: "Klee One", "Hiragino Sans", system-ui, sans-serif;
font-weight: 600;
font-size: var(--t-21);
color: var(--ink-deep);
line-height: 1.6;
}
.contact-label {
display: block;
font-size: var(--t-11);
color: var(--moss-leaf);
letter-spacing: 0.32em;
margin-bottom: 14px;
text-transform: lowercase;
}
.contact-mail {
color: var(--moss-mid);
border-bottom: 1px solid rgba(45, 92, 62, 0.4);
padding-bottom: 4px;
}
/* ===== Bottom-tide ======================================================== */
.bottom-tide {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
z-index: 1;
pointer-events: none;
opacity: calc(0.7 * var(--velocity-wave-opacity));
transition: opacity 800ms var(--ease-koi);
}
.bottom-tide .wave-tide {
width: 100%;
height: 80px;
}
/* ===== Wave path defaults ================================================= */
.wave-path {
fill: none;
stroke: var(--moss-mid);
}
/* ===== Responsive ========================================================= */
@media (max-width: 720px) {
:root {
--trunk-offset: 0px;
}
.trunk-svg {
left: 22px;
transform: none;
width: 8px;
}
.scroll-stage {
padding-left: 22px;
}
.ring {
left: 22px;
}
.node-left, .node-right {
padding-left: 60px;
padding-right: 16px;
text-align: left;
}
.bough-left, .bough-right {
left: 22px;
right: auto;
width: 38px;
}
.panel {
width: 100%;
}
.kanji-left {
left: auto;
right: 16px;
transform: none;
}
.kanji-right {
left: auto;
right: 16px;
}
.opening-wave {
width: 88%;
margin-left: 60px;
}
.pool {
margin-left: 22px;
margin-right: 16px;
width: auto;
padding: 32px 22px 40px;
}
.terminus {
text-align: left;
padding-left: 60px;
padding-right: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.trunk-neon {
opacity: 0.5;
}
.bough-path,
.node,
.node-title::after,
.kanji-glyph,
.wave-strip,
.drift-wave,
.pool-water,
.bottom-tide {
transition-duration: 0.01ms !important;
}
.node {
opacity: 1;
transform: none;
}
.bough-path {
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}