/* ============================================================ RIGHTWEEK · v4 — the protocol as code The page is a warm printed zine. Content breathes on open paper; only things you can touch carry a light rule. Five muted riso inks. Halftone illustrations made of math. Every week is an issue. The inhabitant walks with you. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Karla:ital,wght@0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&display=swap'); :root { /* ---- the sheet: warm cream stock, sepia-black ink ---- */ --paper: #F8F2E4; /* warm zine cream */ --ink: #37301F; /* warm sepia-black */ --ink-soft: rgba(55, 48, 31, 0.58); --paper-soft: rgba(248, 242, 228, 0.65); /* ---- five spot inks (a riso drum set) — muted, warm, friendly: zine, not poster. ---- */ --sun: #DE9E2C; /* marigold · kitchen · vault */ --leaf: #4A9462; /* fern · garden · garage */ --cobalt: #3D69C2; /* riso blue · observatory · journal */ --clay: #C1503A; /* brick · workshop · playground */ --plum: #9A6BB4; /* orchid · library · studio */ /* ---- type: one friendly display, one humanist body, one typewriter mono ---- */ --f-display: 'Bricolage Grotesque', 'Avenir Next', sans-serif; --f-body: 'Karla', 'Helvetica Neue', sans-serif; --f-mono: 'Space Mono', 'SFMono-Regular', monospace; --t-huge: clamp(2.5rem, 6.5vw, 5.2rem); --t-big: clamp(1.6rem, 3.3vw, 2.5rem); --t-md: 1.02rem; --t-sm: 0.88rem; --t-xs: 0.72rem; /* ---- open-page grammar ---- */ --rule: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); /* a light pencil rule */ --rule-touch: 1.5px solid color-mix(in srgb, var(--ink) 34%, transparent); /* things you can press */ --wobble: 16px 20px 17px 14px; /* hand-ruled corners, never perfect */ --gutter: clamp(18px, 3vw, 36px); /* generous air between things */ --ease: cubic-bezier(0.22, 0.8, 0.3, 1); } /* ---- theme palettes: alternate paper/ink + five-ink matrices ---- [data-theme] on , set by theme-plugin.js. Same shape as :root above — only the values move. "paper" is the default and carries no attribute. */ [data-theme="dusk"] { --paper: #211B13; --ink: #F3EAD6; --ink-soft: rgba(243, 234, 214, 0.6); --paper-soft: rgba(33, 27, 19, 0.6); --sun: #F2B84B; --leaf: #6FBF84; --cobalt: #7D9BE8; --clay: #E0765A; --plum: #C39BD9; } [data-theme="blueprint"] { --paper: #1E3A6E; --ink: #F2F6FA; --ink-soft: rgba(242, 246, 250, 0.6); --paper-soft: rgba(30, 58, 110, 0.6); --sun: #F0C960; --leaf: #6FD3A2; --cobalt: #93B8F5; --clay: #EF9670; --plum: #CFAAEE; } [data-theme="evergreen"] { --paper: #F0F3E2; --ink: #2C3A26; --ink-soft: rgba(44, 58, 38, 0.6); --paper-soft: rgba(240, 243, 226, 0.65); --sun: #D9A63C; --leaf: #3C8A4E; --cobalt: #3379AC; --clay: #C05A34; --plum: #8D4E9E; } /* ---------------- base ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.7; -webkit-font-smoothing: antialiased; } ::selection { background: var(--ink); color: var(--paper); } h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -0.015em; } h1 { font-size: var(--t-huge); font-weight: 800; } h2 { font-size: var(--t-big); } h3 { font-size: 1.3rem; } p { margin: 0 0 14px; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; } .mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: lowercase; } .soft { color: var(--ink-soft); } /* ---------------- the sheet: one open page ---------------- No trim box anymore — the paper runs to the edge. The four registration marks stay, quietly, as the artifact of a press. */ .sheet { position: relative; min-height: 100vh; padding: 0 clamp(18px, 4vw, 56px) var(--gutter); overflow: clip; } .reg { position: absolute; width: 16px; height: 16px; color: var(--ink); opacity: 0.22; pointer-events: none; z-index: 4; } .reg svg { width: 100%; height: 100%; display: block; } .reg.tl { top: 10px; left: 10px; } .reg.tr { top: 10px; right: 10px; } .reg.bl { bottom: 10px; left: 10px; } .reg.br { bottom: 10px; right: 10px; } /* ---------------- bar ---------------- */ .bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 2px 16px; } .bar .mark { display: flex; align-items: center; gap: 10px; } .bar .mark .name { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; } .bar .right { display: flex; align-items: center; gap: 12px; } .sound-toggle { appearance: none; cursor: pointer; background: transparent; color: var(--ink); border: var(--rule-touch); border-radius: var(--wobble); width: 42px; height: 42px; display: grid; place-items: center; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .sound-toggle:hover { transform: rotate(-3deg); background: var(--ink); color: var(--paper); } .sound-toggle[aria-pressed="false"] .wave { opacity: 0.15; } /* theme-toggle: a small printer's swatch — three of the five spot inks, cycled by theme-plugin.js */ .theme-toggle { appearance: none; cursor: pointer; background: transparent; color: var(--ink); border: var(--rule-touch); border-radius: var(--wobble); width: 42px; height: 42px; display: grid; place-items: center; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .theme-toggle:hover { transform: rotate(3deg); background: var(--ink); color: var(--paper); } .theme-toggle .dot-a { fill: var(--sun); } .theme-toggle .dot-b { fill: var(--leaf); } .theme-toggle .dot-c { fill: var(--cobalt); } /* ---------------- caption: quiet mono metadata ------------------ No box anymore — a small mono line with a spot tick. */ .caption { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: lowercase; color: var(--ink-soft); } .caption::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--spot, currentColor); opacity: 0.75; } .panel > .caption.corner { position: absolute; top: 14px; left: 20px; z-index: 2; } .panel > .caption.corner.right { left: auto; right: 20px; } /* ---------------- speech balloon: a project speaks its line ----- */ .balloon { position: relative; display: inline-block; padding: 7px 16px; border: 1.5px solid color-mix(in srgb, var(--ink) 42%, transparent); border-radius: 999px; background: var(--paper); font-style: italic; font-size: var(--t-sm); } .balloon::before { content: ""; position: absolute; left: 26px; bottom: -9px; width: 12px; height: 12px; background: var(--paper); border-right: 1.5px solid color-mix(in srgb, var(--ink) 42%, transparent); border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 42%, transparent); transform: skewX(38deg) rotate(45deg); } /* ---------------- panels: content breathes on the paper --------- A panel is a region of the page now, not a box. Only panels you can touch (links) carry a light rule and lift on hover. */ .spread { display: grid; gap: var(--gutter); grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); grid-auto-flow: dense; } .panel { --spot: var(--clay); position: relative; border: 0; border-radius: var(--wobble); background: transparent; padding: 26px 22px 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } /* spans — laid out like a real page, not a uniform grid */ .p-3x2 { grid-column: span 3; grid-row: span 2; } .p-3x1 { grid-column: span 3; } .p-2x2 { grid-column: span 2; grid-row: span 2; } .p-2x1 { grid-column: span 2; } .p-6x1 { grid-column: span 6; } .p-4x1 { grid-column: span 4; } @media (max-width: 900px) { .spread { grid-template-columns: repeat(2, 1fr); } .p-3x2, .p-3x1, .p-2x2, .p-4x1 { grid-column: span 2; grid-row: auto; } .p-2x1 { grid-column: span 1; } } @media (max-width: 560px) { .spread { grid-template-columns: 1fr; } .panel, .p-2x1 { grid-column: span 1 !important; grid-row: auto !important; } } /* touchable panels: a light rule, and a wash of their ink on hover */ a.panel { border: var(--rule-touch); padding-top: 44px; } a.panel:hover, a.panel:focus-visible { background: color-mix(in srgb, var(--spot) 10%, var(--paper)); border-color: var(--spot); transform: translateY(-4px) rotate(-0.4deg); } a.panel:hover .caption, a.panel:focus-visible .caption { color: var(--spot); } a.panel:hover .room, a.panel:focus-visible .room, a.panel:hover h3, a.panel:focus-visible h3 { color: var(--spot); } .panel .glyph { width: 38px; height: 38px; color: var(--spot); transition: color 0.3s var(--ease); } .panel .glyph svg { width: 100%; height: 100%; } .panel .glyph path, .panel .glyph circle { stroke-dasharray: 1; stroke-dashoffset: 0; } a.panel:hover .glyph path, a.panel:hover .glyph circle { animation: redraw 0.8s var(--ease); } @keyframes redraw { from { stroke-dashoffset: 1; } } .panel .room { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.3vw, 1.8rem); margin-top: auto; transition: color 0.3s var(--ease); } .panel .use { font-size: var(--t-sm); opacity: 0.66; font-style: italic; } /* night panels: warm ink field, no rule needed (the moon lives here) */ .panel.night { background: var(--ink); color: var(--paper); border: 0; } .panel.night .caption { color: var(--paper-soft); } /* ---------------- hero splash: open air, no frame ---------------- */ .splash { position: relative; border: 0; border-radius: 0; padding: clamp(30px, 6vw, 70px) 2px; min-height: 56vh; display: flex; flex-direction: column; justify-content: center; overflow: visible; } .splash .halftone { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: clamp(240px, 38vw, 520px); pointer-events: none; } .splash h1 { position: relative; z-index: 1; max-width: 14ch; } .splash .after { position: relative; z-index: 1; margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } @media (max-width: 700px) { .splash .halftone { opacity: 0.5; } } /* words arrive in order, like lettering being set */ [data-kinetic] .w { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--d, 0ms); } [data-kinetic].on .w { opacity: 1; transform: none; } /* a hand-drawn ring around one word — the artist's note */ .circled { position: relative; display: inline-block; } .circled svg { position: absolute; inset: -0.22em -0.3em; width: calc(100% + 0.6em); height: calc(100% + 0.44em); pointer-events: none; overflow: visible; } .circled svg path { fill: none; stroke: var(--clay); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .circled.on svg path { transition: stroke-dashoffset 1s var(--ease) 0.9s; stroke-dashoffset: 0; } /* ---------------- halftone: illustration as illusion ---------- Dots on a mathematical grid; an image only at a distance. rw.js fills these. */ .halftone circle { transform-origin: center; transform-box: fill-box; } .halftone.animate circle { transform: scale(0); animation: dot-in 0.5s var(--ease) forwards; animation-delay: var(--dd, 0ms); } @keyframes dot-in { to { transform: scale(1); } } /* ---------------- strip: residents in a row of frames ---------- */ .strip { display: grid; gap: var(--gutter); grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; } .strip .panel { scroll-snap-align: start; min-height: 230px; } .strip .panel h3 { font-size: 1.4rem; margin-top: 2px; transition: color 0.3s var(--ease); } .strip .panel .balloon { align-self: flex-start; margin: 8px 0 4px; } .strip .panel .meta { margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); display: flex; flex-wrap: wrap; gap: 6px 14px; } /* lifecycle: the dot is alive */ .status { display: inline-flex; align-items: center; gap: 7px; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spot, var(--leaf)); } .status[data-stage="seed"]::before { background: transparent; border: 1.5px solid currentColor; } .status[data-stage="sapling"]::before { opacity: 0.6; } .status[data-stage="in-bloom"]::before { animation: pulse 2.6s ease-in-out infinite; } .status[data-stage="evergreen"]::before{ background: currentColor; } .status[data-stage="pruned"]::before { background: transparent; border: 1.5px dashed currentColor; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--spot, var(--leaf)); } 50% { box-shadow: 0 0 0 6px transparent; } } /* ---------------- buttons: soft ink-washed pills ---------------- */ .btn { --spot: var(--clay); display: inline-flex; align-items: center; gap: 9px; padding: 12px 26px; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: var(--t-sm); color: var(--ink); background: color-mix(in srgb, var(--spot) 14%, var(--paper)); border: 1.5px solid color-mix(in srgb, var(--spot) 55%, transparent); border-radius: 999px; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .btn:hover { background: color-mix(in srgb, var(--spot) 26%, var(--paper)); border-color: var(--spot); transform: translateY(-2px); } .btn.night { background: color-mix(in srgb, var(--spot) 30%, var(--ink)); border-color: color-mix(in srgb, var(--spot) 60%, transparent); color: var(--paper); } .btn.night:hover { background: color-mix(in srgb, var(--spot) 45%, var(--ink)); } /* ---------------- growth rings ---------------- */ .rings { list-style: none; margin: 0; padding: 0; position: relative; } .rings::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; border-left: 1.5px solid currentColor; opacity: 0.22; } .rings li { position: relative; padding: 0 0 24px 38px; } .rings li:last-child { padding-bottom: 0; } .rings li::before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--spot, var(--leaf)); background: var(--paper); } .rings li::after { content: ""; position: absolute; left: 6px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--spot, var(--leaf)); } .rings .when { display: block; margin-bottom: 2px; } /* ---------------- vitals ---------------- */ .vital { justify-content: center; } .vital .n { font-family: var(--f-mono); font-size: clamp(1.3rem, 2.4vw, 1.8rem); display: block; } /* ---------------- colophon: the night panel ---------------- */ .colophon { position: relative; border: 0; border-radius: calc(var(--gutter) * 0.9); background: var(--ink); color: var(--paper); padding: clamp(34px, 6vw, 64px) clamp(24px, 5vw, 60px); overflow: hidden; margin-top: calc(var(--gutter) * 1.5); } .colophon .halftone { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: clamp(150px, 22vw, 300px); pointer-events: none; } .colophon .big { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 3.1rem); line-height: 1.12; max-width: 16ch; position: relative; z-index: 1; } .colophon .row { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 36px; flex-wrap: wrap; position: relative; z-index: 1; } .colophon .caption { color: var(--paper-soft); } /* the printer's proof: five spot swatches, quietly */ .proof { display: inline-flex; gap: 5px; } .proof i { width: 14px; height: 14px; border-radius: 50%; border: 0; } /* ---------------- draw-on-scroll: scenes ink themselves in ------ rw.js staggers --di per stroke and adds .drawn on intersection. Elements with class="dot" fade in instead of drawing. */ svg[data-draw] path:not(.dot), svg[data-draw] circle:not(.dot) { stroke-dasharray: 1; stroke-dashoffset: 1; } svg[data-draw].drawn path:not(.dot), svg[data-draw].drawn circle:not(.dot) { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease); transition-delay: calc(var(--di, 0) * 130ms); } svg[data-draw] .dot { opacity: 0; } svg[data-draw].drawn .dot { opacity: 1; transition: opacity 0.6s var(--ease); transition-delay: calc(var(--di, 0) * 130ms); } /* ---------------- ambient life: named quiet loops --------------- drift (cloud dots), breathe (the sun), flicker (a small flame or a lit window), stroll (the companion's walk cycle, rw.js). Slow, subtle, and stilled by reduced motion. */ .drift { animation: drift 80s ease-in-out infinite alternate; } @keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } } .breathe { animation: breathe 9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .flicker { animation: flicker 2.6s ease-in-out infinite; } @keyframes flicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.5; } 60% { opacity: 0.85; } 78% { opacity: 0.6; } } /* ---------------- the companion: the inhabitant walks with you -- Injected by rw.js into every page — a small figure in the far-left scroll rail, outside the text. He travels from the top of the viewport to the bottom with page progress, strolls while you scroll, turns when you scroll back up, and rests at the end. */ .companion { position: fixed; left: 2px; top: calc(42px + var(--companion-step, 0) * (100vh - 84px)); width: 34px; height: 48px; z-index: 6; color: var(--ink); transform: translateY(-50%); transition: transform 0.25s var(--ease), top 0.12s linear; } .companion svg { width: 100%; height: 100%; display: block; overflow: visible; } .companion.summoned { transform: none; transition: none; } .companion.summoned.walking, .companion.summoned.walking.uphill { transform: rotate(2deg); } .companion-summon { appearance: none; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .companion-summon:focus-visible { outline: 2px solid var(--spot, var(--clay)); outline-offset: 3px; border-radius: var(--wobble); } .companion-talk { position: absolute; left: calc(100% + 8px); top: 0; width: min(310px, calc(100vw - 52px)); padding: 14px; background: var(--paper); border: var(--rule-touch); border-radius: var(--wobble); box-shadow: 4px 5px 0 color-mix(in srgb, var(--spot, var(--clay)) 14%, transparent); } .companion-answer { margin: 0 0 10px; font-style: italic; font-size: 0.9rem; line-height: 1.35; } .companion-form label { display: block; margin-bottom: 5px; font-family: var(--f-mono); font-size: 0.65rem; text-transform: lowercase; } .companion-form div { display: flex; gap: 6px; } .companion-form input { min-width: 0; flex: 1; padding: 8px 9px; color: var(--ink); background: transparent; border: var(--rule-touch); border-radius: 9px 11px 8px 10px; font: 0.82rem var(--f-body); } .companion-form button { padding: 7px 10px; color: var(--paper); background: var(--ink); border: var(--rule-touch); border-radius: 10px 8px 11px 9px; font: 600 0.8rem var(--f-body); cursor: pointer; } .companion-form input:disabled, .companion-form button:disabled { cursor: wait; opacity: 0.55; } .companion-form input:focus-visible, .companion-form button:focus-visible { outline: 2px solid var(--spot, var(--clay)); outline-offset: 2px; } .companion .flip { transform-origin: 50% 50%; transition: transform 0.3s var(--ease); } .companion.uphill .flip { transform: scaleX(-1); } .companion .sit { display: none; } .companion.resting .sit { display: block; } .companion.resting .stand { display: none; } .companion .leg-l, .companion .leg-r, .companion .arm-l, .companion .arm-r { transform-box: fill-box; transform-origin: top center; } .companion.walking { transform: translateY(-50%) rotate(2deg); } .companion.walking.uphill { transform: translateY(-50%) rotate(-2deg); } .companion.walking .body-bob { animation: stroll-bob var(--walk-speed, 0.5s) steps(2, jump-none) infinite; } .companion.walking .leg-l { animation: stroll var(--walk-speed, 0.5s) ease-in-out infinite; } .companion.walking .leg-r { animation: stroll var(--walk-speed, 0.5s) ease-in-out infinite reverse; } .companion.walking .arm-l { animation: stroll-arm var(--walk-speed, 0.5s) ease-in-out infinite reverse; } .companion.walking .arm-r { animation: stroll-arm var(--walk-speed, 0.5s) ease-in-out infinite; } @keyframes stroll { 0%, 100% { transform: rotate(18deg) translateY(0); } 50% { transform: rotate(-18deg) translateY(-1px); } } @keyframes stroll-arm { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-16deg); } } @keyframes stroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.2px); } } /* hello: one finite wave on arrival */ .companion.hello .arm-r { animation: hello-wave 0.55s ease-in-out 3; transform-origin: top center; } @keyframes hello-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-58deg); } } @media (max-width: 760px) { .sheet { padding-left: 38px; } .companion { left: 0; width: 28px; height: 40px; } } /* theme-scene: two small fixed corner drawings, one per matching theme, that read --scroll (rw.js) instead of looping — a quiet sign of how far into the issue you are. Symbolic line drawings, pathLength="1" throughout. Reduced motion holds them complete. */ .theme-scene { display: none; position: fixed; pointer-events: none; z-index: 5; color: var(--ink); } .theme-scene.sprout { left: 60px; bottom: 8px; width: 46px; height: 60px; stroke: var(--leaf); } html:not([data-theme]) .theme-scene.curl { display: block; } [data-theme="evergreen"] .theme-scene.sprout { display: block; } .theme-scene path, .theme-scene circle { stroke-dasharray: 1; } .theme-scene.sprout path, .theme-scene.sprout circle { stroke-dashoffset: calc(1 - var(--scroll, 0)); } .theme-scene.sprout .leaf-a { stroke-dashoffset: calc(1 - clamp(0, (var(--scroll, 0) - 0.15) * 3, 1)); } .theme-scene.sprout .leaf-b { stroke-dashoffset: calc(1 - clamp(0, (var(--scroll, 0) - 0.32) * 3, 1)); } .theme-scene.sprout .bud { stroke-dashoffset: calc(1 - clamp(0, (var(--scroll, 0) - 0.58) * 3, 1)); } .theme-scene.curl { top: 0; right: 0; width: 52px; height: 52px; opacity: 0.8; } .theme-scene.curl .fold { stroke-dashoffset: calc(1 - var(--scroll, 0)); } .theme-scene.curl .corner { transform-origin: 100% 0%; transform: rotate(calc((1 - var(--scroll, 0)) * 22deg)); } @media (max-width: 560px) { .theme-scene { display: none !important; } } /* ---------------- motion: sections settle in; ink bursts ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--pd, 0ms); } .reveal.in { opacity: 1; transform: none; } .ink-burst { position: fixed; pointer-events: none; z-index: 999; width: 44px; height: 44px; transform: translate(-50%, -50%); color: var(--ink); } .ink-burst svg { width: 100%; height: 100%; overflow: visible; } .ink-burst line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; } .ink-burst { animation: burst 0.5s var(--ease) forwards; } @keyframes burst { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } } /* ---------------- calm for those who ask ---------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } [data-kinetic] .w { opacity: 1; transform: none; transition: none; } .circled svg path { stroke-dashoffset: 0; transition: none; } .halftone.animate circle { animation: none; transform: none; } .status[data-stage="in-bloom"]::before { animation: none; } .ink-burst { display: none; } svg[data-draw] path:not(.dot), svg[data-draw] circle:not(.dot) { stroke-dashoffset: 0; transition: none; } svg[data-draw] .dot { opacity: 1; transition: none; } .drift, .breathe, .flicker { animation: none; } .panel, .btn, .sound-toggle, .theme-toggle { transition: none; } .theme-scene.curl .corner { transform: rotate(0deg); } .companion .leg-l, .companion .leg-r, .companion .arm-l, .companion .arm-r, .companion.walking .body-bob, .companion.hello .arm-r { animation: none !important; } .companion .flip { transition: none; } .companion { top: calc(100vh - 42px); transform: translateY(-50%); transition: none; } }