/* The original painting remains the fallback and fixes the canvas dimensions. */
.story-sky-extension{position:absolute;inset:0 0 auto;z-index:0;width:100%;height:clamp(550px,90cqw,1300px);max-width:none;object-fit:cover;pointer-events:none;mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
.story-painting{mask-image:linear-gradient(transparent,#000 11cqw,#000 calc(100% - 3cqw),transparent);-webkit-mask-image:linear-gradient(transparent,#000 11cqw,#000 calc(100% - 3cqw),transparent)}
.story-art img{mix-blend-mode:normal}
.sky-underpainting{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:var(--paper);isolation:isolate;mask-image:linear-gradient(#000 0 22%,transparent 28%);-webkit-mask-image:linear-gradient(#000 0 22%,transparent 28%)}
.sky-underpainting img{display:block;width:100%;height:100%;max-width:none}
.river-motion{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;opacity:0}
.river-motion.is-ready{opacity:1}
.sky-cloud-field{position:absolute;inset:0;z-index:2;opacity:0;overflow:hidden;pointer-events:none}
/* Keep the same path and starting positions at 70% of the previous speed. */
.sky-cloud{position:absolute;left:0;display:block;height:auto;max-width:none;animation:painted-cloud-drift calc(var(--cloud-duration) / .7) linear infinite;animation-delay:calc(var(--cloud-delay) / .7);animation-play-state:paused;transform:translate3d(-110%,0,0)}
.cloud-ribbon{top:-.3%;width:27.5%;--cloud-duration:36s;--cloud-delay:-8s}
.cloud-billow{top:.7%;width:35%;--cloud-duration:40s;--cloud-delay:-30s}
.cloud-tuft{top:11.4%;width:14%;--cloud-duration:32s;--cloud-delay:-12s}
.sky-ready .sky-underpainting,.sky-ready .sky-cloud-field{opacity:1}
.sky-running .sky-cloud{animation-play-state:running;will-change:transform}
.river-page .story-header,.river-page .story-chapter{z-index:3}
/* Travel from fully beyond the left edge to fully beyond the right edge.
   Container units follow the painting width without stretching the clouds. */
@keyframes painted-cloud-drift{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(calc(100cqw + 10%),0,0)}}
@media(max-width:760px){
 .sky-underpainting{mask-image:linear-gradient(#000 0 17.5%,transparent 23%);-webkit-mask-image:linear-gradient(#000 0 17.5%,transparent 23%)}
 .cloud-ribbon{top:-.3%;width:57%;--cloud-duration:26s}
 .cloud-billow{top:1.5%;width:50%;--cloud-duration:30s;--cloud-delay:-22s}
 .cloud-tuft{top:12.3%;width:25%;--cloud-duration:24s}
}
@media(prefers-reduced-motion:reduce){
 .river-motion{display:none}
 .sky-underpainting,.sky-cloud-field{display:none}
 .sky-cloud{animation:none;will-change:auto}
}

/* Inline sound in the opening; ordering stays within easy reach. */
.floating-order,.nature-sound{min-height:44px;box-sizing:border-box;border:1px solid #b9812d;border-radius:3px;background:#faf4e8f2;cursor:pointer;box-shadow:0 2px 10px #12434312}
.floating-order{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));z-index:20;border-width:2px;right:max(18px,env(safe-area-inset-right));display:inline-flex;align-items:center;gap:12px;padding:8px 15px;color:#185b70;border-color:#9ec0cb;background:#f2f7f9f2;box-shadow:0 2px 10px #185b7018;font:italic 16px Georgia,serif;text-decoration:none}
.nature-sound{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:20;flex:none;display:grid;place-items:center;width:44px;padding:10px;color:#124343}
.nature-sound[hidden]{display:none}
.nature-sound .sound-waves{display:none}
.nature-sound[aria-pressed="true"] .sound-waves{display:block}
.nature-sound[aria-pressed="true"] .sound-muted{display:none}
.floating-order:hover{color:#124b60;border-color:#87b6c7;background:#eaf4f8}
.nature-sound:hover{border-color:#a84b28}
.floating-order:focus-visible,.nature-sound:focus-visible{outline:2px solid #124343;outline-offset:4px}

/* A narrow travelling reflection, confined to the existing 2px border. */
@property --order-light-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.floating-order::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--order-light-angle),transparent 0deg 260deg,#c3ecf7 285deg,#fff 308deg,#c3ecf7 328deg,transparent 350deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:order-border-reflection 5s linear infinite}
@keyframes order-border-reflection{to{--order-light-angle:360deg}}
@media(prefers-reduced-motion:reduce){.floating-order::after{animation:none;--order-light-angle:45deg}}

.floating-order.opening-order{position:relative;inset:auto;z-index:auto}