/* Grandpa's Jars of Rain: an invented picture book, demo. Cut paper, risograph ink, a monsoon sky.
   Day is a summer afternoon on cream paper; night is the storm after dark, the jars lit. No em-dashes. */

:root {
  --paper: #F6EEDC;
  --paper-2: #EFE2C4;
  --ink: #2A2233;
  --ink-soft: #463B49;
  --indigo: #3B3F8C;
  --terra: #A2461F;
  --terra-hi: #D2693C;
  --sun: #F2C14E;
  --sage: #4F7A4A;
  --rain: #6FA8DC;
  --pink: #E86A92;
  --card: #FBF5E6;
  --shadow: rgba(42, 34, 51, .22);
  --theme-bar: #F6EEDC;
  --display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --hand: "Caveat Brush", "Comic Sans MS", cursive;
  --body: "Literata", Georgia, serif;
  color-scheme: light;
}
html[data-time="night"] {
  --paper: #1C1E3F;
  --paper-2: #242757;
  --ink: #F4ECDA;
  --ink-soft: #C7BFD6;
  --indigo: #9EA6FF;
  --terra: #F08A5D;
  --terra-hi: #F6A27A;
  --sun: #F7CF6B;
  --sage: #8DBF86;
  --rain: #8EC5FF;
  --pink: #FF8FB4;
  --card: #262A5C;
  --shadow: rgba(0, 0, 0, .45);
  --theme-bar: #1C1E3F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.7 var(--body);
  transition: background-color .8s ease, color .8s ease;
}
main { overflow-x: clip; position: relative; z-index: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px dashed var(--terra); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

/* Paper grain over everything, like a risograph print */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: url("../img/grain.svg"); background-size: 240px;
  mix-blend-mode: multiply; opacity: .35;
}
html[data-time="night"] body::after { mix-blend-mode: screen; opacity: .12; }

/* The sky behind the page: drawn by sky.js, changes with the story */
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.demo-bar { position: relative; z-index: 2; font: 500 .8rem/1.4 var(--body); text-align: center; padding: .4rem 1rem; background: var(--ink); color: var(--paper); }

/* Header: a strip of torn paper */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 96% 88%, 91% 80%, 85% 92%, 78% 84%, 71% 95%, 63% 85%, 55% 93%, 47% 82%, 40% 94%, 32% 84%, 24% 92%, 17% 81%, 9% 93%, 4% 84%, 0 92%);
  transition: background-color .8s ease;
}
.logo { font: 400 1.3rem/1 var(--display); text-decoration: none; letter-spacing: .01em; }
.logo span { color: var(--terra); }
.top nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem); }
.top nav a { font: 400 1.25rem/1 var(--hand); text-decoration: none; color: var(--ink-soft); }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline wavy var(--terra) 2px; text-underline-offset: 6px; }
.dn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ink);
}
html[data-time="night"] .dn { background: var(--indigo); color: #1C1E3F; }
.dn svg { width: 1.2rem; height: 1.2rem; }
.dn .moon { display: none; }
html[data-time="night"] .dn .sun { display: none; }
html[data-time="night"] .dn .moon { display: block; }
.top nav a { white-space: nowrap; }
@media (max-width: 640px) { .top nav a.long { display: none; } .logo { font-size: 1.05rem; } }
@media (max-width: 480px) { .top nav a[href="index.html"] { display: none; } .logo { font-size: .98rem; max-width: 11rem; line-height: 1.05; } }

/* Riso ink: the second colour printed a hair off */
.riso { text-shadow: .045em .035em 0 var(--pink); }
html[data-time="night"] .riso { text-shadow: .045em .035em 0 rgba(255, 143, 180, .55); }

/* Buttons: stamped paper */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.35rem;
  font: 400 1.05rem/1 var(--display); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--sun); border: 2.5px solid var(--ink); border-radius: 4px 10px 6px 12px;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: rotate(0) translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.alt { background: var(--card); transform: rotate(1deg); }
.btn.rain { background: var(--rain); }
html[data-time="night"] .btn { color: #1C1E3F; border-color: #F4ECDA; box-shadow: 4px 4px 0 #F4ECDA; }
html[data-time="night"] .btn.alt { background: var(--card); color: var(--ink); }

/* Torn paper: edges cut by tear.js */
.torn { position: relative; filter: drop-shadow(5px 7px 0 var(--shadow)); }
.torn > img, .torn > .face, .torn > video { clip-path: var(--tear, none); }
.tape {
  position: absolute; width: 6.5rem; height: 1.7rem; z-index: 3;
  background: rgba(242, 193, 78, .65); mix-blend-mode: multiply;
  clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%);
}
html[data-time="night"] .tape { mix-blend-mode: normal; background: rgba(247, 207, 107, .5); }

/* Hand labels */
.hand { font-family: var(--hand); }
.kicker { font: 400 1.6rem/1.1 var(--hand); color: var(--terra); margin: 0 0 .4rem; transform: rotate(-2deg); display: inline-block; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0 0 1rem; letter-spacing: .005em; }
h2 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1rem; }
.soft { color: var(--ink-soft); }

section { position: relative; padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 2.5rem); }
.wrap { max-width: 72rem; margin: 0 auto; }

/* Opening */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; max-width: 76rem; margin: 0 auto; padding-top: clamp(1.5rem, 5vw, 4.5rem); }
.title { font-size: clamp(3.4rem, 9.5vw, 7.6rem); line-height: .9; margin: 0 0 1.2rem; }
.title .l1 { display: block; transform: rotate(-3deg); transform-origin: left; }
.title .l2 { display: block; color: var(--indigo); margin-left: .35em; transform: rotate(1.5deg); }
.title .l3 { display: block; color: var(--terra); transform: rotate(-1deg); }
.byline { font: 400 1.6rem/1.2 var(--hand); margin: 0 0 1.3rem; }
.byline b { font-weight: 400; color: var(--indigo); }
.lede { font-size: 1.15rem; max-width: 33rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1.1rem; }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 1.2rem/1.2 var(--hand); color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.facts li::before { content: "\2022  "; color: var(--terra); }
.cover-wrap { position: relative; justify-self: center; width: min(26rem, 88vw); transform: rotate(2.5deg); }
.cover-wrap .tape.a { top: -.7rem; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.cover-wrap .sticker {
  position: absolute; right: -1.2rem; bottom: 12%; z-index: 4; width: 7rem; height: 7rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: .6rem;
  background: var(--terra); color: #FFF6E6; border: 2.5px solid var(--ink);
  font: 400 1.15rem/1.05 var(--hand); transform: rotate(12deg); box-shadow: 3px 3px 0 var(--ink);
}
/* 2026-11-08: taller and wider so the whole cloud stays inside while it bobs and the saguaro spins; pan-y keeps the
   page scrolling under a thumb while a sideways drag turns the model. */
#saguaro3d { position: absolute; left: -36%; bottom: -14%; width: 56%; aspect-ratio: 3 / 4.7; z-index: 5; pointer-events: auto; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .8s; }
#saguaro3d.ready { opacity: 1; }
#saguaro3d.grabbing { cursor: grabbing; }
#saguaro3d:focus-visible { outline: 3px dashed var(--terra); outline-offset: 2px; border-radius: 1rem; }
#saguaro3d canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .cover-wrap { order: -1; width: min(17rem, 70vw); margin-top: .5rem; }
  /* 2026-11-08: the round 4 phone film showed it a third off screen and small; now whole and larger. */
  #saguaro3d { left: -22%; width: 58%; bottom: -12%; }
  .cover-wrap .sticker { width: 5.4rem; height: 5.4rem; font-size: .95rem; right: -.8rem; }
}

/* Peek inside: the four spreads */
.peek-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.spreads { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.spread { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
.spread:nth-child(even) { grid-template-columns: 1fr 1.5fr; }
.spread:nth-child(even) .art { order: 2; }
.spread .art { position: relative; }
.spread .art .tape { top: -.8rem; left: 12%; transform: rotate(-6deg); }
.spread .words { font: 400 clamp(1.25rem, 2.1vw, 1.55rem)/1.55 var(--body); }
.spread .words .page { display: block; font: 400 1.55rem/1 var(--hand); color: var(--terra); margin-bottom: .6rem; }
.spread .words .loud { font-family: var(--display); color: var(--indigo); letter-spacing: .03em; }
html[data-time="night"] .spread.storm .words .loud { color: var(--rain); }
@media (max-width: 860px) {
  .spread, .spread:nth-child(even) { grid-template-columns: 1fr; }
  .spread:nth-child(even) .art { order: 0; }
}

/* Grandpa's shelf, in 3D */
.shelf-sec { background: linear-gradient(transparent, color-mix(in srgb, var(--paper-2) 85%, transparent) 12%, color-mix(in srgb, var(--paper-2) 85%, transparent) 88%, transparent); }
.shelf-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2rem; align-items: center; }
#shelf3d {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--ink); border-radius: 6px;
  background: #3a2418; box-shadow: 7px 7px 0 var(--ink); overflow: hidden; touch-action: pan-y;
}
#shelf3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: pointer; }
#shelf3d .loading { position: absolute; inset: 0; display: grid; place-items: center; color: #F6EEDC; font: 400 1.4rem/1 var(--hand); }
.tag-card {
  position: relative; background: var(--card); border: 2.5px solid var(--ink); padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 4px 14px 4px 4px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-1.5deg); min-height: 15rem;
}
.tag-card::before { content: ""; position: absolute; top: 1rem; right: 1rem; width: .9rem; height: .9rem; border-radius: 50%; border: 2.5px solid var(--ink); }
.tag-card .year { font: 400 3.2rem/1 var(--display); color: var(--indigo); margin: 0 0 .5rem; }
.tag-card .note { font: 400 1.5rem/1.3 var(--hand); margin: 0 0 1rem; }
.tag-card .hint { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.tag-card .lesson { font: 400 1.25rem/1.3 var(--hand); color: var(--terra); margin: -.3rem 0 1rem; padding-left: .9rem; border-left: 3px solid var(--terra); }
.tag-card .lesson::before { content: "What this rain taught him: "; display: block; font: 600 .78rem/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.tag-card .opened { font-size: .85rem; font-weight: 600; color: var(--indigo); margin: 0 0 .8rem; }
.tag-card [hidden] { display: none; }
.shelf-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
@media (max-width: 860px) { .shelf-grid { grid-template-columns: 1fr; } #shelf3d { aspect-ratio: 1 / 1; } }
/* 2026-11-08, from the round 4 phone film: the heading sat between the shelf and its card, so a tapped jar's story
   landed below the screen. On a phone the heading now leads and the card sits right under the shelf. */
@media (max-width: 860px) {
  .shelf-grid { gap: 0; }
  .shelf-grid > .lay:not(#shelf3d) { display: contents; }
  .shelf-grid .tier-tags, .shelf-grid .kicker, .shelf-grid #shelf-h { order: -1; }
  .shelf-grid #shelf-h { margin-bottom: 1rem; }
  #shelf3d { margin-bottom: 1.4rem; }
}

/* Praise: paper slips */
.slips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.slip { background: var(--card); padding: 1.5rem; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.slip:nth-child(1) { transform: rotate(-1.5deg); }
.slip:nth-child(2) { transform: rotate(1deg) translateY(.6rem); }
.slip:nth-child(3) { transform: rotate(-.5deg); }
.slip blockquote { margin: 0 0 .8rem; font: 400 1.5rem/1.3 var(--hand); }
.slip figcaption { font-size: .9rem; color: var(--ink-soft); }
.sample { display: inline-block; font: 600 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: .3rem .5rem; border: 1.5px dashed currentColor; border-radius: 3px; color: var(--ink-soft); }
@media (max-width: 860px) { .slips { grid-template-columns: 1fr; } }

/* Find a copy */
.copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0; }
.format { border: 2.5px solid var(--ink); background: var(--card); padding: 1rem; text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.format b { display: block; font: 400 1.2rem/1.1 var(--display); }
.format span { font: 400 1.4rem/1 var(--hand); color: var(--terra); }
.where { display: flex; flex-wrap: wrap; gap: .8rem; }
.copy-art { position: relative; transform: rotate(-2deg); max-width: 22rem; justify-self: center; }
@media (max-width: 860px) { .copy { grid-template-columns: 1fr; } .formats { grid-template-columns: 1fr 1fr 1fr; } }

/* Author pages */
.author-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 72rem; margin: 0 auto; }
.portrait { position: relative; transform: rotate(-2.5deg); max-width: 24rem; justify-self: center; }
.portrait .tape { top: -.8rem; right: 14%; transform: rotate(8deg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; counter-reset: s; }
.step { position: relative; background: var(--card); border: 2.5px solid var(--ink); padding: 1.3rem 1.2rem; box-shadow: 4px 4px 0 var(--ink); }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: -1.1rem; left: -.7rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--terra); color: #FFF6E6; font: 400 1.2rem/1 var(--display); border: 2.5px solid var(--ink); }
.step h3 { font-size: 1.25rem; margin-top: .4rem; }
.step p { font-size: .98rem; margin: 0; color: var(--ink-soft); }
.events { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.events li { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--card); border: 2px solid var(--ink); }
.events .date { font: 400 1.6rem/1 var(--hand); color: var(--terra); }
.events .what b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.events .what span { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 860px) { .author-hero { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; } .events li { grid-template-columns: 4.5rem 1fr; } .events li .btn { grid-column: 1 / -1; justify-self: start; } }

/* Forms (demo: nothing is sent) */
.form { display: grid; gap: .9rem; max-width: 32rem; }
.form label { display: grid; gap: .3rem; font: 400 1.25rem/1.1 var(--hand); }
.form input, .form select, .form textarea {
  font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 4px; padding: .7rem .8rem;
}
.form textarea { min-height: 6rem; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-note { font-size: .9rem; color: var(--ink-soft); }
.thanks { display: none; font: 400 1.5rem/1.3 var(--hand); color: var(--sage); }
.form.sent .thanks { display: block; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

/* Grown-ups page */
.guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.guide article { background: var(--card); border: 2.5px solid var(--ink); padding: 1.5rem; box-shadow: 4px 4px 0 var(--ink); }
.guide ol, .guide ul { margin: 0; padding-left: 1.2rem; }
.guide li { margin-bottom: .5rem; }
.gauge { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.coloring {
  background: #fff; color: #222; border: 2.5px solid var(--ink); padding: 1.5rem; box-shadow: 6px 6px 0 var(--ink);
  max-width: 26rem; justify-self: center; transform: rotate(1.5deg);
}
.coloring svg { width: 100%; height: auto; }
.coloring p { font: 400 1.3rem/1.1 var(--hand); text-align: center; margin: .5rem 0 0; }
@media (max-width: 860px) { .guide, .gauge { grid-template-columns: 1fr; } }

/* Footer: the desert at the bottom of the page */
.foot { position: relative; z-index: 1; padding: 5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; background: var(--ink); color: #F6EEDC; margin-top: 4rem; }
.foot .logo span { color: #F08A5D; }
html[data-time="night"] .cover-wrap .sticker, html[data-time="night"] .step::before { color: #1C1E3F; }
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.5rem; background: var(--ink);
  clip-path: polygon(0 100%, 0 60%, 6% 40%, 12% 62%, 20% 30%, 27% 55%, 35% 38%, 44% 64%, 52% 25%, 60% 52%, 68% 35%, 77% 60%, 85% 28%, 92% 50%, 100% 35%, 100% 100%);
}
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.foot .logo { font-size: 1.6rem; }
.foot p { margin: .3rem 0; font-size: .92rem; opacity: .85; }
.foot a { color: inherit; }
.foot .made a { color: var(--sun); }
html[data-time="night"] .foot { background: #0F1029; }
html[data-time="night"] .foot::before { background: #0F1029; }

/* ===== Version 2, 2026-11-07: motion, glow, the swipe book, the game ===== */
:root { --glow-a: rgba(242, 193, 78, .6); --glow-b: rgba(232, 106, 146, .28); --d-cloud: #FFFFFF; --d-sag: #8FB48A; --d-sun: #F2C14E; --d-drop: #8EBCE6; }
html[data-time="night"] { --glow-a: rgba(142, 197, 255, .55); --glow-b: rgba(255, 143, 180, .3); --d-cloud: #3A3F86; --d-sag: #4D7A55; --d-sun: #B98F3A; --d-drop: #4F78B5; }

/* Headings glow and breathe, like ink still wet */
h1.riso, h2.riso, .title { animation: glow 5s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { text-shadow: .045em .035em 0 var(--pink), 0 0 .3em var(--glow-a), 0 0 .9em var(--glow-b); }
  50% { text-shadow: .06em .045em 0 var(--pink), 0 0 .55em var(--glow-a), 0 0 1.5em var(--glow-b); }
}
html[data-time="night"] h1.riso, html[data-time="night"] h2.riso, html[data-time="night"] .title { animation-name: glown; }
@keyframes glown {
  0%, 100% { text-shadow: .045em .035em 0 rgba(255, 143, 180, .55), 0 0 .3em var(--glow-a), 0 0 .9em var(--glow-b); }
  50% { text-shadow: .06em .045em 0 rgba(255, 143, 180, .55), 0 0 .6em var(--glow-a), 0 0 1.6em var(--glow-b); }
}
.kicker { animation: sway 4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(-.5deg) translateY(-2px); } }

/* The title: every letter a scrap of paper that drops in, then bobs */
.title .ch { display: inline-block; animation: drop .9s cubic-bezier(.2, .9, .3, 1.35) both, bob 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms), calc(1.2s + var(--i) * 110ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-1.1em) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.05em) rotate(-2.5deg); } }

/* A warm sun behind the cover */
.cover-wrap::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--glow-a), transparent 62%); animation: halo 6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.cover-wrap .sticker { animation: wobble 5s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(4deg) scale(1.05); } }
.torn > .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.moving > .clip { opacity: 1; }

/* Buttons glow; the rain button pulses like it wants pressing */
.btn:hover { box-shadow: 6px 6px 0 var(--ink), 0 0 1.4rem var(--glow-a); }
.btn.rain { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(111, 168, 220, .75); } 80%, 100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 1.1rem rgba(111, 168, 220, 0); } }
html[data-time="night"] .btn.rain { animation-name: pulsen; }
@keyframes pulsen { 0% { box-shadow: 4px 4px 0 #F4ECDA, 0 0 0 0 rgba(142, 197, 255, .75); } 80%, 100% { box-shadow: 4px 4px 0 #F4ECDA, 0 0 0 1.1rem rgba(142, 197, 255, 0); } }

/* Torn edges in motion: the header, the shelf's paper band and the desert at the foot */
.top { animation: ripHead 3.8s ease-in-out infinite alternate; }
@keyframes ripHead {
  from { clip-path: polygon(0 0, 100% 0, 100% 78%, 96% 88%, 91% 80%, 85% 92%, 78% 84%, 71% 95%, 63% 85%, 55% 93%, 47% 82%, 40% 94%, 32% 84%, 24% 92%, 17% 81%, 9% 93%, 4% 84%, 0 92%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 86%, 96% 79%, 91% 91%, 85% 81%, 78% 93%, 71% 83%, 63% 94%, 55% 82%, 47% 92%, 40% 83%, 32% 94%, 24% 81%, 17% 92%, 9% 82%, 4% 92%, 0 83%); }
}
.shelf-sec { background: color-mix(in srgb, var(--paper-2) 92%, transparent); margin: 3.5rem 0; }
.shelf-sec::before, .shelf-sec::after { content: ""; position: absolute; left: 0; right: 0; height: 2.6rem; background: color-mix(in srgb, var(--paper-2) 92%, transparent); animation: 4.2s ease-in-out infinite alternate; }
.shelf-sec::before { top: -2.55rem; animation-name: ripTop; }
.shelf-sec::after { bottom: -2.55rem; animation-name: ripBot; animation-duration: 5s; }
@keyframes ripTop {
  from { clip-path: polygon(0 100%, 0 55%, 5% 30%, 11% 62%, 17% 24%, 24% 58%, 31% 34%, 38% 66%, 45% 27%, 52% 57%, 59% 30%, 66% 63%, 73% 32%, 80% 60%, 87% 25%, 94% 56%, 100% 34%, 100% 100%); }
  to { clip-path: polygon(0 100%, 0 35%, 5% 60%, 11% 28%, 17% 58%, 24% 26%, 31% 62%, 38% 30%, 45% 64%, 52% 28%, 59% 60%, 66% 30%, 73% 62%, 80% 26%, 87% 58%, 94% 30%, 100% 56%, 100% 100%); }
}
@keyframes ripBot {
  from { clip-path: polygon(0 0, 100% 0, 100% 50%, 94% 72%, 87% 40%, 80% 75%, 73% 42%, 66% 70%, 59% 38%, 52% 74%, 45% 44%, 38% 72%, 31% 40%, 24% 76%, 17% 44%, 11% 70%, 5% 42%, 0 66%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 44%, 87% 74%, 80% 40%, 73% 72%, 66% 42%, 59% 74%, 52% 40%, 45% 70%, 38% 44%, 31% 74%, 24% 42%, 17% 72%, 11% 40%, 5% 70%, 0 44%); }
}
.foot::before { animation: ripFoot 4.6s ease-in-out infinite alternate; }
@keyframes ripFoot {
  from { clip-path: polygon(0 100%, 0 60%, 6% 40%, 12% 62%, 20% 30%, 27% 55%, 35% 38%, 44% 64%, 52% 25%, 60% 52%, 68% 35%, 77% 60%, 85% 28%, 92% 50%, 100% 35%, 100% 100%); }
  to { clip-path: polygon(0 100%, 0 40%, 6% 62%, 12% 36%, 20% 58%, 27% 30%, 35% 60%, 44% 34%, 52% 56%, 60% 28%, 68% 58%, 77% 32%, 85% 56%, 92% 30%, 100% 55%, 100% 100%); }
}

/* Cut paper drifting behind the page (paper.js) */
.drift { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.drift svg { position: absolute; left: 0; top: 0; height: auto; will-change: transform; filter: drop-shadow(5px 4px 0 rgba(232, 106, 146, .3)); }
.drift .d-cloud { fill: var(--d-cloud); opacity: .75; }
.drift .d-saguaro { fill: var(--d-sag); opacity: .45; }
.drift .d-sun { fill: var(--d-sun); opacity: .5; }
.drift .d-drop { fill: var(--d-drop); opacity: .5; }

/* The book: swipe, drag or arrow through the spreads */
.book { position: relative; margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)); }
.book-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 1.5rem 0; cursor: grab; outline-offset: -6px; }
.book-track::-webkit-scrollbar { display: none; }
.book-track.drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.book-track img { -webkit-user-drag: none; user-select: none; }
.book .spread { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 clamp(1.25rem, 6vw, 5rem);
  transform: perspective(1500px) rotateY(calc(var(--d, 0) * -22deg)) scale(calc(1 - var(--ad, 0) * .12)); opacity: calc(1 - var(--ad, 0) * .6); }
.book-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.turn { width: 3.3rem; height: 3.3rem; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sun); color: #2A2233; box-shadow: 3px 3px 0 var(--ink); font: 400 1.5rem/1 var(--display); cursor: pointer; transition: transform .15s; }
.turn:hover:not(:disabled) { transform: scale(1.08) rotate(-4deg); box-shadow: 3px 3px 0 var(--ink), 0 0 1rem var(--glow-a); }
.turn:disabled { opacity: .35; cursor: default; }
html[data-time="night"] .turn { color: #1C1E3F; }
.dots { display: flex; }
.dots button { width: 1.9rem; height: 2.4rem; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.dots button::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--ink); transition: transform .3s, background .3s; }
.dots button[aria-current="true"]::before { background: var(--terra); transform: scale(1.4); }
.book-hint { text-align: center; font: 400 1.35rem/1 var(--hand); color: var(--ink-soft); margin: .6rem 0 0; }
/* the words read in as a page opens */
.spread .w { display: inline-block; opacity: .15; transform: translateY(.35em); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.4); transition-delay: calc(var(--i) * 55ms); }
.spread.read .w { opacity: 1; transform: none; }
.spread.read .loud .w { animation: boing .9s calc(var(--i) * 55ms + .25s) both; }
@keyframes boing { 0% { transform: translateY(.35em) scale(.6); } 60% { transform: translateY(-.18em) scale(1.25) rotate(-4deg); } 100% { transform: none; } }

/* Swipe rows on a phone; a grid on a desk */
.swipe-dots { display: none; }
@media (max-width: 760px) {
  [data-swipe] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 1rem; padding: 1.2rem 1.2rem 1.2rem .2rem; margin-right: calc(-1 * clamp(1rem, 4vw, 2.5rem)); }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > * { flex: 0 0 82%; scroll-snap-align: start; }
  .swipe-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .4rem; }
  .swipe-dots i { width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--ink); transition: background .3s, transform .3s; }
  .swipe-dots i.on { background: var(--terra); transform: scale(1.3); }
}

/* Sound */
.snd { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.snd svg { width: 1.2rem; height: 1.2rem; }
.snd .on { display: none; }
.snd[aria-pressed="true"] { background: var(--rain); color: #1C1E3F; }
.snd[aria-pressed="true"] .on { display: block; }
.snd[aria-pressed="true"] .off { display: none; }

/* Our mark in the footer */
.foot .made { line-height: 2.2; }
.ftv { display: inline-block; vertical-align: middle; margin-left: .45rem; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%; animation: ftv 4.5s ease-in-out infinite; filter: drop-shadow(0 0 .45rem rgba(242, 193, 78, .6)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.ftv img { width: 100%; height: 100%; }
.ftv:hover, .ftv:focus-visible { transform: scale(1.15) rotate(-10deg); }
@keyframes ftv { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Catch the rain (game.js) */
.game { position: fixed; inset: 0; z-index: 80; touch-action: none; background: rgba(28, 30, 63, .38); transition: background .8s ease; }
.game[hidden] { display: none; }
.game.placing { background: transparent; pointer-events: none; }
.game-c { position: absolute; inset: 0; }
.game-hud { position: absolute; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%) rotate(-1deg); width: min(30rem, calc(100% - 2rem)); background: var(--card); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink), 0 0 2rem var(--glow-a); padding: .8rem 1rem; text-align: center; pointer-events: auto; }
.game-say { font: 400 1.45rem/1.15 var(--hand); margin: 0 0 .15rem; }
.game-count { font: 400 1.05rem/1 var(--display); color: var(--indigo); margin: 0 0 .5rem; }
.game-meter { height: .7rem; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; margin: 0 auto .7rem; max-width: 18rem; background: var(--paper); }
.game-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6FA8DC, #3D7FD1); transition: width .25s ease; }
.game-btns { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.game-btns [hidden] { display: none; }
.game-btns .btn { min-height: 2.75rem; padding: .55rem 1rem; font-size: .95rem; }
.game-jar { position: absolute; left: 0; top: 0; pointer-events: none; touch-action: none; }
.game.placing .game-jar { pointer-events: auto; cursor: grab; }

/* Phones: the three pages live in a torn paper tab bar at the bottom, always one tap away */
.tabbar { display: none; }
@media (max-width: 640px) {
  .top nav a { display: none !important; }
  .top .logo { font-size: 1.15rem !important; max-width: none !important; }
  .tabbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 1rem .5rem max(.55rem, env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -6px 18px var(--shadow);
    clip-path: polygon(0 14%, 7% 6%, 15% 13%, 24% 4%, 33% 12%, 42% 5%, 51% 13%, 60% 4%, 69% 12%, 78% 5%, 87% 13%, 94% 6%, 100% 12%, 100% 100%, 0 100%); }
  .tabbar a { display: grid; justify-items: center; gap: .15rem; padding: .3rem 0; text-decoration: none; color: var(--ink-soft); font: 400 1.15rem/1 var(--hand); }
  .tabbar svg { width: 1.5rem; height: 1.5rem; transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] svg { color: var(--terra); transform: translateY(-2px) rotate(-6deg) scale(1.12); filter: drop-shadow(0 0 .35rem var(--glow-a)); }
  .tabbar a:active svg { transform: scale(.9); }
  .foot { padding-bottom: 6.5rem; }
  html.gaming .tabbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .title .ch { opacity: 1; }
  .book .spread { transform: none; opacity: 1; }
  .spread .w { opacity: 1; transform: none; }
}

/* Reveal: pieces of paper laid down */
.lay { opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .3, 1.2); }
.lay.in { opacity: 1; transform: rotate(var(--r, 0deg)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lay { opacity: 1; transform: none; }
}

@media print {
  body * { visibility: hidden; }
  .coloring, .coloring * { visibility: visible; }
  .coloring { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; box-shadow: none; transform: none; }
  body::after, #sky { display: none; }
}

/* ---------- Read it to me (2026-11-07) ---------- */
.read-me { display: flex; align-items: center; gap: .55rem; margin: 1.1rem auto 0; background: var(--sun); color: #2A2233; }
.read-me svg { flex: none; }
.read-me[aria-pressed="true"] { background: var(--rain); color: #1C1E3F; box-shadow: 4px 4px 0 var(--ink), 0 0 1.6rem var(--glow-a); }
.read-me.wait .lbl { animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
.book.reading .spread.on .w { opacity: .5; transition: opacity .3s ease, color .3s ease, text-shadow .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1.4); transition-delay: 0s; animation: none; border-radius: .2em; }
.book.reading .spread.on .w.said { opacity: 1; }
.book.reading .spread.on .w.now { opacity: 1; color: var(--indigo); transform: translateY(-.14em) scale(1.08); text-shadow: 0 0 .55em var(--glow-a); background: linear-gradient(transparent 60%, rgba(242, 193, 78, .55) 60%); }
html[data-time="night"] .book.reading .spread.on .w.now { color: var(--rain); background: linear-gradient(transparent 60%, rgba(247, 207, 107, .3) 60%); }
@media (prefers-reduced-motion: reduce) { .book.reading .spread.on .w.now { transform: none; } }
/* ---------- Meet Marisol: out of the frame, and the sketch that draws itself (2026-11-07) ---------- */
.portrait.pop { margin-top: clamp(3.8rem, 21vw, 5.4rem); }
.pop .frame > img { display: block; width: 100%; height: auto; }
.pop .frame > img.wave { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s ease; }
.pop.arm-up .frame > img.wave { opacity: 1; }
.pop .her img { display: block; width: 100%; height: auto; }
/* the waving clip: colour above, see-through below, joined by WebGL; its box inside the cutout, from the keying */
.pop .her canvas { position: absolute; left: 5.75%; top: 9.56%; width: 93.4%; height: 90.44%; opacity: 0; transition: opacity .3s ease; }
.pop.waving .her canvas { opacity: 1; }
.pop.waving .her img { opacity: 0; }
.pop.waving .paint { opacity: 0; transition: opacity .3s ease; }
.pop[data-pop] { cursor: pointer; }
.pop .her { position: absolute; left: 0; top: -23.81%; width: 100%; aspect-ratio: 928 / 775; pointer-events: none;
  transform-origin: 50% 100%; transform: perspective(60em) rotateX(var(--lean, 0deg)) rotateY(var(--turn, 0deg)) translateZ(var(--z, 0px));
  filter: drop-shadow(0 .7rem .55rem rgba(42, 34, 51, .3)); will-change: transform; }
.pop .paint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pop .paint path { fill: none; stroke: var(--terra); stroke-width: 13; stroke-linecap: round; filter: url(#gouache);
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: paintout 7s ease-in-out infinite 1.2s; }
@keyframes paintout { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.studio .zoom { clip-path: var(--tear, none); overflow: hidden; }
.studio .zoom-in { position: relative; transform-origin: 64.9% 73%; transition: transform 3.6s cubic-bezier(.45, 0, .2, 1); }
.studio .zoom-in.close { transform: scale(1.7); }
.studio.narrow .zoom-in.close { transform: scale(2.3); }
.studio .zoom-in > img { display: block; width: 100%; height: auto; }
.studio .sheet { position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(52.77% 74.41%, 59.34% 75.59%, 65.43% 63.21%, 79.11% 66.27%, 71.2% 84.91%, 50.63% 79.48%); }
.studio .sheet canvas { position: absolute; left: 0; top: 0; width: 900px; height: 600px; transform-origin: 0 0; }
.studio.no-sketch .sheet { display: none; }
@media (prefers-reduced-motion: reduce) { .pop .paint path { animation: none; stroke-dashoffset: 0; } .studio .zoom-in { transition: none; } }
/* ---------- What this costs, and the tier tags (2026-11-07, DEMO_RUNBOOK 5b) ---------- */
.tier-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .55rem; }
.tier-tag { display: inline-block; font: 700 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: .38rem .7rem .34rem; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); transition: transform .15s; }
.tier-tag:hover { transform: translate(-1px, -1px) rotate(-2deg); }
.tier-tag.plus { background: var(--sun); color: #2A2233; }
.tier-tag.im { background: var(--indigo); color: #FFF6E6; }
html[data-time="night"] .tier-tag.im { color: #1C1E3F; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; background: var(--card); border: 2.5px solid var(--ink); padding: 1.4rem 1.3rem 1.2rem; box-shadow: 5px 5px 0 var(--ink); }
.tier:nth-child(2) { transform: rotate(.6deg); }
.tier:nth-child(3) { transform: rotate(-.6deg); box-shadow: 5px 5px 0 var(--ink), 0 0 1.8rem var(--glow-a); }
.tier h3 { font-size: 1.3rem; margin: 0; }
.tier .price { font: 400 2.1rem/1.1 var(--display); color: var(--terra); margin: .35rem 0 .8rem; }
.tier.im .price { font-size: 1.55rem; color: var(--indigo); }
html[data-time="night"] .tier.im .price { color: var(--rain); }
.tier ul { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .97rem; color: var(--ink-soft); display: grid; gap: .45rem; flex: 1; align-content: start; }
.tier-link { font: 400 1.35rem/1 var(--hand); color: var(--terra); text-decoration: underline; text-underline-offset: .2em; align-self: flex-start; }
@media (max-width: 760px) { .tier:nth-child(n) { transform: none; } }
/* ---------- The before (2026-11-07): the same demo as it was first built, a good site, to compare ---------- */
.demo-bar a { color: inherit; font-weight: 700; }
.before-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 2.2rem; }
.before-cta .soft { font-size: .95rem; max-width: 26rem; }
@media (max-width: 640px) { .tabbar { grid-template-columns: repeat(4, 1fr); } }
/* How a page gets made: each step acted out inside its own box (assets/js/steps.js, 2026-11-08). The art lives in
   the lower part of the card under the words, so the text keeps its contrast. */
.step[data-step] { isolation: isolate; padding-bottom: 8.6rem; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1.2), box-shadow .35s; --pencil: rgba(70, 62, 76, .62); }
.step[data-step]:focus-visible { outline: 3px dashed var(--terra); outline-offset: 4px; }
.step[data-step].on { transform: translate(-2px, -3px) rotate(-.4deg); box-shadow: 7px 8px 0 var(--ink); }
.step-art { position: absolute; left: 0; right: 0; bottom: 0; height: 8.2rem; overflow: hidden; z-index: -1; pointer-events: none; }
.step-art svg, .step-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.step-art::before { content: ""; position: absolute; left: 6%; right: 6%; top: .2rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.f-indigo { fill: var(--indigo); } .f-sage { fill: var(--sage); } .f-sun { fill: var(--sun); } .f-terra { fill: var(--terra); }
.f-pink { fill: var(--pink); } .f-rain { fill: var(--indigo); }
/* scribble */
.step-art.scribble canvas { opacity: 0; transition: opacity .5s; }
.step.on .step-art.scribble canvas { opacity: 1; transition-duration: .15s; }
/* paint */
.step-art.paint .bloom { transform: scale(0); opacity: .0; transition: transform .25s ease-in, opacity .25s; }
.step.on .step-art.paint .bloom { transform: scale(1); opacity: .78; transition: transform 1.25s cubic-bezier(.15,.9,.25,1) var(--d), opacity .5s var(--d); }
.step-art.paint .blot { mix-blend-mode: multiply; }
.step-art.paint .brush { fill: none; stroke: var(--terra); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; transition: stroke-dashoffset .3s; }
.step.on .step-art.paint .brush { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) 1s; }
/* tear */
.step-art.tear .piece { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform .4s ease-in, opacity .3s; }
.step.on .step-art.tear .piece { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.2,1.5,.35,1) var(--d), opacity .25s var(--d); }
.step-art.tear .back { fill: #FFFDF6; stroke: #FFFDF6; stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(1px 1.5px 0 rgba(42, 34, 51, .22)); }
/* print */
.step-art.print .ink { clip-path: inset(0 100% 0 0); transition: clip-path .3s; }
.step-art.print .blue { transform: translate(3.5px, -2.5px); mix-blend-mode: multiply; }
.step.on .step-art.print .pink { clip-path: inset(0 0 0 0); transition: clip-path 1.05s linear .1s; }
.step.on .step-art.print .blue { clip-path: inset(0 0 0 0); transition: clip-path 1.05s linear .55s; animation: wobble .5s 1.6s ease-out both; }
@keyframes wobble { 0% { transform: translate(6px, -4px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(3.5px, -2.5px); } }
.step-art.print .roller { position: absolute; top: 0; bottom: 0; width: 18%; left: -20%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 18%, transparent) 40%, color-mix(in srgb, var(--ink) 30%, transparent) 50%, transparent); border-radius: 40%; opacity: 0; }
.step.on .step-art.print .roller { animation: roll 1.6s cubic-bezier(.45,0,.55,1) .1s both; }
@keyframes roll { 0% { left: -20%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 104%; opacity: 0; } }
html[data-time="night"] .step[data-step] { --pencil: rgba(244, 236, 218, .6); }
html[data-time="night"] .step-art.paint .blot, html[data-time="night"] .step-art.print .blue { mix-blend-mode: screen; }
html[data-time="night"] .step-art.tear .back { fill: #D9D2E6; stroke: #D9D2E6; }
@media (prefers-reduced-motion: reduce) { .step[data-step], .step-art * { transition: none !important; animation: none !important; } }