/* ============ GWCK — God, Water, Country, King ============
   Paper, ink, and one blue. */

:root {
  --paper: #FBFAF8;
  --paper-dim: #F2F0EA;
  --ink: #1F1F1F;
  --ink-soft: #3A3A3A;
  --gray: #8A8A8A;          /* decorative only */
  --gray-strong: #6E6E6E;   /* functional small text: 4.6:1 on paper */
  --gray-faint: #C4C4C4;
  --blue: #1B5FAA;          /* reserved: helper + commerce only */
  --blue-deep: #143F73;
  --pink: #FF46A2;          /* reserved: emotional accents + chapter washes only */
  --pink-mid: #E5679B;
  --pink-soft: #EDA6C4;
  --pink-deep: #8A0F4F;
  --serif: 'Crimson Text', Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --hand: 'Caveat', 'Segoe Print', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); overflow-x: hidden; }
/* smooth mode: native scroll stays alive (the engine reads window.scrollY);
   the fixed #scroller just paints the lerped position. */
body.is-smooth { scrollbar-width: thin; }
::selection { background: var(--ink); color: var(--paper); }

img { max-width: 100%; display: block; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ============ loader ============ */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2rem; transition: opacity .9s ease, visibility .9s;
}
#loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-words { display: flex; gap: 1.1rem; font-family: var(--type); font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: .18em; }
.loader-words span { opacity: 0; transform: translateY(8px); animation: word-in .5s ease forwards; }
.loader-words span:nth-child(1) { animation-delay: .15s; }
.loader-words span:nth-child(2) { animation-delay: .55s; }
.loader-words span:nth-child(3) { animation-delay: .95s; }
.loader-words span:nth-child(4) { animation-delay: 1.35s; }
@keyframes word-in { to { opacity: 1; transform: none; } }
.loader-line { width: min(260px, 50vw); height: 1px; background: var(--gray-faint); overflow: hidden; }
.loader-line i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s ease; }
.loader-hint { font-style: italic; color: var(--gray); font-size: .95rem; }

/* ============ atmosphere ============ */
#dust { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; }
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; }
#progress i { display: block; height: 100%; width: 0; background: var(--ink-soft); opacity: .65; }

/* ============ scroller / sections ============ */
#scroller { position: relative; z-index: 2; }
body.is-smooth #scroller { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* hero */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 8vh 6vw; position: relative;
}
.hero-kicker { font-style: italic; color: var(--gray); font-size: 1.05rem; margin-bottom: 2.2rem; }
.hero-title { font-family: var(--type); font-weight: 400; line-height: 1.04; letter-spacing: .04em; font-size: clamp(2.6rem, 9.5vw, 7.2rem); }
.hero-title span { display: block; opacity: 0; transform: translateY(14px); }
.is-ready .hero-title span { animation: word-in .8s ease forwards; }
.is-ready .hero-title span:nth-child(1) { animation-delay: .2s; }
.is-ready .hero-title span:nth-child(2) { animation-delay: .45s; }
.is-ready .hero-title span:nth-child(3) { animation-delay: .7s; }
.is-ready .hero-title span:nth-child(4) { animation-delay: .95s; }
.hero-sub { margin-top: 2.4rem; font-size: 1.2rem; color: var(--ink-soft); }
.hero-sub em { font-style: italic; }
.hero-scrollcue { position: absolute; bottom: 4.5vh; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cue-line { width: 1px; height: 52px; background: var(--gray); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
.cue-word { font-family: var(--type); font-size: .8rem; letter-spacing: .25em; color: var(--gray); }

/* chapter cards */
.chapter {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 14vh 8vw;
}
.chapter-num { font-family: var(--type); font-size: .95rem; letter-spacing: .3em; color: var(--gray); margin-bottom: 1.4rem; }
.chapter-title { font-family: var(--hand); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4rem); }
.chapter-line { margin-top: 1.6rem; font-style: italic; color: var(--ink-soft); font-size: 1.15rem; max-width: 34em; }

/* story page blocks */
.page-block { padding: 10vh 0 6vh; position: relative; }
.page-prose {
  max-width: 36em; margin: 0 auto 7vh; padding: 0 7vw;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.85; color: var(--ink-soft);
}
.page-prose p { margin-bottom: 1.1em; }
.page-prose strong { font-family: var(--type); font-size: .92em; letter-spacing: .06em; }
.page-art { max-width: 920px; margin: 0 auto; padding: 0 4vw; position: relative; }
/* box-shadow composites cheaply; drop-shadow() would re-rasterize the whole filtered SVG per frame */
.page-art svg { width: 100%; height: auto; display: block; box-shadow: 0 18px 40px rgba(31,31,31,.07); }
/* placeholder keeps the final art's exact geometry so anchors never drift */
.page-art.is-loading { aspect-ratio: 1200 / 1600; height: auto; }
.page-art.is-loading::after {
  content: ''; position: absolute; inset: 0 4vw;
  background: linear-gradient(100deg, var(--paper) 40%, var(--paper-dim) 50%, var(--paper) 60%);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -120% 0; } }

/* scroll choreography: svg top-level groups wash in */
.page-art svg > g { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.65,.25,1); }
.page-art.is-shown svg > g { opacity: 1; transform: none; }
.page-art.is-shown svg > g:nth-of-type(2) { transition-delay: .25s; }
.page-art.is-shown svg > g:nth-of-type(3) { transition-delay: .5s; }
.page-art.is-shown svg > g:nth-of-type(4) { transition-delay: .72s; }
.page-art.is-shown svg > g:nth-of-type(5) { transition-delay: .9s; }
.page-art.is-shown svg > g:nth-of-type(n+6) { transition-delay: 1.05s; }

/* the helper = commerce moment */
.gwck-helper { cursor: pointer; }
.gwck-helper:hover { filter: brightness(1.06); }
.gwck-helper:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* (the blue halo / "look for the blue" hint were removed — the bottom-right
   product callout is now the sole purchase cue; see .bar-shop below) */

/* ============ mission / finale ============ */
.mission {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 16vh 8vw; gap: 1.9rem;
}
.mission-creed { font-family: var(--type); letter-spacing: .22em; font-size: clamp(1.1rem, 2.8vw, 1.7rem); }
.mission-line { font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink-soft); line-height: 1.6; }
.mission-rule { width: 64px; height: 1px; background: var(--gray); }
.mission-statement { font-family: var(--type); font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.9; max-width: 26em; }
.mission-statement strong { border-bottom: 2px solid var(--ink); }
.mission-body { max-width: 38em; font-size: 1.18rem; line-height: 1.85; color: var(--ink-soft); }
.mission-foot { font-family: var(--hand); font-size: 1.5rem; color: var(--ink-soft); }

.acquire-btn {
  display: inline-block; margin-top: .6rem;
  font-family: var(--type); font-size: 1.02rem; letter-spacing: .12em;
  color: var(--paper); background: var(--blue);
  padding: 1.1rem 2.6rem; border-radius: 2px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(27,95,170,.25);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.acquire-btn:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,63,115,.3); }

/* ============ footer ============ */
.site-foot { text-align: center; padding: 14vh 8vw 16vh; color: var(--gray); font-size: 1.05rem; }
.foot-x { font-size: 1.6rem; color: var(--ink-soft); margin-bottom: 1rem; }
.site-foot p { margin-bottom: .5rem; font-style: italic; }
.foot-tag { font-family: var(--type); font-style: normal; letter-spacing: .08em; font-size: .92rem; }
.foot-links { margin-top: 2.2rem; display: flex; gap: 2.4rem; justify-content: center; }
.foot-links a, .linklike { color: var(--ink-soft); font-style: italic; text-decoration: none; border-bottom: 1px solid var(--gray-faint); padding-bottom: 2px; }
.foot-links a:hover, .linklike:hover { border-color: var(--ink); }

/* ============ product overlay ============ */
#shop {
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .5s ease;
}
#shop.is-open { opacity: 1; }
.shop-close {
  position: fixed; top: 1.6rem; right: 2rem; z-index: 92;
  font-family: var(--type); font-size: .9rem; letter-spacing: .1em; color: var(--gray-strong);
}
.shop-close:hover { color: var(--ink); }
.shop-inner {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 4vw; max-width: 1200px; margin: 0 auto; padding: 9vh 5vw; align-items: center;
}
.shop-stage { background: var(--paper-dim); border-radius: 4px; overflow: hidden; }
.shop-stage img { width: 100%; height: 72vh; object-fit: contain; padding: 2rem; }
.shop-thumbs { display: flex; gap: .8rem; margin-top: 1rem; }
.shop-thumbs button {
  font-family: var(--type); font-size: .8rem; letter-spacing: .08em; color: var(--gray-strong);
  padding: .5rem 1rem; border: 1px solid var(--gray-faint); border-radius: 2px;
}
.shop-thumbs button.is-active, .shop-thumbs button:hover { color: var(--ink); border-color: var(--ink-soft); }
.shop-copy { max-width: 30em; }
.shop-kicker { font-style: italic; color: var(--blue); font-size: 1.05rem; margin-bottom: .8rem; }
.shop-title { font-family: var(--type); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.shop-words { font-family: var(--type); letter-spacing: .14em; color: var(--ink-soft); margin: .7rem 0 1.6rem; font-size: .95rem; }
.shop-desc { font-size: 1.12rem; line-height: 1.8; color: var(--ink-soft); margin-bottom: 1.6rem; }
.shop-statement { font-family: var(--type); font-size: .98rem; line-height: 1.9; padding-left: 1.2rem; border-left: 2px solid var(--blue); margin-bottom: 1.6rem; }
.shop-statement span { display: block; margin-top: .5rem; color: var(--gray); font-size: .85rem; }
.shop-impact { list-style: none; margin-bottom: 2rem; }
.shop-impact li { padding: .55rem 0; border-bottom: 1px dotted var(--gray-faint); font-size: 1.05rem; color: var(--ink-soft); }
.shop-impact b { font-family: var(--type); margin-right: .6rem; }
.shop-fine { margin-top: 1rem; font-style: italic; color: var(--gray-strong); font-size: .92rem; }

/* ============ bottom bar ============ */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 2.2rem;
  padding: .9rem 2.2rem;
  font-family: var(--type); font-size: .8rem; letter-spacing: .12em; color: var(--gray-strong);
  background: linear-gradient(to top, rgba(251,250,248,.92), rgba(251,250,248,0));
}
#bar button { white-space: nowrap; }
#bar button:hover { color: var(--ink); }
#bar button.is-on { color: var(--ink); }
.bar-spacer { flex: 1; }
/* product callout: hidden until a helper is on screen, then it fades in.
   visibility/opacity (not display) keep the bar layout from shifting. */
.bar-shop {
  color: var(--blue);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
body.helper-onscreen .bar-shop {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.bar-shop:hover { color: var(--blue-deep) !important; }
@media (prefers-reduced-motion: reduce) {
  .bar-shop { transition: opacity .2s ease, visibility .2s; transform: none; }
}

/* ============ responsive / motion ============ */
@media (max-width: 880px) {
  .shop-inner { grid-template-columns: 1fr; padding-top: 12vh; }
  .shop-stage img { height: 48vh; }
  #bar { gap: 1.2rem; padding: .8rem 1.2rem; font-size: .72rem; }
}
@media (max-width: 560px) {
  #bar { gap: .8rem; padding: .7rem .9rem; font-size: .68rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .page-art svg > g { opacity: 1 !important; transform: none !important; transition: none !important; }
  .loader-words span, .hero-title span { animation-duration: .01s !important; }
  .cue-line { animation: none; }
  .page-art.is-loading::after { animation: none; }
}

/* ============ ambient motion (single source for all amb-* classes in the SVGs) ============ */
@media (prefers-reduced-motion: no-preference) {

  /* gate: paused unless the page is near the viewport AND the tab is visible */
  .page-art svg .amb [class^="amb-"],
  .page-art svg .amb [class*=" amb-"] { animation-play-state: paused; }
  .page-art.amb-live svg .amb [class^="amb-"],
  .page-art.amb-live svg .amb [class*=" amb-"] { animation-play-state: running; }
  body.amb-paused .page-art svg .amb * { animation-play-state: paused !important; }

  /* parallax containers — JS writes --plx (-1..1) on the .page-art holder */
  .page-art svg .amb-far { transform: translate3d(0, calc(var(--plx, 0) * 22px), 0); }
  .page-art svg .amb-mid { transform: translate3d(0, calc(var(--plx, 0) * 12px), 0); }

  .amb-cloud { animation: amb-drift var(--amb-dur, 90s) ease-in-out infinite alternate; }
  @keyframes amb-drift {
    from { transform: translate3d(calc(var(--amb-dx, 30px) * -1), 0, 0); }
    to   { transform: translate3d(var(--amb-dx, 30px), 0, 0); }
  }

  .amb-water-1 { animation: amb-water 7s  ease-in-out infinite alternate; }
  .amb-water-2 { animation: amb-water 11s ease-in-out infinite alternate-reverse; }
  .amb-water-3 { animation: amb-water 17s ease-in-out infinite alternate; }
  @keyframes amb-water {
    from { transform: translate3d(calc(var(--amb-dx, 22px) * -1), 0, 0); }
    to   { transform: translate3d(var(--amb-dx, 22px), var(--amb-dy, 0px), 0); }
  }

  /* rain: seamless dash loop — line slope locked to (-11,150), dasharray sums to 150.4 */
  .amb-rain { animation: amb-rain var(--amb-dur, 1.05s) linear infinite; }
  @keyframes amb-rain { to { transform: translate3d(-11px, 150px, 0); } }

  .amb-grit { animation: amb-grit var(--amb-dur, 1.6s) linear infinite; }
  @keyframes amb-grit { to { transform: translate3d(-180px, 8px, 0); } }

  .amb-glow { animation: amb-glow var(--amb-dur, 7s) ease-in-out var(--amb-delay, 0s) infinite; }
  @keyframes amb-glow { 0%,100% { opacity: var(--amb-o, .10); } 50% { opacity: calc(var(--amb-o, .10) * 2.4); } }

  .amb-mote { animation: amb-mote var(--amb-dur, 9s) linear var(--amb-delay, 0s) infinite; }
  @keyframes amb-mote {
    0%   { transform: translate3d(0,0,0); opacity: 0; }
    15%  { opacity: var(--amb-o, .4); }
    80%  { opacity: var(--amb-o, .4); }
    100% { transform: translate3d(var(--amb-dx, 12px), var(--amb-dy, -56px), 0); opacity: 0; }
  }

  .amb-bob { animation: amb-bob var(--amb-dur, 4.5s) ease-in-out var(--amb-delay, 0s) infinite; }
  @keyframes amb-bob { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-5px,0); } }

  .amb-drip { animation: amb-drip var(--amb-dur, 2.8s) cubic-bezier(.5,0,.9,.6) var(--amb-delay,0s) infinite; }
  @keyframes amb-drip { 0% { transform: none; opacity: 0; } 12% { opacity: .7; } 100% { transform: translate3d(0, var(--amb-dy, 34px), 0); opacity: 0; } }

  .amb-twinkle { animation: amb-twinkle var(--amb-dur, 6s) ease-in-out var(--amb-delay, 0s) infinite; }
  @keyframes amb-twinkle { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

  /* gentle pendulum sway: doors, shirts on the line, branches, the cover tree */
  .amb-swing {
    animation: amb-swing var(--amb-dur, 6s) ease-in-out var(--amb-delay, 0s) infinite alternate;
    transform-origin: var(--amb-origin, 50% 0%); transform-box: fill-box;
  }
  @keyframes amb-swing {
    from { transform: rotate(calc(var(--amb-rot, 2deg) * -1)); }
    to   { transform: rotate(var(--amb-rot, 2deg)); }
  }

  /* the pump arm: a tired seesaw with a rest beat */
  .amb-pump {
    animation: amb-pump var(--amb-dur, 3.6s) ease-in-out var(--amb-delay, 0s) infinite;
    transform-origin: var(--amb-origin, 100% 100%); transform-box: fill-box;
  }
  @keyframes amb-pump {
    0%, 100% { transform: rotate(0deg); }
    28% { transform: rotate(var(--amb-rot, -8deg)); }
    52% { transform: rotate(0deg); }
    72% { transform: rotate(calc(var(--amb-rot, -8deg) * .45)); }
  }

  /* a single slow droplet: forms, swells, falls, dies */
  .amb-drop {
    animation: amb-drop var(--amb-dur, 8s) cubic-bezier(.6,0,.9,.55) var(--amb-delay, 0s) infinite;
  }
  @keyframes amb-drop {
    0%, 78% { transform: translate3d(0,0,0) scale(.3); opacity: 0; }
    84% { transform: translate3d(0,0,0) scale(1); opacity: .9; }
    86% { transform: translate3d(0,2px,0) scale(1); opacity: .9; }
    99% { transform: translate3d(0, var(--amb-dy, 130px), 0) scale(.85); opacity: .2; }
    100% { opacity: 0; }
  }

  /* lightning — JS pulses .is-flash on the holder for ~750ms */
  .page-art.is-flash svg .amb-flash { animation: amb-flash .7s ease-out 1 both; }
  .page-art.is-flash svg .amb-bolt  { animation: amb-bolt  .7s linear  1 both; }
  @keyframes amb-flash { 0%{opacity:0} 6%{opacity:.55} 12%{opacity:.06} 20%{opacity:.38} 38%{opacity:.08} 100%{opacity:0} }
  @keyframes amb-bolt  { 0%{opacity:0} 5%{opacity:.95} 16%{opacity:0} 22%{opacity:.75} 36%{opacity:0} 100%{opacity:0} }
}

/* chapter tint: pink watercolor blooming in from the frame edges, scroll-linked opacity.
   Bolder than v1 — at its peak it visibly owns the frame, then hands back to grayscale. */
#chapter-tint {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;
  background:
    radial-gradient(52% 44% at 0% 18%, rgba(255,70,162,.55), transparent 72%),
    radial-gradient(44% 38% at 100% 30%, rgba(229,103,155,.45), transparent 72%),
    radial-gradient(58% 42% at 50% 106%, rgba(237,166,196,.5), transparent 74%),
    radial-gradient(30% 26% at 86% 0%, rgba(255,105,180,.35), transparent 70%);
}

/* ============ the margin garden: branches, blossoms, petals in the unused page sides ============ */
#margin-garden {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: 1; transition: opacity 1s ease;
}
@media (max-width: 1180px) { #margin-garden { display: none; } }  /* margins vanish on narrow screens */
.mg-branch {
  position: absolute; width: 240px; height: auto;
  opacity: 0; transition: opacity 2.4s ease, transform 2.4s ease;
  transform: translateY(14px);
}
.mg-left  { left: -36px; }
.mg-right { right: -36px; transform: translateY(14px) scaleX(-1); }
/* zone choreography: which branches live in which chapter zone */
[data-zone="0"] .mg-z0, [data-zone="1"] .mg-z1, [data-zone="2"] .mg-z2,
[data-zone="3"] .mg-z3, [data-zone="4"] .mg-z4 {
  opacity: 1; transform: translateY(0);
}
[data-zone] .mg-right.mg-z0, [data-zone] .mg-right.mg-z1, [data-zone] .mg-right.mg-z2,
[data-zone] .mg-right.mg-z3, [data-zone] .mg-right.mg-z4 { transform: translateY(14px) scaleX(-1); }
[data-zone="0"] .mg-right.mg-z0, [data-zone="1"] .mg-right.mg-z1, [data-zone="2"] .mg-right.mg-z2,
[data-zone="3"] .mg-right.mg-z3, [data-zone="4"] .mg-right.mg-z4 { opacity: 1; transform: translateY(0) scaleX(-1); }
/* chapter bloom pulse: while the tint peaks, the garden leans in */
#margin-garden.bloom .mg-branch { opacity: 1; }
/* falling petals */
.mg-petal {
  position: absolute; top: -4vh; width: 14px; height: 10px; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mg-branch svg .sway { animation: amb-swing var(--amb-dur, 7s) ease-in-out infinite alternate;
    transform-origin: var(--amb-origin, 10% 90%); transform-box: fill-box; }
  #margin-garden.bloom .mg-petal,
  [data-zone="3"] .mg-petal, [data-zone="4"] .mg-petal {
    animation: mg-fall var(--mg-dur, 16s) linear var(--mg-delay, 0s) infinite;
  }
  @keyframes mg-fall {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    6% { opacity: .85; }
    80% { opacity: .8; }
    100% { transform: translate3d(var(--mg-dx, -60px), 108vh, 0) rotate(var(--mg-rot, 290deg)); opacity: 0; }
  }
}

/* ============ hero: the slow droplet from WATER, + a breathing tree line ============ */
.hero-title span { position: relative; }
.hero-drop {
  position: absolute; left: 56%; bottom: -0.18em; width: 13px; height: 18px;
  pointer-events: none; opacity: 0;
}
.hero-drop svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .is-ready .hero-drop { animation: amb-drop 9s cubic-bezier(.6,0,.9,.55) 2.5s infinite; --amb-dy: 38vh; opacity: 0; }
}

/* ============ reveal choreography v2: pages arrive from the margins and settle ============ */
.page-art svg { transition: transform 1.3s cubic-bezier(.2,.65,.25,1); }
.page-block:nth-of-type(odd) .page-art:not(.is-shown) svg { transform: translate3d(-44px,0,0) rotate(-.5deg); }
.page-block:nth-of-type(even) .page-art:not(.is-shown) svg { transform: translate3d(44px,0,0) rotate(.5deg); }
.page-art.is-shown svg { transform: none; }
.chapter-title { transition: transform 1.2s cubic-bezier(.2,.65,.25,1), opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) {
  .page-art svg { transform: none !important; transition: none !important; }
}

/* one tiny foil accent: the mission rule */
.mission-rule {
  height: 2px;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink-mid) 30%, var(--pink) 50%, var(--pink-soft) 70%, var(--pink-deep) 100%);
}