/* ==========================================================================
   Flame of New Hearts — shared design system
   Warm · friendly · youthful · hopeful. Real photography leads; flame
   orange + dark brown + soft green on warm white.
   The scrapbook flipbook demo keeps its own stylesheet (style.css).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --cream:      #FBF7F0;  /* warm white background            */
  --sand:       #F1E7D6;  /* tonal panels / image surface     */
  --ink:        #3E2C22;  /* dark brown text                  */
  --ink-soft:   #5F4A3A;  /* body paragraphs                  */
  --ink-2:      #8A7362;  /* muted labels                     */
  --flame:      #D95F1E;  /* flame orange — action color      */
  --flame-deep: #B54A10;  /* hover / emphasis                 */
  --flame-soft: #F8DfC8;  /* pale flame tint                  */
  --green:      #6E8F5A;  /* soft green — nature, success     */
  --green-soft: #E2EAD8;  /* pale green tint                  */
  --line:       #E8DCC8;  /* hairlines                        */

  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --container: 1200px;
  --radius: 14px;
}

/* ---------- Reset-lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  color: var(--ink);
}
p { margin: 0 0 1.05rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }
a { color: var(--flame-deep); }
::selection { background: var(--flame); color: #fff; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 3px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

section { padding-block: clamp(3.5rem, 8vh, 6rem); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.7rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.15;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-links a {
  font-size: 0.86rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--flame-deep); border-bottom-color: var(--flame); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--flame);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 999px;
  font: 600 0.95rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--flame-deep); transform: translateY(-1px); }
.btn--small { padding: 0.55rem 1.15rem; font-size: 0.85rem; }
.btn--ghost {
  background: transparent;
  color: var(--flame-deep);
  box-shadow: inset 0 0 0 2px var(--flame);
}
.btn--ghost:hover { background: var(--flame-soft); }
.btn--green { background: var(--green); }
.btn--green:hover { background: #5A7A48; }

/* ---------- Section furniture ---------- */
.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--flame-deep);
  margin-bottom: 0.8rem;
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 22ch; }
.section-lead { max-width: 62ch; font-size: 1.08rem; }
.center { text-align: center; }
.center .section-title, .center .section-lead { margin-inline: auto; }

.hand-note {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--green);
}

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 8px 24px -18px rgba(62, 44, 34, 0.35);
}
.card h3 { font-size: 1.25rem; }
.card--tint  { background: var(--sand);       border-color: transparent; }
.card--green { background: var(--green-soft); border-color: transparent; }

/* ---------- Photo placeholders ---------- */
/* Until real photos are added, .ph blocks hold their place. Swap each
   for an <img> with the same class; object-fit keeps the crop. */
.ph {
  position: relative;
  background: var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  min-height: 180px;
}
.ph::before {
  content: "🐾";
  display: block;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
  opacity: 0.55;
}
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 3 / 2; }
.ph--square { aspect-ratio: 1 / 1; }
.frame-img { border-radius: var(--radius); overflow: hidden; }
.frame-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero (Home) ---------- */
.hero { padding-block: clamp(2.5rem, 7vh, 5rem); }
.hero .grid--2 { align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); max-width: 15ch; }
.hero-sub { font-size: 1.15rem; max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.stat {
  border-top: 3px solid var(--flame);
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 8px 24px -18px rgba(62, 44, 34, 0.3);
}
.stat-value {
  display: block;
  font-weight: 650;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
  color: var(--ink);
}
.stat-label { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-2); }
.stats-note { margin-top: 1.2rem; font-size: 0.82rem; color: var(--ink-2); }

/* ---------- Process steps (TNR, adoption) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps--row { grid-template-columns: repeat(4, 1fr); }
.step {
  counter-increment: step;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  font: 700 0.8rem/1 var(--font-body);
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.6rem;
}
.step h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.step p { font-size: 0.92rem; margin: 0; }

/* ---------- Adoption cards ---------- */
.pet-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pet-card .ph, .pet-card .frame-img { border-radius: 0; min-height: 230px; }
.pet-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.pet-name { font-size: 1.3rem; margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.pet-name .hand-note { font-size: 1.1rem; }
.pet-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; list-style: none; }
.pet-facts li {
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--green-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.pet-facts li.tag-flame { background: var(--flame-soft); }
.pet-card p { font-size: 0.95rem; }
.pet-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Impact bars ---------- */
/* Simple single-hue bars; value labeled directly at the bar's end. */
.bars { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 0.9rem; font-size: 0.88rem; }
.bar-track { background: var(--sand); border-radius: 999px; height: 22px; overflow: hidden; position: relative; }
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--flame);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-weight: 650;
  font-size: 0.78rem;
  padding-inline: 0.6rem;
  min-width: 2.6rem;
}
.bar-fill--green { background: var(--green); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--flame) 0%, var(--flame-deep) 100%);
  color: #fff;
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-band h2 { color: #fff; margin: 0 0 0.3rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin: 0; }
.cta-band .btn { background: #fff; color: var(--flame-deep); }
.cta-band .btn:hover { background: var(--cream); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #EFE4D8; padding-block: 3rem 1.5rem; margin-top: 2rem; }
.site-footer a { color: #F6C79C; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 0.6rem; }
.site-footer p, .site-footer li { color: #D8C8B8; font-size: 0.92rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #B9A794;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 0.7s ease; }
}

/* ---------- Paw cursor trail ---------- */
.cursor-paw {
  position: fixed;
  width: 26px;
  height: 26px;
  fill: #D4A373;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
.cursor-paw.stamp { animation: cursor-stamp 1.6s ease-out forwards; }
@keyframes cursor-stamp {
  0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.55); }
  12% { opacity: 0.5; transform: rotate(var(--r, 0deg)) scale(1); }
  55% { opacity: 0.38; }
  100% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid--4, .steps--row { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4, .steps--row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ==========================================================================
   SCRAPBOOK LAYER — the flipbook demo's design language, ported onto the
   multi-page site. Handwritten voices, ransom-note headlines, torn-paper
   photo mats with washi tape, 3D tilt + glare, walking paw trails, and
   the ink-writing reveal. Appended last so it wins the cascade.
   ========================================================================== */

/* ---------- Refined hybrid ---------- */
/* Editorial typography (Fraunces + Inter, from the base tokens) with
   scrapbook ACCENTS: torn-mat photos, washi tape, tilt, paw trails,
   and hand-written .hand-note touches. Ransom letters and handwritten
   body text were tried and retired — too loud at page scale. */
:root { --paw-ink: #D4A373; }

/* ---------- Torn-paper paste (photos) ---------- */
/* js/site.js adds .paste to every .ph / .frame-img and injects the mat,
   torn edge, and tape layers. The clip window lets decoration and the
   mat's shadow extend beyond the box. */
.paste {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 64px;
  --pz: 0deg; /* photos sit straight in the refined hybrid */
  box-shadow:
    0 0 0 8px #FFFDF6,
    0 0 0 9px rgba(62, 44, 34, 0.09),
    0 26px 46px -18px rgba(62, 44, 34, 0.35);
}
@supports (overflow-clip-margin: 1px) {
  .paste, .paste.is-tilting { box-shadow: none; }
}
.paste.is-visible,
.paste:not(.reveal) {
  transform: perspective(950px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             rotate(var(--pz, 0deg))
             scale(var(--ts, 1));
  transition:
    opacity    0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
.paste.is-tilting {
  --ts: 1.02;
  transition: transform 0.08s linear;
  will-change: transform;
}
.paste .torn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFDF6' fill-rule='evenodd' d='M0 0h400v500H0z M20 16L52 22 88 12 126 20 163 10 198 18 236 11 272 21 308 13 345 19 381 14 386 48 378 86 388 124 380 168 389 210 379 254 387 300 378 342 388 388 381 432 386 470 352 486 315 478 280 488 243 479 207 489 170 480 134 488 98 479 60 487 28 481 14 448 22 410 12 370 21 328 13 288 22 244 12 204 20 162 13 120 22 78 15 40z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.paste .mat {
  position: absolute;
  inset: -16px;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 520' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFDF6' d='M6 10L44 4 82 12 120 3 158 11 196 5 234 13 272 4 310 12 348 6 386 13 412 8 416 42 409 84 417 128 408 172 416 214 407 258 415 300 408 344 417 386 409 428 415 468 410 506 378 516 340 508 302 517 264 509 226 516 188 508 150 515 112 507 74 516 36 509 10 514 4 478 12 438 3 396 11 354 4 312 12 270 3 228 11 186 4 144 12 102 5 60z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 18px rgba(62, 44, 34, 0.26));
  transition: filter 0.35s ease;
}
/* Paw-step accent: the mat glows warm while a print is on the card. */
.paste.is-pawed .mat {
  filter: drop-shadow(0 18px 18px rgba(62, 44, 34, 0.26))
          drop-shadow(0 0 16px rgba(212, 163, 115, 0.9));
}
.paste .tape {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 112px;
  height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.25) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    rgba(176, 196, 222, 0.65);
  clip-path: polygon(3% 0, 100% 0, 96% 20%, 100% 44%, 95% 68%, 100% 100%, 2% 100%, 6% 72%, 0 46%, 4% 22%);
  pointer-events: none;
  z-index: 2;
}
.tape-pink .tape {
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.25) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    rgba(228, 160, 184, 0.6);
  transform: translateX(-50%) rotate(2.5deg);
}
.tape-mint .tape {
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.25) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    rgba(154, 200, 174, 0.6);
  transform: translateX(-50%) rotate(-2deg);
}
/* Glare sheen following the cursor while tilting. */
.paste::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 253, 248, 0.38), rgba(255, 253, 248, 0) 58%);
  transition: opacity 0.35s ease;
  z-index: 2;
}
.paste.is-tilting::after { opacity: 1; }

/* ---------- Paw trails (walking through sections) ---------- */
main section { position: relative; }
main section > .container { position: relative; z-index: 1; }
.paws-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.paw {
  position: absolute;
  width: var(--paw-size, 40px);
  height: var(--paw-size, 40px);
  fill: var(--paw-ink);
  opacity: 0;
  transform: rotate(var(--r, 225deg)) translateY(-28px) scale(0.5);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.paw--dog { --paw-size: 48px; }
.paw.visible {
  opacity: 0.17;
  transform: rotate(var(--r, 225deg)) translateY(0) scale(1);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .paw, .paw.visible { transform: rotate(var(--r, 225deg)); transition: opacity 0.4s ease; }
  .paste.is-visible, .paste:not(.reveal) { transition: opacity 0.9s ease; }
}


/* ---------- Mind-map homepage ---------- */
.mindmap {
  position: relative;
  height: clamp(500px, 64vh, 620px);
  margin-top: 1.2rem;
}
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.mm-hub {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px -20px rgba(62, 44, 34, 0.5);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.mm-hub img { border-radius: 50%; }
.mm-hub strong { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.1; }
.mm-hub small { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }

.mm-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  padding: 1rem 1.4rem 1.1rem;
  background: color-mix(in srgb, var(--paint) 16%, #fff);
  border: 2px solid color-mix(in srgb, var(--paint) 55%, #fff);
  border-radius: 46% 54% 52% 48% / 55% 46% 54% 45%;
  box-shadow: 0 10px 26px -16px rgba(62, 44, 34, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mm-node:hover {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 18px 36px -18px rgba(62, 44, 34, 0.5);
}
.mm-node.reveal { transform: translate(-50%, -50%) translateY(26px); }
.mm-node.reveal.is-visible { transform: translate(-50%, -50%); }
.mm-node.reveal.is-visible:hover { transform: translate(-50%, -50%) scale(1.07); }
.mm-emoji { font-size: 1.5rem; line-height: 1; }
.mm-label { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.mm-sub {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mm-stat {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mm-stat .stat-value {
  display: block;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.05;
  color: color-mix(in srgb, var(--paint) 72%, var(--ink));
}

@media (max-width: 860px) {
  .mindmap { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .mm-lines { display: none; }
  .mm-hub {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    padding: 1.1rem;
    grid-column: 1 / -1;
  }
  .mm-node, .mm-node.reveal, .mm-node.reveal.is-visible {
    position: static;
    transform: none;
    border-radius: var(--radius);
  }
  .mm-node.reveal { transform: translateY(26px); }
  .mm-node.reveal.is-visible { transform: none; }
}

/* ---------- Paint-flood page transitions ---------- */
/* Click a mind-map node: its color floods out from the click point and
   fills the screen; the destination page then sheds the same color from
   the same point, and its content settles in like wet paint (soft blur
   clearing as each block reveals). */
.paint-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: var(--paint, #D95F1E);
  clip-path: circle(0% at var(--px, 50%) var(--py, 50%));
}
.paint-overlay.grow {
  transition: clip-path 0.62s cubic-bezier(0.5, 0, 0.8, 0.4);
  clip-path: circle(142% at var(--px, 50%) var(--py, 50%));
}
.paint-overlay.shrink {
  clip-path: circle(142% at var(--px, 50%) var(--py, 50%));
}
.paint-overlay.shrink.done {
  transition: clip-path 0.85s cubic-bezier(0.2, 0.6, 0.3, 1) 0.1s;
  clip-path: circle(0% at var(--px, 50%) var(--py, 50%));
}

/* Painting-like arrival: revealed blocks clear from a soft blur. */
body.painted .reveal {
  filter: blur(10px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.9s, 0.9s, 1.15s;
  transition-timing-function: ease;
}
body.painted .reveal.is-visible { filter: blur(0); }