/* Illustration effects, independent from each story's exclusive phone-shake effect. */
.review-animated-scene{position:relative;overflow:hidden}
.review-picture-leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.review-picture-leaves img.review-leaf{position:absolute;left:var(--leaf-x);top:-12%;width:var(--leaf-size,3%);height:auto!important;aspect-ratio:auto;opacity:0;animation:review-leaf-fall var(--leaf-duration,18s) linear var(--leaf-delay,0s) infinite}
.review-picture-leaves img.review-leaf{width:var(--leaf-size,3%);max-width:30px;min-width:8px;object-fit:contain}
@keyframes review-leaf-fall{0%{opacity:0;transform:translate(0,-20px) rotate(0)}8%{opacity:.85}45%{transform:translate(20px,180px) rotate(140deg)}85%{opacity:.7}100%{opacity:0;transform:translate(var(--leaf-drift,50px),480px) rotate(300deg)}}
/* The beam and ripples are visible at phone widths; only overlays move. */
.review-picture-light{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.review-picture-light::before{content:"";position:absolute;inset:-10% -50%;background:linear-gradient(115deg,transparent 32%,#ffdf9480 43%,#fff4c3b3 48%,#ffdf9466 53%,transparent 64%);opacity:.55;animation:review-window-light 5s ease-in-out infinite alternate}
@keyframes review-window-light{from{transform:translateX(-18%);opacity:.4}to{transform:translateX(18%);opacity:.7}}
.review-picture-water,.miracle-scene .miracle-water-light{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:1;animation:none;clip-path:var(--water-region,polygon(0% 70%,100% 70%,100% 100%,0% 100%));mix-blend-mode:normal}
.review-picture-water::before,.miracle-scene .miracle-water-light::before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse 17px 3px at 50% 50%,#fffbdacc 28%,#a3dfef80 58%,transparent 72%);background-size:54px 19px;opacity:.55;animation:review-ripple-flow 3.6s linear infinite}
.review-picture-water::after,.miracle-scene .miracle-water-light::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff7c866 42%,#ffffff99 48%,transparent 62%);opacity:.45;animation:review-pool-shimmer 4s ease-in-out infinite alternate}
@keyframes review-ripple-flow{0%{background-position:0 0;opacity:.4}50%{opacity:.65}100%{background-position:54px 19px;opacity:.4}}
@keyframes review-pool-shimmer{from{transform:translateX(-25%);opacity:.25}to{transform:translateX(25%);opacity:.55}}
.scene-03-b{--water-region:polygon(67% 53%,96% 53%,85% 71%,68% 71%,61% 60%)}
.scene-04-b{--water-region:polygon(61% 44%,69% 44%,66% 72%,100% 83%,100% 100%,34% 100%,45% 94%,63% 75%)}
.scene-10-b{--water-region:polygon(75% 48%,100% 47%,100% 100%,79% 100%,73% 76%)}
.scene-13-b{--water-region:polygon(43% 17%,82% 17%,76% 21%,51% 21%)}
.scene-14-b{--water-region:polygon(0% 49%,30% 49%,23% 80%,72% 83%,91% 72%,100% 55%,100% 100%,0% 100%)}
.scene-17-b{--water-region:polygon(0% 90%,64% 89%,67% 82%,100% 76%,100% 100%,0% 100%)}
@media(max-width:600px){@keyframes review-leaf-fall{0%{opacity:0;transform:translate(0,-10px) rotate(0)}8%{opacity:.85}45%{transform:translate(12px,90px) rotate(140deg)}85%{opacity:.7}100%{opacity:0;transform:translate(var(--leaf-drift,30px),270px) rotate(300deg)}}}
@media(prefers-reduced-motion:reduce){.review-leaf,.review-picture-light,.review-picture-water{animation:none!important}.review-picture-leaves,.review-picture-light,.review-picture-water{display:none}}

@media(prefers-reduced-motion:reduce){.review-picture-light::before,.review-picture-water::before,.review-picture-water::after,.miracle-scene .miracle-water-light::before,.miracle-scene .miracle-water-light::after{animation:none!important}.miracle-scene .miracle-water-light{display:none}}
/* Water uses original image pixels; no tinted panel, hard clip, or moving rectangle. */
.miracle-scene .review-picture-water,.miracle-scene .miracle-water-light{clip-path:none;mix-blend-mode:normal;background:none;animation:none;opacity:1;z-index:1}
.miracle-scene .review-picture-water::before,.miracle-scene .review-picture-water::after,.miracle-scene .miracle-water-light::before,.miracle-scene .miracle-water-light::after{content:none;display:none}
.water-pixel-motion{display:none;width:100%;height:100%;pointer-events:none}
.water-pixel-motion[data-ready="true"]{display:block}
.miracle-scene .catch-fish-jump,.miracle-scene .review-picture-leaves{z-index:2}
.roof-light-beam{position:absolute;pointer-events:none;z-index:1;left:31%;top:20%;width:55%;height:79%;transform-origin:50% 0;animation:roof-beam-shimmer 4.2s ease-in-out infinite alternate}
.roof-light-beam svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes roof-beam-shimmer{from{transform:scale(.88,.93);opacity:.5}to{transform:scale(1.12,1.04);opacity:.85}}
.hearing-butterfly{position:absolute;z-index:3;left:52%;top:28%;width:7%;pointer-events:none;animation:hearing-hover 5s ease-in-out infinite alternate}
.hearing-butterfly-sprite{display:block;width:100%;aspect-ratio:3/4;background:url('/assets/jacob5-es/butterfly-flap-sprite.webp') no-repeat;background-size:400% 100%;transform:scaleX(-1);animation:hearing-wing-frames .6s steps(1,end) infinite}
@keyframes hearing-wing-frames{0%,100%{background-position:0 0;clip-path:none}25%{background-position:33.333333% 0;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%,0 50%,20% 50%)}50%{background-position:66.666667% 0;clip-path:none}75%{background-position:100% 0;clip-path:none}}
@keyframes hearing-hover{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(12%,-18%) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.roof-light-beam,.hearing-butterfly,.hearing-butterfly-sprite{animation:none!important}.miracle-scene .review-picture-water,.miracle-scene .miracle-water-light{display:none}.roof-light-beam{opacity:.4}}

/* Noah ark rain reused on the storm illustration. */
.miracle-rain{position:absolute;inset:-10% 0 0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}.miracle-rain i{position:absolute;top:var(--top);left:var(--left);width:var(--width);height:var(--length);border-radius:999px;background:linear-gradient(180deg,transparent,rgba(226,247,255,.9) 24%,rgba(185,226,247,.72) 78%,transparent);transform:rotate(13deg);opacity:var(--opacity);filter:blur(var(--blur));animation:miracle-rain-drop var(--speed) linear var(--delay) infinite}.miracle-rain i.mid{width:1.5px}.miracle-rain i.near{box-shadow:0 0 3px #dff7ff88}.miracle-rain i.far{width:1px}@keyframes miracle-rain-drop{0%{transform:translate3d(18px,-18vh,0) rotate(13deg);opacity:0}12%{opacity:var(--opacity)}76%{opacity:var(--opacity)}100%{transform:translate3d(-28px,118vh,0) rotate(13deg);opacity:0}}

.miracle-rain{z-index:3}
.storm-lightning{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;animation:storm-bolt-light 8s ease-in-out infinite}
.storm-lightning svg{display:block;width:100%;height:100%}
@keyframes storm-bolt-light{0%,42%,55%,100%{opacity:0}45%{opacity:.95}49%{opacity:.35}}
.miracle-bees{position:absolute;inset:0;z-index:3;pointer-events:none}
.miracle-bee{position:absolute;left:var(--bee-x);top:var(--bee-y);width:4%;animation:miracle-bee-float var(--bee-time) ease-in-out var(--bee-delay) infinite}
.miracle-bee .honey-bee-sprite{transform:scaleX(-1)}
@keyframes miracle-bee-float{0%,100%{transform:translate(0,0) rotate(-5deg)}30%{transform:translate(-60%,-20%) rotate(4deg)}65%{transform:translate(-110%,15%) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.miracle-rain,.storm-lightning{display:none}.miracle-bee,.miracle-bee .honey-bee-sprite{animation:none!important}}

/* Reuse the metal glints and insect sprites within these illustrations. */
.miracle-scene .gold-shine-layer{z-index:3}
.mother-butterfly{left:52%;top:25%;width:6%}