/* The river's day (v3). Generated by tools/river.py: edit there, not here. */
.river{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;background:#F7D9A2}
.river>div{position:absolute;left:0;right:0}
.ly-sky{top:0;bottom:0}
.ly-sky-morning{background:linear-gradient(180deg,#EDBB6E 0%,#F7D9A2 38%,#FBEBCF 62%,#F6E6C6 100%)}
.ly-sky-mid{background:linear-gradient(180deg,#BFDCE6 0%,#E3F0F4 40%,#F3F1E2 64%,#E4EADB 100%)}
.ly-sky-dusk{background:linear-gradient(180deg,#2C4A52 0%,#7C6A4E 40%,#E0A23B 62%,#F2BE62 72%,#9DB08F 100%)}
.ly-sky-night{background:linear-gradient(180deg,#0B1A1C 0%,#132A2B 40%,#1C3A33 64%,#24402E 100%)}
.ly-tint{background:#06110F}
.ly-stars{top:0;height:60vh}
.ly-stars svg{display:block}
.ly-sun-a{top:0;bottom:0}
.ly-sun-b{position:absolute;inset:0}
.sun{position:absolute;left:62%;top:26vh;width:44vmin;height:44vmin;margin:-22vmin 0 0 -22vmin;border-radius:50%;background:radial-gradient(circle,#FFF7E2 0,#FFF1D2 16%,rgba(255,236,200,.45) 38%,rgba(255,236,200,0) 70%)}
.ly-far{top:30vh;height:76vh}
.ly-far svg,.ly-near>svg{position:absolute;inset:0;display:block}
.ly-falls{position:absolute;left:50%;top:18.4%;height:21%;width:clamp(22px,2.6vw,44px);margin-left:clamp(-22px,-1.3vw,-11px);border-radius:4px 4px 40% 40%;background:linear-gradient(90deg,rgba(246,251,252,.6),#F6FBFC 40%,#D6ECF2 70%,rgba(214,236,242,.7))}
.mist{position:absolute;left:50%;bottom:-16px;width:clamp(90px,9vw,150px);height:32px;margin-left:calc(clamp(90px,9vw,150px)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(246,251,252,.9),rgba(246,251,252,0))}
.ly-near{top:60vh;height:54vh}
.ly-river{transform-origin:50% 100%}
.ly-loop{position:absolute;left:50%;top:24%;width:min(64vw,560px);height:min(40vw,350px);margin-left:calc(min(64vw,560px)/-2)}
.ly-loop svg{display:block}
.river [data-tl]{will-change:transform,opacity}
@keyframes rv-ly-sky-mid{from{opacity:0}to{opacity:1}}
.river .ly-sky-mid{animation:rv-ly-sky-mid 1000ms linear both paused}
@keyframes rv-ly-sky-dusk{from{opacity:0}to{opacity:1}}
.river .ly-sky-dusk{animation:rv-ly-sky-dusk 1000ms linear both paused}
@keyframes rv-ly-sky-night{from{opacity:0}to{opacity:1}}
.river .ly-sky-night{animation:rv-ly-sky-night 1000ms linear both paused}
@keyframes rv-ly-stars{from{opacity:0}to{opacity:.95}}
.river .ly-stars{animation:rv-ly-stars 1000ms linear both paused}
@keyframes rv-ly-sun-a{from{transform:translate3d(0,14vh,0)}to{transform:translate3d(0,-16vh,0)}}
.river .ly-sun-a{animation:rv-ly-sun-a 1000ms linear both paused}
@keyframes rv-ly-sun-b{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,46vh,0);opacity:0}}
.river .ly-sun-b{animation:rv-ly-sun-b 1000ms linear both paused}
@keyframes rv-ly-far{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-5vh,0)}}
.river .ly-far{animation:rv-ly-far 1000ms linear both paused}
@keyframes rv-ly-near{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-11vh,0)}}
.river .ly-near{animation:rv-ly-near 1000ms linear both paused}
@keyframes rv-ly-river{from{transform:scaleX(1)}to{transform:scaleX(1.45)}}
.river .ly-river{animation:rv-ly-river 1000ms linear both paused}
@keyframes rv-ly-falls{from{opacity:1}to{opacity:0}}
.river .ly-falls{animation:rv-ly-falls 1000ms linear both paused}
@keyframes rv-ly-loop{from{opacity:0}to{opacity:.6}}
.river .ly-loop{animation:rv-ly-loop 1000ms linear both paused}
@keyframes rv-ly-tint{from{opacity:0}to{opacity:.45}}
.river .ly-tint{animation:rv-ly-tint 1000ms linear both paused}
@supports (animation-timeline:view()){
  body{timeline-scope:--day,--ch-1,--ch-2,--ch-3}
  #day{view-timeline:--day block}#ch-1{view-timeline:--ch-1 block}#ch-2{view-timeline:--ch-2 block}#ch-3{view-timeline:--ch-3 block}
  .river .ly-sky-mid{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-2;animation-range:entry 0% entry 80%}
  .river .ly-sky-dusk{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:entry 0% entry 70%}
  .river .ly-sky-night{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:entry 60% contain 35%}
  .river .ly-stars{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:entry 60% contain 35%}
  .river .ly-sun-a{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-1;animation-range:entry 0% exit 100%}
  .river .ly-sun-b{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:entry 0% entry 90%}
  .river .ly-far{animation-play-state:running;animation-duration:auto;animation-timeline:--day;animation-range:cover 0% cover 100%}
  .river .ly-near{animation-play-state:running;animation-duration:auto;animation-timeline:--day;animation-range:cover 0% cover 100%}
  .river .ly-river{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-2;animation-range:entry 0% contain 25%}
  .river .ly-falls{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-2;animation-range:entry 10% entry 80%}
  .river .ly-loop{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:contain 0% contain 45%}
  .river .ly-tint{animation-play-state:running;animation-duration:auto;animation-timeline:--ch-3;animation-range:entry 40% contain 35%}
}
/* chapters sit on the river; text sits on near-opaque panels so every frame stays AA */
@media (prefers-reduced-motion:no-preference){.day>.sec{background:transparent}}
.day .pane{background:rgba(251,246,236,.98);border-radius:28px;padding:clamp(20px,4vw,48px);box-shadow:0 30px 60px -40px rgba(0,0,0,.45)}
#ch-3 .pane{background:rgba(24,46,33,.95)}
.day .ch-art figcaption{display:inline-block;background:rgba(251,246,236,.95);color:var(--fg-2);padding:6px 14px;border-radius:14px}
#ch-3 .ch-art figcaption{background:rgba(24,46,33,.95);color:var(--on-forest-2)}
@media (prefers-color-scheme:dark){.day .pane,.day .ch-art figcaption{background:rgba(17,26,20,.94)}#ch-3 .pane,#ch-3 .ch-art figcaption{background:rgba(20,40,28,.95)}}
/* reduced motion: no backdrop movement at all; a still painted sky per section */
@media (prefers-reduced-motion:reduce){
  .river{display:none}
  #chapters,#ch-1{background:linear-gradient(180deg,#EDBB6E 0%,#F7D9A2 45%,#FBEBCF 100%)}
  #ch-2{background:linear-gradient(180deg,#BFDCE6 0%,#E3F0F4 45%,#E4EADB 100%)}
  #ch-3{background:linear-gradient(180deg,#0B1A1C 0%,#132A2B 45%,#24402E 100%)}
}