/* Shared living-book presentation. The original paintings are always the base. */
:root{
  color-scheme:dark;
  --paper:var(--night-deep); --paper-raised:var(--night);
  --text:var(--cream); --text-soft:#C9BBD3; --line:rgba(246,235,214,.18);
  --hero-top:var(--night-deep); --hero-bottom:var(--plum);
  --hero-ink:var(--cream); --hero-soft:var(--cream-deep);
  --hero-line:rgba(251,243,227,.24); --gold-ink:var(--mustard);
  --grain-blend:overlay; --grain-opacity:.18;
  --leaf-middle:var(--night); --leaf-outer:var(--lilac);
}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:var(--cream); --paper-raised:var(--cream-deep);
  --text:var(--ink); --text-soft:var(--ink-soft); --line:rgba(43,36,49,.19);
  --hero-top:color-mix(in srgb,var(--lilac) 36%,var(--cream));
  --hero-bottom:color-mix(in srgb,var(--lilac) 12%,var(--cream));
  --hero-ink:var(--plum); --hero-soft:color-mix(in srgb,var(--ink-soft) 85%,var(--ink));
  --hero-line:rgba(58,43,85,.24);
  --gold-ink:color-mix(in srgb,var(--mustard) 35%,var(--ink));
  --grain-blend:multiply; --grain-opacity:.16;
  --leaf-middle:var(--cream-deep); --leaf-outer:var(--lilac);
  --shadow:0 2px 4px rgba(43,36,49,.08),0 14px 34px rgba(43,36,49,.12);
}
.hero,.hero.small,.golden-hero{
  color:var(--hero-ink);
  background:radial-gradient(ellipse at 77% 40%,rgba(232,178,58,.09),transparent 52%),linear-gradient(165deg,var(--hero-top),var(--hero-bottom));
}
.c-epiphany{--ch-ink:var(--night-deep);}
.story-opening{background:var(--hero-top);}
.hero h1,.hero .verse{color:var(--hero-ink);}
.hero .kicker,.hero .lede,.hero .meta span,.hero .back{color:var(--hero-soft);}
.hero .verse,.hero .meta,.hero .back{border-color:var(--hero-line);}
.hero .verse-ref,.hero .back:hover{color:var(--gold-ink);}
.sky .star,.sky .star.lg{color:var(--gold-ink);}
.leaf-middle{fill:var(--leaf-middle);}
.leaf-distant{fill:var(--leaf-outer);}
.thread-invitation{color:var(--hero-ink);}
.thread-invitation:hover,.invitation-star,.invitation-arrow{color:var(--gold-ink);}
.thread-line,.thread-glow,.thread-ghost{stroke:var(--gold-ink);}
.thread-motes,.thread-guide>path{fill:var(--gold-ink);}
.arrival-ornament{color:var(--gold-ink);}
.arrival-ornament span{background:linear-gradient(90deg,transparent,var(--gold-ink));}
:root[data-theme="light"] .golden-hero .living-cover::before{border-color:var(--hero-line);}
:root[data-theme="light"] .golden-hero .living-cover::after{border-color:var(--hero-line);opacity:.45;}

/* A slim, persistent reading rail: controls never cover the illustration or copy. */
.reading-tools{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);}
.reading-tools[hidden]{display:none;}
.reading-tools .tools-inner{max-width:1184px;margin:auto;padding:6px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.tools-note{font:italic .9rem var(--font-book);color:var(--text-soft);}
.tools-actions{display:flex;align-items:center;gap:18px;}
.edition-switch{display:flex;gap:2px;}
.reading-tools button{font:400 .95rem var(--font-book);color:var(--text-soft);border:1px solid transparent;border-radius:3px;background:none;min-height:44px;padding:8px 12px;cursor:pointer;white-space:nowrap;}
.reading-tools button[aria-pressed="true"]{color:var(--text);background:var(--paper-raised);border-color:var(--line);}
.reading-tools button:hover{color:var(--text);border-color:var(--line);}
.reading-tools button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;}
.reading-tools button:disabled{cursor:default;opacity:.65;}
.reading-tools .motion-toggle{border-left:1px solid var(--line);border-radius:0;padding-left:18px;}
.has-reading-tools nav.toc{top:57px;}
.has-reading-tools .hero,.has-reading-tools .hero.small{padding-top:60px;}
.has-reading-tools section[id],.has-reading-tools .chapter[id]{scroll-margin-top:128px;}

.living-scene{position:relative;isolation:isolate;}
.living-scene>img:first-child{position:relative;z-index:0;}
.painting-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;}
.living-scene.scene-playing[data-renderer="mesh"]>.painting-canvas{display:block;}
.living-scene.scene-playing[data-renderer="mesh"]>.scene-layer,
.living-scene.scene-playing[data-renderer="mesh"]>.scene-light,
.living-scene.scene-playing[data-renderer="mesh"]>.scene-spark{display:none;}
.golden-hero .painting-canvas{clip-path:url(#frame-a);}
.living-scene:not(.scene-playing)>.scene-layer,
.living-scene:not(.scene-playing)>.scene-light,
.living-scene:not(.scene-playing)>.scene-spark{visibility:hidden;}
/* Composited cutout fallback for devices without the mesh renderer. */
body .living-scene .hero-plate{clip-path:url(#frame-a);}
body .living-scene .hero-whale{inset:auto;left:20%;top:16%;width:38%;height:auto;z-index:3;}
.scene-playing .hero-whale{animation:whale-drift 6.2s ease-in-out infinite;}
body .living-scene .scene-layer{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:1;}
.scene-layer[hidden]{display:none!important;}
.scene-blink{opacity:0;}
.scene-playing .creation-blink{animation:sun-blink 10.7s step-end infinite;}
.scene-playing .shepherd-blink{animation:shepherd-blink 12.9s step-end infinite;}
.creation-blink{mask-image:radial-gradient(ellipse 12% 3.5% at 50% 29%,#000 77%,transparent 100%);}
.shepherd-blink{mask-image:radial-gradient(ellipse 4.4% 1.4% at 52.2% 53.8%,#000 77%,transparent 100%);}
@keyframes sun-blink{0%,42%,44%,100%{opacity:0;}42.6%,43.6%{opacity:1;}}
@keyframes shepherd-blink{0%,58%,59.9%,100%{opacity:0;}58.5%,59.5%{opacity:1;}}
.scene-light{position:absolute;pointer-events:none;z-index:2;border-radius:50%;background:radial-gradient(circle,rgba(251,243,227,.65),rgba(232,178,58,.28) 25%,transparent 68%);mix-blend-mode:screen;opacity:.35;}
.creation-light{left:29%;top:14%;width:42%;aspect-ratio:1;}
.shepherd-light{left:55%;top:61%;width:20%;aspect-ratio:1;}
.scene-playing .scene-light{animation:scene-warmth 6.8s ease-in-out infinite;}
@keyframes scene-warmth{0%,100%{opacity:.15;}50%{opacity:.5;}}
body .living-scene .sea-fish{inset:auto;left:3%;top:63%;width:18%;height:auto;transform-origin:50% 50%;}
.scene-playing .sea-fish{animation:fish-swim 9s ease-in-out infinite;}
@keyframes fish-swim{0%,100%{transform:translate(0,0) rotate(-3deg);}50%{transform:translate(10%, -8%) rotate(3deg);}}
/* Keep the original people and sun; only the painted water receives a layer. */
body .living-scene .sea-plate,body .living-scene .sea-water{mask-image:linear-gradient(90deg,#000 20%,transparent 41%,transparent 59%,#000 80%);}
body .living-scene .sea-water{z-index:2;}
body .living-scene .sea-fish{z-index:3;}
.scene-playing .sea-water{animation:water-swell 8s ease-in-out infinite;transform-origin:50% 50%;}
@keyframes water-swell{0%,100%{transform:scale(1.008) translateY(0);}50%{transform:scale(1.017) translateY(-.3%);}}
.scene-playing .scene-spark{animation:scene-warmth 5.7s ease-in-out infinite;}
.scene-spark{position:absolute;pointer-events:none;z-index:2;width:5%;aspect-ratio:1;background:radial-gradient(circle,rgba(251,243,227,.8),rgba(232,178,58,.25) 28%,transparent 67%);opacity:.2;}
.scene-spark:nth-child(even){animation-delay:-2.8s;}

/* Each chapter performs inside its painting; the page and its words stay still. */
.advent-blink{mask-image:radial-gradient(ellipse 3.4% 1.8% at 42% 69.3%,#000 75%,transparent);}
.scene-playing .advent-blink{animation:sun-blink 13.7s step-end infinite;}
.advent-star-high{mask-image:radial-gradient(ellipse 13% 10% at 34% 18%,#000 80%,transparent);transform-origin:34% 18%;}
.advent-star-low{mask-image:radial-gradient(ellipse 14% 11% at 50% 31%,#000 80%,transparent);transform-origin:50% 31%;}
.scene-playing .advent-star-high{animation:star-dream 9.7s ease-in-out infinite;}
.scene-playing .advent-star-low{animation:star-dream 12.3s -4s ease-in-out infinite reverse;}
@keyframes star-dream{0%,100%{transform:translateY(0) rotate(-.5deg);}50%{transform:translateY(-.35%) rotate(.5deg);}}
.advent-light{left:44.7%;top:69.5%;width:12%;aspect-ratio:1;}
.scene-expression{opacity:0;}
.christmas-smile{mask-image:radial-gradient(ellipse 4.2% 1.8% at 50% 34.2%,#000 75%,transparent);}
.scene-playing .christmas-smile{animation:sleepy-smile 15s ease-in-out infinite;}
@keyframes sleepy-smile{0%,30%,80%,100%{opacity:0;}42%,64%{opacity:1;}}
.christmas-light{left:40%;top:73%;width:20%;aspect-ratio:1;}
.christmas-curtain{mask-image:linear-gradient(90deg,#000,transparent 20%,transparent 80%,#000);transform-origin:50% 0;}
.scene-playing .christmas-curtain{animation:curtain-breathe 13s ease-in-out infinite;}
@keyframes curtain-breathe{0%,100%{transform:scaleX(1.003);}50%{transform:scaleX(1.012);}}
.giant-blink{mask-image:radial-gradient(ellipse 8.8% 2.2% at 50% 20.5%,#000 80%,transparent);}
.david-blink{mask-image:radial-gradient(ellipse 4.8% 1.5% at 51% 74.3%,#000 80%,transparent);}
.scene-playing .giant-blink{animation:sun-blink 11.3s step-end infinite;}
.scene-playing .david-blink{animation:shepherd-blink 14.9s step-end infinite;}
.holyweek-curtain{mask-image:linear-gradient(90deg,#000,transparent 24%,transparent 76%,#000);transform-origin:50% 0;}
.scene-playing .holyweek-curtain{animation:curtain-breathe 18s ease-in-out infinite;}
.lamb-breath{mask-image:radial-gradient(ellipse 11% 6.5% at 50.5% 90%,#000 80%,transparent);transform-origin:50% 94%;}
.scene-playing .lamb-breath{animation:lamb-sleep 6s ease-in-out infinite;}
@keyframes lamb-sleep{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.018);}}
.easter-blink{mask-image:radial-gradient(ellipse 11.5% 2.5% at 50% 29.2%,#000 80%,transparent);}
.scene-playing .easter-blink{animation:sun-blink 9.3s step-end infinite;}
.easter-flower-left{mask-image:radial-gradient(ellipse 14% 11% at 29.5% 60%,#000 80%,transparent);transform-origin:28% 76%;}
.easter-flower-right{mask-image:radial-gradient(ellipse 9% 9% at 65% 75%,#000 80%,transparent);transform-origin:69% 90%;}
.scene-playing .easter-flower-left{animation:garden-sway 8.5s ease-in-out infinite;}
.scene-playing .easter-flower-right{animation:garden-sway 10.1s -3s ease-in-out infinite reverse;}
@keyframes garden-sway{0%,100%{transform:rotate(-.5deg);}50%{transform:rotate(.7deg);}}
.easter-light{left:63%;top:47%;width:25%;aspect-ratio:1;}
/* Transparent performers are sized to the original painted silhouettes. */
.pentecost-plate{mask-image:radial-gradient(ellipse 18% 13% at 48% 28%,#000 86%,transparent);}
.pentecost-wind{mask-image:radial-gradient(ellipse 34% 23% at 32% 28%,#000 70%,transparent);transform-origin:32% 28%;}
.scene-playing .pentecost-wind{animation:wind-curl 10s ease-in-out infinite;}
@keyframes wind-curl{0%,100%{transform:scale(1.004) rotate(-.25deg);}50%{transform:scale(1.012) rotate(.35deg);}}
body .living-scene .pentecost-dove{inset:auto;left:21.4%;top:7.6%;width:50.9%;height:51.8%;z-index:3;object-fit:fill;transform-origin:52% 40%;}
.scene-playing .pentecost-dove{animation:dove-flight 7.4s ease-in-out infinite;}
@keyframes dove-flight{0%,100%{transform:translate(-.4%,.25%) rotate(-2deg);}50%{transform:translate(.7%,-.6%) rotate(2deg);}}
.new-world-blink{mask-image:radial-gradient(ellipse 5.6% 1.5% at 31.5% 21.3%,#000 80%,transparent);}
.scene-playing .new-world-blink{animation:sun-blink 12.1s step-end infinite;}
.new-world-canopy{mask-image:radial-gradient(ellipse 28% 19% at 51% 38.5%,#000 88%,transparent);transform-origin:50% 65%;}
.scene-playing .new-world-canopy{animation:tree-breathe 12s ease-in-out infinite;}
@keyframes tree-breathe{0%,100%{transform:rotate(-.2deg);}50%{transform:rotate(.3deg);}}
.new-world-river{mask-image:radial-gradient(ellipse 8% 14% at 61% 76%,#000 60%,transparent),radial-gradient(ellipse 9% 11% at 48% 91%,#000 50%,transparent);}
.scene-playing .new-world-river{animation:river-flow 7.8s ease-in-out infinite;}
@keyframes river-flow{0%,100%{transform:translateY(-.2%);}50%{transform:translateY(.35%);}}
.ark-plate{mask-image:linear-gradient(90deg,transparent 24%,#000 29%,#000 70%,transparent 74%);}
body .living-scene .ark-vessel{inset:auto;left:23.2%;top:6.9%;width:52.9%;height:55.7%;z-index:2;object-fit:fill;transform-origin:50% 95%;}
.scene-playing .ark-vessel{animation:ark-rock 9.6s ease-in-out infinite;}
@keyframes ark-rock{0%,100%{transform:translateY(.25%) rotate(-.6deg);}50%{transform:translateY(-.4%) rotate(.6deg);}}
body .living-scene .ark-water{z-index:3;mask-image:linear-gradient(transparent 65%,#000 71%);transform-origin:50% 100%;}
.scene-playing .ark-water{animation:water-swell 8.3s -2s ease-in-out infinite;}
html[data-motion="paused"] .sky .star{animation:none!important;}
html[data-motion="paused"] .scene-layer,html[data-motion="paused"] .scene-light,html[data-motion="paused"] .scene-spark,html[data-motion="paused"] .painting-canvas{display:none!important;}
.sky:not(.sky-active) .star{animation-play-state:paused;}
@media(max-width:760px){
  .reading-tools .tools-inner{padding:6px 12px;justify-content:center;}
  .tools-note{display:none;}.tools-actions{gap:10px;}
  .reading-tools button{font-size:.85rem;padding-inline:10px;}
  .reading-tools .motion-toggle{padding-left:12px;}
  .has-reading-tools .hero,.has-reading-tools .hero.small{padding-top:40px;}
}
@media(prefers-reduced-motion:reduce){.scene-layer,.scene-light,.scene-spark,.painting-canvas{display:none!important;}}
@media print{
  .reading-tools,.scene-layer,.scene-light,.scene-spark,.painting-canvas{display:none!important;}
  .hero,.hero.small,.golden-hero{background:white;color:#222;}
  .hero h1,.hero .verse,.hero .kicker,.hero .lede,.hero .meta span,.hero .back,.hero .verse-ref{color:#222;}
}