/* MAGIC In Motion, site v2. Static layout (part 1). Motion hooks: see NOTES-W1a.md.
   Palette measured from the real cover (cover.svg / cover.jpg). Fonts: OFL, assets/fonts/. */

@font-face { font-family: "MIM Serif"; src: url("assets/fonts/serif-he.woff2") format("woff2"); font-weight: 250 500; font-display: swap; }
@font-face { font-family: "MIM Quote"; src: url("assets/fonts/quote-he.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "MIM Text"; src: url("assets/fonts/text-he-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MIM Text"; src: url("assets/fonts/text-he-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* v2 ground: a cooler, greyer evening paper than the cover board, so the real cover and pages sit on it
     as lighter objects; the ink leans from the cover brown toward the plum night. AA: soft on dusk 4.7:1. */
  --paper: #F2EFE9;      /* page ground (cover board is #F8F6ED, kept only inside the renders) */
  --paper-2: #E8E3DB;    /* FAQ ground, half way to dusk */
  --sheet: #FBFAF6;
  --ink: #58434A;        /* rules and marks: cover brown pulled toward plum */
  --title: #38292C;      /* headings, deep plum-brown */
  --text: #3D3033;
  --soft: #655759;
  --line: #D2CBC1;       /* line-art ink at 24% */
  --art: #BBA89D;        /* the drawing on screen, a touch stronger than print */
  --plum: #4E3C3F;       /* page edge in the photos */
  --dusk: #DAD5CC;       /* evening block tint */

  --serif: "MIM Serif", "Noto Serif Hebrew", "David Libre", serif;
  --quote: "MIM Quote", "Noto Sans Hebrew", "Arial Narrow", sans-serif;
  --sans: "MIM Text", "IBM Plex Sans Hebrew", "Noto Sans Hebrew", sans-serif;

  --pad: clamp(20px, 5vw, 88px);
  --gap: clamp(16px, 2vw, 32px);
  --body: clamp(17px, 0.92rem + 0.25vw, 18.5px);
  /* paper-real shadow: a hairline edge, a contact shadow, a soft long fall (plum-tinted, not grey) */
  --sheet-shadow: 0 0 0 .5px rgba(56, 41, 44, .14), 0 1px 1.5px rgba(56, 41, 44, .10), 0 6px 10px -6px rgba(56, 41, 44, .18), 0 28px 44px -26px rgba(56, 41, 44, .42);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 var(--body)/1.7 var(--sans);
  font-kerning: normal; text-rendering: optimizeLegibility;
}
img { display: block; width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3 { margin: 0; font-weight: 300; color: var(--title); }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.act { position: relative; padding: clamp(72px, 11vw, 160px) var(--pad); }
.kicker { font: 500 15px/1.4 var(--sans); letter-spacing: .02em; color: var(--soft); margin-bottom: 14px; }
.note { font: 500 17px/1.5 var(--sans); color: var(--soft); }

/* the print files as paper: a flat sheet at the true trim ratio (pages 18:23, cover board 17.7:23.8) */
.sheet { display: block; position: relative; aspect-ratio: 18 / 23; background: var(--sheet); box-shadow: var(--sheet-shadow); overflow: hidden; }
.sheet img { width: 100%; height: 100%; object-fit: cover; }
.sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .10), transparent 40%, rgba(56, 41, 44, .035)); }
.sheet-cover { aspect-ratio: 1041 / 1398; border-radius: 1px 3px 3px 1px; box-shadow: inset -1px 0 0 rgba(56, 41, 44, .10), 0 0 0 .5px rgba(56, 41, 44, .18), 0 2px 2px rgba(56, 41, 44, .12), 0 10px 16px -8px rgba(56, 41, 44, .24), 0 34px 50px -28px rgba(56, 41, 44, .5); }
/* an open spread, read right to left: page 56 on the right, 57 on the left, a soft fold where they meet */
.spread { display: grid; grid-template-columns: 1fr 1fr; direction: rtl; box-shadow: var(--sheet-shadow); }
.spread .sheet { box-shadow: none; }
.spread .sheet:first-child::after { background: linear-gradient(to left, transparent 82%, rgba(56, 41, 44, .05) 94%, rgba(56, 41, 44, .16)); }
.spread .sheet:last-child::after { background: linear-gradient(to right, transparent 82%, rgba(56, 41, 44, .06) 94%, rgba(56, 41, 44, .2)); }
/* two loose sheets of one day: 156 on top, 157 under it, offset down and to the left */
.loose { display: grid; grid-template-columns: 1fr; padding: 0 0 12% 18%; }
.loose .sheet { grid-area: 1 / 1; }
.loose .sheet:first-child { transform: translate(-22%, 12%); }

/* ---------- art groups: motion hooks (part 2 sets the vars) ---------- */
.art { overflow: visible; }
.art .paper { fill: var(--paper); }
.art-g {
  transform-box: fill-box; transform-origin: center;
  transform: translate(calc(var(--tx, 0) * 1px), calc(var(--ty, 0) * 1px)) rotate(calc(var(--rot, 0) * 1deg)) scale(var(--s, 1));
  opacity: var(--o, 1);
}
#art-rings, #art-moon { transform-box: view-box; transform-origin: 186.85px 132.9px; }
/* the thread star exists only with motion; the book's clouds rest at a section's top corner (inline end) */
.thread { display: none; }
main { overflow-x: clip; }
.drift { position: absolute; z-index: 0; height: auto; color: var(--art); fill: var(--paper); pointer-events: none; }
.drift-what { inset-block-start: clamp(56px, 7vw, 110px); inset-inline-end: calc(var(--pad) * .5); width: clamp(150px, 17vw, 270px); }
.drift-order { inset-block-start: clamp(28px, 4vw, 64px); inset-inline-end: calc(var(--pad) * .4); width: clamp(140px, 15vw, 240px); }
.lockup { color: var(--title); }
.lockup path { fill: currentColor; }
.lockup path[stroke] { stroke: currentColor; }

/* ---------- 1. opening ---------- */
.act-open { padding: 0; }
.open-stage {
  min-height: 100svh; padding: clamp(40px, 7vh, 96px) var(--pad) 0;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: center; overflow: clip;
}
.open-text { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 2; padding-bottom: 4vh; }
.lockup-open, .open-text .lockup { width: clamp(220px, 22vw, 360px); height: auto; margin-bottom: clamp(20px, 3.4vh, 40px); }
.open-title { font: 300 clamp(40px, 4.6vw, 76px)/1.04 var(--serif); letter-spacing: -.01em; margin-bottom: .4em; max-width: 11ch; }
.open-lede { font-size: clamp(18px, 1.3vw, 21px); max-width: 32ch; color: var(--text); }
.link-cta {
  display: inline-block; margin-top: 10px; font-weight: 500; color: var(--title);
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor;
}
.link-cta:hover { border-bottom-width: 2px; }
/* the real book and the order action, in the first screen */
.open-buy { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(18px, 3vh, 32px); }
.open-cover { flex: 0 0 clamp(84px, 7.4vw, 118px); }
.open-buy-text p { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--soft); }
.open-art { grid-column: 5 / 13; grid-row: 1; align-self: end; margin-inline-end: calc(var(--pad) * -0.6); }
.art-cover { width: 100%; max-width: 1020px; height: auto; color: var(--art); margin-inline-start: auto; transform: translateY(6%); }

/* ---------- 2. what it is ---------- */
.act-what {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(40px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.what-h { grid-column: 1 / 10; font: 300 clamp(30px, 3.5vw, 54px)/1.22 var(--serif); max-width: 24ch; }
.what-photo { grid-column: 8 / 13; grid-row: 2 / 4; margin: 0; align-self: start; }
.what-photo figcaption, .pg figcaption { font: 400 15px/1.4 var(--sans); color: var(--soft); margin-top: 12px; }
.what-quote { grid-column: 1 / 7; grid-row: 2; margin: 0; padding-inline-start: clamp(16px, 2vw, 28px); border-inline-start: 1px solid var(--ink); }
.what-quote p { font: 400 clamp(21px, 1.8vw, 27px)/1.5 var(--serif); color: var(--title); max-width: 30ch; }
.what-quote footer { font-size: 15px; color: var(--soft); }
.colophon { grid-column: 1 / 7; grid-row: 3; margin: 0; align-self: end; }
.colophon div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.colophon div:last-child { border-bottom: 1px solid var(--line); }
.colophon dt { font-weight: 500; color: var(--soft); }
.colophon dd { margin: 0; color: var(--title); }

/* ---------- 3. real pages ---------- */
.act-pages {
  background: var(--dusk);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
}
.pages-head { grid-column: 1 / 5; grid-row: 1; align-self: start; position: relative; z-index: 2; }
.pages-head h2 { font: 300 clamp(32px, 3.6vw, 56px)/1.1 var(--serif); margin-bottom: 18px; }
.pages-head p { max-width: 28ch; color: var(--soft); }
.pg { margin: 0; position: relative; align-self: start; }
.pg b { font-weight: 500; color: var(--title); margin-inline-end: 8px; }
.pg i { font: 400 15px/1 var(--serif); font-style: normal; color: var(--title); margin-inline-end: 10px; padding-inline-end: 10px; border-inline-end: 1px solid var(--ink); }
/* read in order: 1 day 28 open as a spread, large; 2 a later day as two loose sheets, under the heading */
.pg-a { grid-column: 5 / 13; grid-row: 1 / 3; }
.pg-b { grid-column: 1 / 5; grid-row: 2; margin-top: 4vw; }
.pg figcaption { margin-top: 20px; }

/* ---------- 4. one day, live ---------- */
.act-day { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 48px; }
.day-intro { grid-column: 1 / 7; }
.day-intro h2 { font: 300 clamp(32px, 3.6vw, 56px)/1.1 var(--serif); margin-bottom: 16px; }
.day-intro p:last-child { max-width: 44ch; color: var(--soft); margin: 0; }
.day-how { list-style: none; margin: 0 0 22px; padding: 0; max-width: 46ch; }
.day-how li { font: 300 clamp(19px, 1.5vw, 23px)/1.5 var(--serif); color: var(--title); padding: 10px 0; border-top: 1px solid var(--line); }
.day-how b { font-weight: 500; }
.day-intro { align-self: end; }
.day-sheet {
  grid-column: 1 / 9; grid-row: 2; background: var(--sheet); border: 1px solid var(--line);
  padding: clamp(24px, 3.4vw, 56px); position: relative; z-index: 1;
}
.day-part { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; column-gap: clamp(20px, 3vw, 48px); padding: 26px 0; border-top: 1px solid var(--line); }
.day-part:first-child { border-top: 0; padding-top: 0; }
.day-part > .note { grid-column: 2; grid-row: 1 / 9; align-self: start; padding-top: 6px; border-top: 1px solid var(--ink); }
.day-part > :not(.note) { grid-column: 1; }
.day-date { font-size: 15px; color: var(--soft); letter-spacing: .02em; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.day-label { font: 400 clamp(22px, 1.9vw, 28px)/1.3 var(--serif); color: var(--title); margin: 0; }
.day-quote { margin: 0; }
.day-quote p { font: 800 clamp(26px, 2.7vw, 42px)/1.12 var(--quote); color: var(--title); margin-bottom: 12px; max-width: 22ch; }
.day-quote footer { font-size: 15px; color: var(--soft); }
.day-text p:first-child { max-width: 62ch; }
.day-morning h3, .day-evening h3 { font: 400 clamp(20px, 1.6vw, 24px)/1.3 var(--serif); margin-bottom: 10px; }
.prompts { list-style: none; margin: 0; padding: 0; }
.prompts li { padding-top: 10px; }
.prompts li::after {
  content: ""; display: block; height: 2.4em;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.2em - 1px), var(--line) calc(1.2em - 1px) 1.2em);
}
.day-evening {
  grid-column: 9 / 13; grid-row: 2; align-self: end; margin-inline-start: -4vw; margin-bottom: -6vw;
  background: var(--dusk); padding: clamp(24px, 2.6vw, 40px); position: relative; z-index: 2; font-size: 17px;
}
.day-evening .prompts li::after { height: 1.6em; background: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(89, 66, 52, .28) 0); }

/* ---------- 5. who it's for (night) ---------- */
.act-for {
  background: var(--plum); color: var(--paper); overflow: clip;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 56px;
  margin-top: 6vw;
}
.night-sky { position: absolute; inset-block: 8% auto; inset-inline-end: -6%; width: min(70vw, 980px); height: auto; color: rgba(248, 246, 237, .34); pointer-events: none; }
.for-h { grid-column: 1 / 13; color: var(--paper); font: 300 clamp(20px, 1.6vw, 24px)/1.3 var(--sans); font-weight: 500; letter-spacing: .02em; opacity: .8; }
.for-prose { grid-column: 1 / 9; position: relative; }
.for-prose p { font: 300 clamp(25px, 2.5vw, 40px)/1.42 var(--serif); max-width: 26ch; margin-bottom: .9em; }
.lead-in { font-weight: 500; }
.for-quote { grid-column: 6 / 13; margin: 0; padding-top: 28px; border-top: 1px solid rgba(248, 246, 237, .35); position: relative; }
.for-quote p { font: 800 clamp(22px, 2vw, 32px)/1.2 var(--quote); max-width: 28ch; }
.for-quote footer { font-size: 15px; opacity: .8; }

/* ---------- 6. about Yuval ---------- */
.act-yuval { display: grid; justify-items: center; padding-bottom: 0; }
.yuval-card {
  width: min(100%, 600px); text-align: center; padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
  border: 1px dashed var(--art); position: relative; z-index: 1; background: var(--paper);
}
.yuval-card h2 { font: 300 clamp(32px, 3.4vw, 52px)/1.1 var(--serif); margin-bottom: 18px; }
.pending { font: 300 clamp(20px, 1.7vw, 26px)/1.5 var(--serif); color: var(--title); }
.pending-tag { display: inline-block; margin: 6px 0 0; font: 500 14px/1 var(--sans); color: var(--soft); border-top: 1px solid var(--line); padding-top: 10px; }
.hands { width: clamp(300px, 44vw, 620px); height: auto; color: var(--art); margin-top: -2.4vw; }

/* ---------- 7. order ---------- */
.act-order {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center;
  border-top: 1px solid var(--line);
}
.order-photo { grid-column: 7 / 13; grid-row: 1; margin: 0; }
.order-body { grid-column: 1 / 6; grid-row: 1; }
.order-body h2 { font: 300 clamp(34px, 3.8vw, 60px)/1.08 var(--serif); margin-bottom: 22px; }
.price { font: 400 clamp(24px, 2vw, 30px)/1.3 var(--serif); color: var(--title); padding: 14px 0; border-block: 1px solid var(--line); }
.price span { font: 500 15px/1 var(--sans); color: var(--soft); margin-inline-end: 14px; vertical-align: middle; }
.ship { color: var(--soft); }
.btn {
  display: inline-block; font: 500 17px/1 var(--sans); padding: 16px 26px; border: 1px solid var(--title);
  background: var(--title); color: var(--paper); text-decoration: none; border-radius: 2px; cursor: pointer;
}
.btn-wa { margin: 8px 0 32px; }
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; color: var(--soft); }
.lead .wide { grid-column: 1 / -1; }
.lead input, .lead textarea {
  font: 400 17px/1.4 var(--sans); color: var(--title); background: var(--sheet);
  border: 1px solid #988679; border-radius: 2px; padding: 12px 14px; width: 100%;
}
.lead button { justify-self: start; background: transparent; color: var(--title); }
.stub-note { margin-top: 14px; font-size: 17px; color: var(--soft); }

/* ---------- 8. FAQ ---------- */
.act-faq { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); background: var(--paper-2); }
.act-faq h2 { grid-column: 1 / 4; grid-row: 1; font: 300 clamp(30px, 3vw, 46px)/1.1 var(--serif); }
.faq-list { grid-column: 4 / 10; grid-row: 1; }
/* the cover's moon and rings close the page (it turns with the scroll, see motion) */
.faq-moon { grid-column: 10 / 13; grid-row: 1; align-self: end; justify-self: center; width: min(100%, 300px); height: auto; color: var(--art); }
.faq-moon .phase { fill: var(--paper-2); }
/* a <use> clone's .paper path is not reached by ".art .paper"; it inherits fill from its host instead */
.faq-moon { fill: var(--paper-2); }
.thread svg { fill: none; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px;
  font: 400 clamp(19px, 1.5vw, 23px)/1.35 var(--serif); color: var(--title);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--ink); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { max-width: 58ch; padding-bottom: 12px; }

/* ---------- 9. footer ---------- */
.act-foot {
  padding-block: 56px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px;
  background: var(--plum); color: var(--dusk); font-size: 17px;
}
.act-foot .lockup, .act-foot a { color: var(--paper); }
.act-foot :focus-visible { outline-color: var(--paper); }
.lockup-foot { width: 150px; height: auto; }
.act-foot p { margin: 0; flex: 1; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .open-text { grid-column: 1 / 7; }
  .open-art { grid-column: 4 / 13; }
  .pages-head { grid-column: 1 / 13; margin-bottom: 40px; }
  .pg-a { grid-column: 1 / 13; grid-row: 2; }
  .pg-b { grid-column: 5 / 13; grid-row: 3; margin-top: 7vw; }
  .day-sheet { grid-column: 1 / 13; }
  .day-evening { grid-column: 4 / 13; grid-row: 3; align-self: start; margin: -32px 0 0; }
  .act-for { margin-top: 0; }
  .faq-list { grid-column: 4 / 11; }
  .faq-moon { grid-column: 11 / 13; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .act { padding-block: 72px; }
  .act-open { padding: 0; }
  .open-stage { display: flex; flex-direction: column; align-items: stretch; padding-top: 28px; min-height: 0; }
  .open-text { padding-bottom: 0; }
  .open-text .lockup { width: 190px; margin-bottom: 28px; }
  .open-title { font-size: clamp(40px, 11.5vw, 52px); }
  .open-art { margin: 8px calc(var(--pad) * -1) 0; }
  .art-cover { width: 118%; max-width: none; margin-inline: -9%; transform: none; }

  .act-what, .act-pages, .act-day, .act-for, .act-order, .act-faq { display: flex; flex-direction: column; }
  .act-what { gap: 44px; }
  .what-photo { width: 78%; align-self: flex-end; }

  .act-pages { gap: 0; }
  .pages-head { margin-bottom: 36px; }
  .pg-a { width: 100%; }
  .pg-b { width: 92%; align-self: flex-end; margin-top: 44px; }

  .day-part { grid-template-columns: 1fr; padding: 22px 0; }
  .day-part > .note { grid-column: 1; grid-row: 1; border-top: 0; padding: 0; margin-bottom: 8px; font-size: 15px; }
  .day-part > :not(.note) { grid-column: 1; }
  .day-sheet { padding: 24px 20px; margin-inline: calc(var(--pad) * -0.5); }
  .day-evening { margin: -20px 0 0 calc(var(--pad) * -0.5); width: auto; }

  .night-sky { width: 130vw; inset-inline-end: -40vw; inset-block-start: 2%; opacity: .45; }
  .for-h, .for-quote { position: relative; }
  .act-for { gap: 36px; }

  .act-order { gap: 40px; }
  .order-photo { order: 2; }
  .lead { grid-template-columns: 1fr; }
  .act-faq { gap: 24px; }
  .faq-moon { width: 168px; align-self: center; }
  .drift-what { inset-block-start: 14px; width: 128px; }
  .drift-order { inset-block-start: 10px; width: 120px; }
  .act-foot { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================================================
   Motion (part 2), CSS only: keyframes for the draw-on at load, scroll-driven animations (view
   timelines) for everything tied to the scroll. Only transform / opacity move; the draw-on masks
   animate their own mask shape once, then are dropped. Gate: prefers-reduced-motion: no-preference
   and animation-timeline support. Without either, the page is the full static composed state above.
   ===================================================================================================== */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {

  /* ---- 1. opening, pinned: the header is the scroll length, the stage sticks for it ---- */
  .act-open { height: 200svh; view-timeline: --open block; }
  .open-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
  @media (max-width: 760px) { .act-open { height: 150svh; } }

  /* 1a. draw-on at load (about 3.6 s): one sweep around the rings and moon, the clouds drawn
     from their outer edges in, the hands from the wrists up, then the stars come out */
  .mk-sweep { stroke-dasharray: 1 1; animation: mk-dash 2.6s cubic-bezier(.5, 0, .25, 1) .2s both; }
  .mk-ltr, .mk-rtl, .mk-btt { transform-box: fill-box; }
  .mk-ltr { transform-origin: 0 50%; }
  .mk-rtl { transform-origin: 100% 50%; }
  .mk-btt { transform-origin: 50% 100%; }
  .art-cover .mk-ltr, .art-cover .mk-rtl { animation: mk-grow-x 2.2s cubic-bezier(.45, 0, .25, 1) both; }
  .art-cover .mk-btt { animation: mk-grow-y 2s cubic-bezier(.45, 0, .25, 1) 1.5s both; }
  #mk-cloud-a .mk { animation-delay: .8s; }
  #mk-cloud-b .mk { animation-delay: 1.1s; }

  .art-cover path:nth-child(3n+2) { --st: .3s; }
  .art-cover path:nth-child(3n) { --st: .6s; }
  #art-const-tr { --dl: 1.3s; }
  #art-compass { --dl: 1.7s; }
  #art-const-br { --dl: 2s; }
  #art-dots { --dl: 2.1s; }
  #art-stars-l, #art-stars-r { --dl: 2.5s; }
  .art-cover :is(#art-const-tr, #art-compass, #art-const-br, #art-stars-l, #art-stars-r) path { animation: fade-in 1.4s ease both; animation-delay: calc(var(--dl) + var(--st, 0s)); }
  /* ambient: once drawn, the stars keep twinkling, each on its own slow beat (the compass does not) */
  .art-cover :is(#art-const-tr, #art-const-br, #art-stars-l, #art-stars-r) path {
    animation: fade-in 1.4s ease both, twinkle var(--tw, 5.2s) ease-in-out infinite;
    animation-delay: calc(var(--dl) + var(--st, 0s)), calc(var(--dl) + var(--st, 0s) + 1.6s);
  }
  .art-cover path:nth-child(4n+1) { --tw: 6.4s; }
  .art-cover path:nth-child(5n+2) { --tw: 4.3s; }

  /* 1b. scroll through the pin: clouds part, rings turn, the moon turns on its orbit, hands sink, dots rise */
  .art-cover #art-rings { animation: hold-sweep 2.9s step-end, rings-turn linear both, breathe 9s ease-in-out 3s infinite; animation-timeline: auto, --open, auto; animation-range: normal, contain 0% contain 100%, normal; }
  .art-cover #art-moon { animation: hold-sweep 2.9s step-end, moon-turn linear both; animation-timeline: auto, --open; animation-range: normal, contain 0% contain 100%; }
  .art-cover #art-star-cluster { animation: hold-sweep 2.9s step-end, cluster-turn linear both; animation-timeline: auto, --open; animation-range: normal, contain 0% contain 100%; }
  .art-cover #art-cloud-a { animation: hold-cloud-a 3.1s step-end, part-a linear both, float-a 15s ease-in-out 3.2s infinite; animation-timeline: auto, --open, auto; animation-range: normal, contain 0% exit 100%, normal; }
  .art-cover #art-cloud-b { animation: hold-cloud-b 3.4s step-end, part-b linear both, float-b 18s ease-in-out 3.5s infinite; animation-timeline: auto, --open, auto; animation-range: normal, contain 0% exit 100%, normal; }
  .art-cover :is(#art-hand-l, #art-hand-r) { animation: hold-hands 3.6s step-end, sink linear both; animation-timeline: auto, --open; animation-range: normal, contain 0% contain 100%; }
  .art-cover :is(#art-stars-l, #art-stars-r) { animation: sink linear both; }
  .art-cover #art-compass { animation: compass-turn linear both; }
  .art-cover #art-const-tr { animation: drift-tr linear both; }
  .art-cover #art-const-br { animation: drift-br linear both; }
  .art-cover .art-g:is(#art-stars-l, #art-stars-r, #art-compass, #art-const-tr, #art-const-br) { animation-timeline: --open; animation-range: contain 0% contain 100%; }
  .art-cover #art-dots path {
    animation: fade-in 1.4s ease both, rise-dot linear both; animation-delay: calc(var(--dl) + var(--st, 0s)), 0s;
    animation-timeline: auto, --open; animation-range: normal, contain 0% contain 100%;
  }
  #art-dots path:nth-child(1) { --k: 28; } #art-dots path:nth-child(2) { --k: 46; } #art-dots path:nth-child(3) { --k: 20; }
  #art-dots path:nth-child(4) { --k: 38; } #art-dots path:nth-child(5) { --k: 54; } #art-dots path:nth-child(6) { --k: 24; }
  #art-dots path:nth-child(7) { --k: 42; } #art-dots path:nth-child(8) { --k: 30; } #art-dots path:nth-child(9) { --k: 50; }
  #art-dots path:nth-child(10) { --k: 34; }

  /* 1c. the words arrive with the drawing, the lockup letter group by letter group, then ease up through the pin */
  .open-text > :not(.lockup), .open-text .lk-g { animation: text-in 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  .open-text #lk-magic { animation-delay: .15s; }
  .open-text #lk-motion { animation-delay: .5s; }
  .open-text #lk-sub-1 { animation-delay: .8s; }
  .open-text #lk-sub-2 { animation-delay: .9s; }
  .open-text .open-title { animation-delay: .35s; }
  .open-text .open-lede { animation-delay: .6s; }
  .open-text .open-buy { animation-delay: .8s; }
  .open-text { animation: text-out linear both; animation-timeline: --open; animation-range: contain 35% contain 100%; }
  /* 1d. exit: as the page slides over the pinned stage, the drawing swells a little and pales */
  .open-art { animation: open-out linear both; animation-timeline: --open; animation-range: exit 0% exit 90%; }

  /* Legibility (QA MIM-MOTION-W2 r1+r2 HIGH): reading copy carries no mask; it rises in and every text completes by the time its line is fully on screen
     (entry 100%), so copy is never half-masked while the reader pauses. */
  /* ---- shared: "ink" = text written in right to left (Hebrew reading order) by a soft-edged mask; the
     Latin lockup writes left to right. A view() timeline per element, so lines arrive one by one. ---- */
  .what-h, .colophon div, .pg figcaption, .day-intro h2, .day-part > :not(.note, .prompts), .prompts li,
  .day-evening h3, .for-quote, .order-body h2, .price, .act-faq h2 {
    animation: ink-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
  }
  .colophon div:nth-child(2n) { animation-range: entry 20% entry 100%; }
  .prompts li { animation-range: entry 20% entry 100%; }
  /* the ruled writing line under each prompt draws after its words, from the right */
  .prompts li::after { transform-origin: 100% 50%; animation: line-in linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }

  /* ---- 2. what it is: one of the cover's clouds drifts in from the edge and parts off as you leave;
     the welcome page comes up out of the table, larger and then settled; the colophon is inked line by line ---- */
  .act-what { overflow-x: clip; view-timeline: --what block; }
  .drift-what { animation: cloud-in linear both, cloud-out linear both; animation-timeline: --what, --what; animation-range: entry 0% entry 50%, exit 0% exit 70%; }
  .what-photo { animation: lift-in linear both, page-up linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 40%, exit 0% exit 100%; }
  .what-quote { animation: from-start linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }

  /* ---- 7. order: the cover is set down on the table, a cloud drifts in behind it, the price is inked;
     the order button arrives last and is never covered ---- */
  .act-order { overflow-x: clip; view-timeline: --order block; }
  .drift-order { animation: cloud-in-r linear both, cloud-out-r linear both; animation-timeline: --order, --order; animation-range: entry 0% cover 45%, exit 0% exit 80%; }
  .order-photo { animation: set-down linear both, page-up linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 45%, exit 0% exit 100%; }
  .order-body > p:not(.price, .stub-note) { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
  .btn-wa { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }

  /* ---- 3. real pages: each sheet is uncovered top to bottom while its print settles ---- */
  /* the wipe is a clip on the paper itself (no cover layer; the clip ends outside the shadow), and it is
     complete by the time the page's top edge is two thirds up the screen, so a sheet is never half blank */
  /* W2: the day-28 spread opens from a closed sheet: page 57 unfolds out of the spine (a flat 2D hinge,
     scaleX from the fold, no 3D) and folds shut again as the spread leaves. Day 77's two loose sheets
     land, then the under sheet fans out from beneath; on exit it slides back under, a stack again. */
  .act-pages { overflow-x: clip; }
  .pages-head > * { animation: from-start linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .pages-head > p:last-child { animation-range: entry 40% cover 36%; }
  .pg { view-timeline: --pg block; }
  .pg .spread { box-shadow: none; animation: arrive linear both; animation-timeline: --pg; animation-range: entry 0% entry 60%; }
  .pg .spread .sheet { box-shadow: var(--sheet-shadow); }
  .pg .spread .sheet:last-child { transform-origin: 100% 50%; animation: hinge-open linear both, hinge-shut linear both; animation-timeline: --pg, --pg; animation-range: entry 35% cover 42%, exit 15% exit 85%; }
  .pg .loose .sheet:last-child { animation: land linear both; animation-timeline: --pg; animation-range: entry 0% entry 55%; }
  .pg .loose .sheet:first-child { animation: fan-out linear both, fan-in linear both; animation-timeline: --pg, --pg; animation-range: entry 45% cover 45%, exit 20% exit 90%; }

  /* ---- 4. day 28: each part arrives, then its margin note slides in beside it; the evening page follows ---- */
  /* W2: the day writes itself: date, label, quote, text and every prompt inked in one by one ("shared"
     above), each writing line drawn after its prompt; the margin notes slide in, and slip out at the top.
     The evening page is laid over the sheet from the side and lifts away first on exit. */
  .act-day { overflow-x: clip; }
  .day-how li { animation: from-end linear both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
  .day-part { view-timeline: --part block; }
  .day-part > .note { animation: note-in linear both, note-out linear both; animation-timeline: --part, --part; animation-range: entry 45% cover 40%, exit 30% exit 100%; }
  .day-evening { animation: lay-over linear both, page-up linear both; animation-timeline: view(), view(); animation-range: entry 0% cover 35%, exit 0% exit 100%; }

  /* ---- 5. night: the cover's constellations draw across the plum sky, which drifts slower than the words ---- */
  .act-for { view-timeline: --night block; }
  .night-sky { animation: sky linear both, sky-out linear both; animation-timeline: --night, --night; animation-range: cover 0% cover 100%, exit 10% exit 70%; }
  .night-sky [href="#art-const-br"] { animation: twinkle 6.6s ease-in-out 1s infinite; }
  .night-sky .mk { animation: mk-grow-x linear both; animation-timeline: --night; animation-range: entry 35% cover 45%; }
  #mk-n2 .mk { animation-range: entry 75% cover 58%; }
  .n-compass { transform-box: fill-box; transform-origin: center; animation: compass-turn linear both; animation-timeline: --night; animation-range: cover 0% cover 100%; }
  .n-dots { animation: fade-in linear both, twinkle 5.4s ease-in-out infinite; animation-timeline: --night, auto; animation-range: entry 55% cover 50%, normal; }
  /* W2: the words surface out of the dark one by one (no rise); the quote is inked; on exit the sky dissolves */
  .for-prose p { transform-origin: 100% 50%; animation: surface linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }

  /* ---- 6. Yuval: the cover's open hands rise from below the section edge holding the card, the card is
     lifted up out of them, the two small stars twinkle; on the way out the hands sink back below the edge ---- */
  .act-yuval { overflow: clip; }
  .yuval-card { animation: card-up linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .hands { animation: hands-rise linear both, hands-sink linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 100%, cover 62% cover 100%; }
  .hands [href="#art-stars-l"] { animation: twinkle 4.8s ease-in-out infinite; }
  .hands [href="#art-stars-r"] { animation: twinkle 5.9s ease-in-out 1.2s infinite; }

  /* ---- 8. FAQ: the moon waxes from new to full with the scroll, the rings turn round it, its star twinkles;
     the questions drop into place one by one ---- */
  .act-faq { view-timeline: --faq block; }
  .faq-moon .phase { animation: wax linear both; animation-timeline: --faq; animation-range: entry 10% cover 55%; }
  .f-rings { transform-box: view-box; transform-origin: 186.85px 132.9px; animation: rings-turn linear both; animation-timeline: --faq; animation-range: cover 0% cover 100%; }
  .f-star { animation: twinkle 5s ease-in-out infinite; }
  details { animation: drop-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }

  /* ---- 9. footer: the Latin lockup writes itself left to right, the line under it follows ---- */
  .lockup-foot { mask: linear-gradient(to right, #000 34%, transparent 66%) 0 0 / 300% 100% no-repeat; animation: ink-ltr linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  .act-foot > :not(.lockup) { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }

  /* ---- the thread: the cover's centre star travels down the margin (inline end) through every section,
     turning as it goes; it appears once the opening has passed and fades as the footer arrives ---- */
  main { view-timeline: --main block; }
  .thread {
    display: block; position: fixed; z-index: 5; inset-block-start: 0; inset-inline-end: clamp(4px, 2.2vw, 34px);
    width: clamp(12px, 1.25vw, 18px); color: var(--art); pointer-events: none;
    animation: thread linear both; animation-timeline: --main; animation-range: entry 50% exit 100%;
  }
  .thread svg { width: 100%; height: auto; }

}}

@keyframes mk-dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mk-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hold-sweep { from, to { mask-image: url(#mk-sweep); } }
@keyframes hold-cloud-a { from, to { mask-image: url(#mk-cloud-a); } }
@keyframes hold-cloud-b { from, to { mask-image: url(#mk-cloud-b); } }
@keyframes hold-hands { from, to { mask-image: url(#mk-hands); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rings-turn { to { rotate: 32deg; } }
@keyframes moon-turn { to { rotate: -118deg; } }
@keyframes cluster-turn { to { rotate: 72deg; scale: 1.12; } }
@keyframes part-a { to { translate: -170px -30px; } }
@keyframes part-b { to { translate: 90px -40px; opacity: .7; } }
@keyframes sink { to { translate: 0 36px; opacity: .45; } }
@keyframes compass-turn { to { rotate: 90deg; } }
@keyframes drift-tr { to { translate: 12px -18px; } }
@keyframes drift-br { to { translate: 6px -12px; } }
@keyframes rise-dot { to { translate: 0 calc(var(--k, 30) * -1px); } }
@keyframes text-in { from { opacity: 0; translate: 0 14px; } }
@keyframes text-out { to { translate: 0 -5vh; opacity: .7; } }
@keyframes note-in { from { opacity: 0; translate: -18px 0; } }
/* W2. Exit keyframes give only "to": the start is the underlying (entered) state, so an exit never jumps. */
@keyframes breathe { 50% { transform: scale(1.018); } }
@keyframes float-a { 50% { transform: translate(6px, -3px); } }
@keyframes float-b { 50% { transform: translate(-7px, 2.5px); } }
@keyframes twinkle { 50% { opacity: .3; } }
@keyframes open-out { to { scale: 1.07; opacity: .4; } }
@keyframes ink-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes ink { from { mask-position: 0 0; } to { mask-position: 100% 0; } }
@keyframes ink-ltr { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
@keyframes line-in { from { transform: scaleX(0); } }
@keyframes from-start { from { opacity: 0; translate: 36px 0; } }
@keyframes from-end { from { opacity: 0; translate: -36px 0; } }
@keyframes arrive { from { opacity: 0; scale: .94; } }
@keyframes cloud-in { from { translate: -45vw 4vh; } }
@keyframes cloud-out { to { translate: -30vw -12vh; opacity: 0; } }
@keyframes cloud-in-r { from { translate: 75vw 0; } }
@keyframes cloud-out-r { to { translate: -28vw -9vh; opacity: 0; } }
@keyframes lift-in { from { translate: 0 10vh; scale: .9; opacity: 0; } }
@keyframes page-up { to { translate: 0 -7vh; } }
@keyframes set-down { from { translate: -12vw 6vh; rotate: -7deg; opacity: 0; } 70% { rotate: 1deg; } }
@keyframes hinge-open { from { scale: 0 1; } }
@keyframes hinge-shut { to { scale: .03 1; } }
@keyframes land { from { translate: 0 22%; rotate: -3deg; opacity: 0; } }
@keyframes fan-out { from { translate: 22% -12%; rotate: 4deg; } }
@keyframes fan-in { to { translate: 22% -12%; rotate: 2deg; } }
@keyframes note-out { to { opacity: 0; translate: -18px 0; } }
@keyframes lay-over { from { translate: 0 18vh; rotate: 3deg; opacity: 0; } }
@keyframes sky-out { to { opacity: 0; } }
@keyframes surface { from { opacity: 0; scale: .985; } }
@keyframes card-up { from { translate: 0 80px; scale: .97; opacity: 0; } }
@keyframes hands-rise { from { translate: 0 55%; opacity: 0; } }
@keyframes hands-sink { to { translate: 0 60%; opacity: .25; } }
@keyframes wax { from { translate: 130px 0; } }
@keyframes drop-in { from { translate: 0 -16px; opacity: 0; } }
@keyframes thread {
  entry 50% { opacity: 0; translate: 0 10svh; rotate: 0deg; }
  entry 100% { opacity: 1; }
  exit 0% { opacity: 1; }
  exit 18% { opacity: 0; translate: 0 86svh; rotate: 720deg; }
}
@keyframes sky { from { translate: 0 6%; } to { translate: 0 -10%; } }