:root {
    /* IBM Plex Sans JP* JP** sparingly for emergency alert text */
    --washi-morning: #F8F1E3;
    --reiwa-vermilion: #C83A2B;
    --plum-shadow: #5E2745;
    --rain-glass-blue: #8DB7C7;
    --mask-white: #F2F4F1;
    --moon-ink: #15191F;
    --new-banknote-sage: #6F8B6B;
    --mincho: "Shippori Mincho", serif;
    --gothic: "Zen Kaku Gothic New", sans-serif;
    --serif-jp: "Noto Serif JP", serif;
    --plex: "IBM Plex Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--moon-ink);
    background: var(--washi-morning);
    font-family: var(--serif-jp);
    overflow-x: hidden;
}

button { font: inherit; }

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    opacity: .45;
    mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 12% 18%, rgba(94,39,69,.08) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 32%, rgba(111,139,107,.12) 0 1px, transparent 2px),
        linear-gradient(93deg, transparent 0 48%, rgba(21,25,31,.025) 49% 51%, transparent 52% 100%);
    background-size: 43px 51px, 67px 59px, 11px 100%;
}

.scroll-narrative { position: relative; }

.chamber {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 5vw, 72px);
}

.chamber::before,
.chamber::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(24vw, 260px);
    background: linear-gradient(90deg, rgba(242,244,241,.76), rgba(248,241,227,.28));
    box-shadow: 0 0 38px rgba(21,25,31,.07), inset -1px 0 rgba(94,39,69,.12);
    z-index: -1;
    transform: translateX(var(--part, 0));
    transition: transform 900ms cubic-bezier(.2,.7,.12,1);
}

.chamber::before { left: 0; }
.chamber::after { right: 0; transform: translateX(calc(var(--part, 0) * -1)) scaleX(-1); }
.chamber.in-view { --part: -22px; }

.era-index {
    position: fixed;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: grid;
    gap: 12px;
}

.era-dot {
    width: 35px;
    height: 35px;
    border: 0;
    background: transparent;
    color: var(--plum-shadow);
    font-family: var(--plex);
    font-size: 11px;
    letter-spacing: .08em;
    cursor: pointer;
    position: relative;
}

.era-dot::before {
    content: "";
    position: absolute;
    inset: 11px;
    background: rgba(200,58,43,.24);
    border-radius: 50%;
    transition: transform 350ms ease, background 350ms ease;
}

.era-dot span { position: relative; writing-mode: vertical-rl; }
.era-dot.active::before { transform: scale(2.15); background: rgba(200,58,43,.82); }
.era-dot.active { color: var(--washi-morning); }

.seal-spine {
    position: fixed;
    left: clamp(26px, 7vw, 92px);
    top: 0;
    width: 34px;
    height: 100vh;
    z-index: 35;
    pointer-events: none;
}

.seal-spine::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(200,58,43,.18);
}

.seal-progress {
    position: absolute;
    left: 13px;
    top: 0;
    width: 8px;
    height: 0;
    background: linear-gradient(var(--reiwa-vermilion), var(--plum-shadow), var(--rain-glass-blue), var(--reiwa-vermilion));
    box-shadow: 0 0 18px rgba(200,58,43,.28);
    border-radius: 999px;
}

.seal-node {
    position: absolute;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mincho);
    color: var(--washi-morning);
    background: var(--reiwa-vermilion);
    box-shadow: 0 0 0 7px rgba(200,58,43,.12);
}

.node-dawn { top: 10%; }
.node-noon { top: 43%; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--reiwa-vermilion) 0 6px, transparent 6px 12px); }
.node-rain { top: 64%; background: var(--rain-glass-blue); }
.node-night { top: 86%; background: var(--plum-shadow); }

.dawn {
    background: var(--washi-morning);
}

.noren {
    position: absolute;
    top: 0;
    width: 33%;
    height: 74vh;
    background: linear-gradient(180deg, rgba(242,244,241,.92), rgba(248,241,227,.55));
    box-shadow: 0 24px 34px rgba(21,25,31,.09), inset 0 -1px rgba(94,39,69,.12);
    animation: clothPart 4s ease-in-out infinite alternate;
}

.noren-left { left: 18%; transform-origin: top right; }
.noren-right { left: 51%; transform-origin: top left; animation-delay: -1.7s; }

.dawn-seal {
    position: absolute;
    left: 50%;
    top: 42%;
    width: clamp(150px, 20vw, 260px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.96);
    border-radius: 50%;
    background: var(--reiwa-vermilion);
    opacity: .9;
    display: grid;
    place-items: center;
    filter: url(#none);
    mask-image: radial-gradient(circle, #000 46%, rgba(0,0,0,.9) 50%, transparent 71%);
    animation: sealPress 2.7s cubic-bezier(.2,.9,.25,1) both, inkBreathe 6s ease-in-out infinite 2.8s;
}

.dawn-seal span {
    font-family: var(--mincho);
    color: var(--washi-morning);
    font-size: clamp(54px, 9vw, 120px);
    letter-spacing: -.18em;
    transform: translateX(-.08em);
}

.low-title {
    position: absolute;
    left: clamp(58px, 12vw, 180px);
    bottom: 10vh;
}

.low-title h1,
.midnight-copy h2 {
    margin: 0;
    font-family: var(--mincho);
    font-weight: 500;
    font-size: clamp(46px, 10vw, 140px);
    letter-spacing: -.055em;
    color: var(--moon-ink);
}

.low-title p:last-child,
.midnight-copy p:last-child {
    margin: 12px 0 0;
    font-family: var(--gothic);
    color: var(--plum-shadow);
    letter-spacing: .12em;
}

.date-fragment,
.chapter-kicker {
    font-family: var(--mincho);
    color: var(--reiwa-vermilion);
    letter-spacing: .18em;
    margin: 0 0 18px;
}

.edge-note {
    position: absolute;
    right: 10vw;
    top: 20vh;
    writing-mode: vertical-rl;
    font-family: var(--gothic);
    color: var(--plum-shadow);
    letter-spacing: .2em;
}

.morning {
    background: linear-gradient(100deg, var(--mask-white), var(--washi-morning) 62%, rgba(141,183,199,.22));
}

.fabric-panel {
    position: absolute;
    left: 18vw;
    top: 13vh;
    width: min(560px, 50vw);
    min-height: 68vh;
    padding: clamp(28px, 5vw, 70px);
    background: rgba(248,241,227,.72);
    box-shadow: 18px 24px 45px rgba(94,39,69,.11), inset 0 0 0 1px rgba(94,39,69,.1);
}

.stitch-line {
    position: absolute;
    right: 22px;
    top: 0;
    bottom: 0;
    border-right: 1px dashed rgba(94,39,69,.28);
}

h2 {
    margin: 0;
    font-family: var(--mincho);
    font-weight: 500;
    font-size: clamp(34px, 6vw, 82px);
    line-height: .98;
    color: var(--plum-shadow);
}

.poem {
    max-width: 34ch;
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.9;
    color: rgba(21,25,31,.78);
}

.plum-field {
    position: absolute;
    right: 13vw;
    top: 28vh;
    width: 270px;
    height: 270px;
}

.plum-field i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 92px;
    margin: -46px 0 0 -35px;
    background: rgba(94,39,69,.74);
    border-radius: 55% 55% 60% 60%;
    transform: rotate(calc(var(--p) * 72deg)) translateY(-68px);
    transform-origin: 50% 114px;
    opacity: 0;
    animation: petalAppear 900ms ease forwards;
}

.plum-field i:nth-child(1) { --p: 0; animation-delay: .1s; }
.plum-field i:nth-child(2) { --p: 1; animation-delay: .25s; }
.plum-field i:nth-child(3) { --p: 2; animation-delay: .4s; }
.plum-field i:nth-child(4) { --p: 3; animation-delay: .55s; }
.plum-field i:nth-child(5) { --p: 4; animation-delay: .7s; }

.calendar-strip {
    position: absolute;
    right: 8vw;
    bottom: 10vh;
    display: flex;
    gap: 8px;
    font-family: var(--plex);
    color: var(--reiwa-vermilion);
}

.calendar-strip span {
    border: 1px solid rgba(200,58,43,.35);
    padding: 11px 13px;
    background: rgba(248,241,227,.68);
}

.street {
    background: linear-gradient(165deg, var(--washi-morning) 0 52%, rgba(21,25,31,.08) 52% 100%);
}

.station-floor {
    position: absolute;
    inset: auto -10vw 0 12vw;
    height: 44vh;
    transform: skewY(-10deg);
    background: repeating-linear-gradient(90deg, rgba(21,25,31,.08) 0 1px, transparent 1px 88px), var(--mask-white);
}

.station-floor span {
    position: absolute;
    width: 120px;
    height: 26px;
    background: var(--new-banknote-sage);
    clip-path: polygon(0 32%, 68% 32%, 68% 0, 100% 50%, 68% 100%, 68% 68%, 0 68%);
    opacity: .58;
}

.station-floor span:nth-child(1) { left: 12%; top: 36%; }
.station-floor span:nth-child(2) { left: 38%; top: 56%; }
.station-floor span:nth-child(3) { left: 67%; top: 29%; }

.mask-silhouette {
    position: absolute;
    left: 22vw;
    top: 30vh;
    width: 118px;
    height: 58px;
    background: var(--mask-white);
    border-radius: 12px 12px 30px 30px;
    box-shadow: 0 16px 28px rgba(21,25,31,.12);
}

.mask-silhouette::before,
.mask-silhouette::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 42px;
    height: 28px;
    border: 2px solid rgba(141,183,199,.75);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
}

.mask-silhouette::before { left: -34px; }
.mask-silhouette::after { right: -34px; }

.vertical-caption {
    position: absolute;
    left: 11vw;
    top: 18vh;
    writing-mode: vertical-rl;
    font-family: var(--plex);
    color: var(--plum-shadow);
    background: rgba(248,241,227,.58);
    padding: 18px 11px;
    letter-spacing: .16em;
}

.side-copy {
    position: absolute;
    right: 12vw;
    top: 18vh;
    width: min(470px, 40vw);
}

.vending-glow {
    position: absolute;
    right: 20vw;
    bottom: 18vh;
    width: 48px;
    height: 120px;
    background: var(--reiwa-vermilion);
    box-shadow: 0 0 42px rgba(200,58,43,.65);
}

.noon {
    background: linear-gradient(110deg, rgba(141,183,199,.34), var(--washi-morning) 47%, var(--mask-white));
}

.remote-grid {
    position: absolute;
    left: 15vw;
    top: 12vh;
    width: min(56vw, 760px);
    height: 70vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    transform: perspective(900px) rotateY(8deg);
}

.remote-grid span {
    background: rgba(141,183,199,.32);
    border: 1px solid rgba(141,183,199,.74);
    box-shadow: inset 0 0 42px rgba(242,244,241,.35);
    animation: windowPulse 5s ease-in-out infinite;
}

.remote-grid span:nth-child(2n) { animation-delay: -1.2s; }
.remote-grid span:nth-child(3n) { background: rgba(248,241,227,.55); }

.qr-stamp {
    position: absolute;
    right: 14vw;
    top: 18vh;
    width: 160px;
    height: 160px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.qr-stamp b {
    background: var(--reiwa-vermilion);
    transition: border-radius 500ms ease, transform 500ms ease;
}

.qr-stamp.flower b { border-radius: 55% 55% 60% 60%; transform: rotate(22deg) scale(.82); }

.noon-text {
    position: absolute;
    right: 9vw;
    bottom: 11vh;
    width: min(480px, 42vw);
    padding: 28px;
    background: rgba(242,244,241,.7);
    backdrop-filter: blur(3px);
}

.rain {
    color: var(--mask-white);
    background: linear-gradient(180deg, var(--rain-glass-blue), var(--moon-ink));
}

.rain h2,
.rain .poem { color: var(--mask-white); }

.bulletin {
    position: absolute;
    left: 12vw;
    top: 12vh;
    display: grid;
    gap: 7px;
    font-family: var(--plex);
    color: var(--moon-ink);
}

.bulletin span {
    width: fit-content;
    background: rgba(242,244,241,.8);
    padding: 8px 16px;
}

.rain-rings i {
    position: absolute;
    width: var(--s);
    height: var(--s);
    border: 1px solid rgba(242,244,241,.45);
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    animation: rainRing 3.5s ease-out infinite;
}

.rain-rings i:nth-child(1) { --s: 150px; --x: 18%; --y: 44%; }
.rain-rings i:nth-child(2) { --s: 230px; --x: 54%; --y: 18%; animation-delay: -.8s; }
.rain-rings i:nth-child(3) { --s: 90px; --x: 70%; --y: 65%; animation-delay: -1.3s; }
.rain-rings i:nth-child(4) { --s: 310px; --x: 30%; --y: 68%; animation-delay: -2s; }
.rain-rings i:nth-child(5) { --s: 180px; --x: 80%; --y: 32%; animation-delay: -2.8s; }

.rain-copy {
    position: absolute;
    right: 12vw;
    top: 34vh;
    width: min(560px, 48vw);
}

.distorted { filter: url(#waterText); }

.dusk {
    background: linear-gradient(180deg, var(--plum-shadow), #15191F 74%);
    color: var(--mask-white);
}

.dusk h2,
.dusk .poem { color: var(--mask-white); }

.lantern-cord {
    position: absolute;
    left: 10vw;
    right: 10vw;
    top: 18vh;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(248,241,227,.35);
    padding-top: 22px;
}

.lantern-cord span {
    width: 70px;
    height: 92px;
    border-radius: 50% 50% 45% 45%;
    background: rgba(248,241,227,.28);
    box-shadow: inset 0 -18px 28px rgba(200,58,43,.16), 0 0 0 rgba(200,58,43,0);
    transition: background 700ms ease, box-shadow 700ms ease;
}

.lantern-cord span.lit {
    background: var(--washi-morning);
    box-shadow: inset 0 -24px 34px rgba(200,58,43,.55), 0 0 44px rgba(200,58,43,.5);
}

.guilloche {
    position: absolute;
    inset: auto -10vw 0 -10vw;
    height: 36vh;
    opacity: .26;
    background: repeating-radial-gradient(ellipse at center, transparent 0 18px, var(--new-banknote-sage) 19px 20px, transparent 21px 37px);
    transform: rotate(-4deg);
}

.dusk-copy {
    position: absolute;
    left: 18vw;
    bottom: 12vh;
    width: min(620px, 54vw);
}

.midnight {
    min-height: 110vh;
    color: var(--mask-white);
    background: var(--moon-ink);
}

.moon-seal {
    position: absolute;
    right: 16vw;
    top: 18vh;
    width: clamp(170px, 24vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(242,244,241,.88);
    color: var(--plum-shadow);
    display: grid;
    place-items: center;
    box-shadow: 0 0 80px rgba(242,244,241,.18);
}

.moon-seal span { font-family: var(--mincho); font-size: clamp(70px, 12vw, 170px); }

.lantern-dots i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--reiwa-vermilion);
    box-shadow: 0 0 18px rgba(200,58,43,.85);
    animation: dotFade 4s ease-in-out infinite;
}

.lantern-dots i:nth-child(1) { --x: 13%; --y: 28%; }
.lantern-dots i:nth-child(2) { --x: 22%; --y: 78%; animation-delay: -.4s; }
.lantern-dots i:nth-child(3) { --x: 34%; --y: 55%; animation-delay: -.9s; }
.lantern-dots i:nth-child(4) { --x: 46%; --y: 22%; animation-delay: -1.4s; }
.lantern-dots i:nth-child(5) { --x: 56%; --y: 82%; animation-delay: -1.9s; }
.lantern-dots i:nth-child(6) { --x: 70%; --y: 64%; animation-delay: -2.4s; }
.lantern-dots i:nth-child(7) { --x: 82%; --y: 32%; animation-delay: -2.9s; }
.lantern-dots i:nth-child(8) { --x: 91%; --y: 72%; animation-delay: -3.3s; }
.lantern-dots i:nth-child(9) { --x: 18%; --y: 46%; animation-delay: -1.1s; }
.lantern-dots i:nth-child(10) { --x: 40%; --y: 88%; animation-delay: -2.2s; }
.lantern-dots i:nth-child(11) { --x: 62%; --y: 43%; animation-delay: -3.5s; }
.lantern-dots i:nth-child(12) { --x: 76%; --y: 18%; animation-delay: -.7s; }

.midnight-copy {
    position: absolute;
    left: 14vw;
    bottom: 18vh;
}

.midnight-copy h2 { color: var(--mask-white); }
.midnight-copy p:last-child { color: var(--rain-glass-blue); }

@keyframes sealPress {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); filter: blur(9px); }
    65% { opacity: .95; transform: translate(-50%, -50%) scale(.92); filter: blur(1px); }
    100% { opacity: .88; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes inkBreathe {
    50% { border-radius: 45% 54% 50% 48%; filter: blur(.4px); }
}

@keyframes clothPart {
    0% { transform: skewX(0deg) translateX(0); }
    100% { transform: skewX(1.6deg) translateX(-10px); }
}

@keyframes petalAppear { to { opacity: .8; } }

@keyframes windowPulse {
    50% { background: rgba(242,244,241,.68); box-shadow: inset 0 0 50px rgba(141,183,199,.5), 0 0 20px rgba(141,183,199,.22); }
}

@keyframes rainRing {
    0% { transform: scale(.2); opacity: .65; }
    100% { transform: scale(1.7); opacity: 0; }
}

@keyframes dotFade { 50% { opacity: .18; transform: scale(.55); } }

@media (max-width: 820px) {
    .era-index { right: 8px; gap: 5px; }
    .seal-spine { left: 14px; }
    .chamber { padding: 42px 48px; }
    .fabric-panel, .side-copy, .noon-text, .rain-copy, .dusk-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 14vh 0 0 24px; }
    .plum-field, .qr-stamp, .moon-seal { right: 44px; opacity: .55; }
    .remote-grid { left: 52px; width: 72vw; opacity: .45; }
    .lantern-cord { left: 54px; right: 34px; }
    .lantern-cord span { width: 38px; height: 54px; }
    .low-title { left: 54px; }
}