/* Every miracle has a newly generated cutout and its own movement sequence. */
.miracle-scene{position:relative;overflow:hidden}.miracle-scene>img{display:block;width:100%;height:auto}.miracle-water-light{position:absolute;inset:48% 0 0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#fff8 48%,transparent 60%);opacity:.1;animation:miracle-water-ambient 9s ease-in-out infinite alternate}
@keyframes miracle-water-ambient{from{transform:translateX(-25%)}to{transform:translateX(25%)}}
.miracle-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:miracle-cleanup 6.5s linear both}.miracle-sprite{display:block;width:min(62vw,520px);height:min(66vh,570px);object-fit:contain;filter:drop-shadow(0 6px 14px #12253a22);transform-origin:50% 80%}
@keyframes miracle-cleanup{0%,91%{opacity:1}100%{opacity:0}}
.miracle-fx-01 .miracle-sprite{animation:cana-six-jars 6.5s ease-in-out both}
@keyframes cana-six-jars{0%{opacity:0;transform:translateY(35vh) scale(.65);filter:brightness(.8)}25%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}55%{transform:rotate(-3deg);filter:brightness(1.15) drop-shadow(0 0 14px #b75e6790)}78%,100%{transform:rotate(0);filter:brightness(1)}}
.miracle-fx-02 .miracle-sprite{animation:official-family-embrace 6.5s ease-out both}
@keyframes official-family-embrace{0%{opacity:0;transform:scale(.45)}22%{opacity:1;transform:scale(1.06)}40%{transform:scale(.98) rotate(-1deg)}64%{transform:scale(1.03) rotate(1deg)}86%,100%{transform:scale(1)}}
.miracle-fx-03 .miracle-sprite{animation:bethesda-mat-unroll 6.5s ease-in-out both;transform-origin:0 50%}
@keyframes bethesda-mat-unroll{0%{opacity:0;transform:translateX(22%) scaleX(.12) rotate(-12deg)}18%{opacity:1;transform:translateX(15%) scaleX(.35) rotate(-8deg)}55%{transform:translateX(0) scaleX(1) rotate(0)}75%{transform:translateX(0) scaleX(1.04) rotate(0)}100%{transform:scaleX(1)}}
.miracle-fx-04 .miracle-sprite{animation:galilee-net-lift 6.5s ease-in-out both;transform-origin:50% 0}
@keyframes galilee-net-lift{0%{opacity:0;transform:translateY(75vh) rotate(-10deg)}35%{opacity:1;transform:translateY(0) rotate(8deg)}52%{transform:translateY(-4vh) rotate(-5deg)}70%{transform:translateY(0) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
.miracle-fx-05 .miracle-sprite{animation:leper-welcome-light 6.5s ease-out both}
@keyframes leper-welcome-light{0%{opacity:0;transform:translateY(10vh) scale(.85);filter:brightness(.6)}32%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}65%{filter:brightness(1.15) drop-shadow(0 0 28px #f6df8c99)}100%{filter:brightness(1) drop-shadow(0 0 6px #f6df8c66)}}
.miracle-fx-06 .miracle-sprite{animation:roof-four-ropes-lower 6.5s cubic-bezier(.25,.1,.25,1) both;transform-origin:50% 0}
@keyframes roof-four-ropes-lower{0%{transform:translateY(-100vh) rotate(-4deg)}40%{transform:translateY(-6vh) rotate(2deg)}58%{transform:translateY(0) rotate(-1deg)}73%{transform:translateY(0) rotate(.5deg)}100%{transform:translateY(0) rotate(0)}}
.miracle-fx-07 .miracle-sprite{animation:sabbath-hand-open 6.5s ease-in-out both;transform-origin:50% 100%}
@keyframes sabbath-hand-open{0%{opacity:0;transform:scaleX(.35) scaleY(.65) rotate(-30deg)}30%{opacity:1;transform:scaleX(.72) scaleY(.85) rotate(-15deg)}65%{transform:scale(1) rotate(7deg)}85%,100%{transform:scale(1) rotate(0)}}
.miracle-fx-08 .miracle-sprite{animation:centurion-helmet-settle 6.5s ease-in-out both}
@keyframes centurion-helmet-settle{0%{opacity:0;transform:perspective(700px) rotateY(-65deg) translateY(-10vh)}32%{opacity:1;transform:perspective(700px) rotateY(12deg) translateY(0)}50%{transform:perspective(700px) rotateY(-8deg)}70%{transform:perspective(700px) rotateY(0);filter:brightness(1.22)}100%{transform:perspective(700px) rotateY(0);filter:brightness(1)}}
.miracle-fx-09 .miracle-sprite{animation:nain-mother-reunion 6.5s ease-in-out both}
@keyframes nain-mother-reunion{0%{opacity:0;transform:translateX(-35vw) rotate(-5deg)}35%{opacity:1;transform:translateX(0) rotate(0)}55%{transform:translateY(-1vh) scale(1.05)}80%,100%{transform:translateY(0) scale(1)}}
.miracle-fx-10 .miracle-sprite{animation:storm-boat-still 6.5s linear both;transform-origin:50% 90%}
@keyframes storm-boat-still{0%{transform:translateY(12vh) rotate(-16deg)}12%{transform:translateY(5vh) rotate(16deg)}24%{transform:translateY(8vh) rotate(-12deg)}38%{transform:translateY(3vh) rotate(9deg)}50%{transform:translateY(4vh) rotate(-4deg)}65%{transform:translateY(2vh) rotate(1deg)}85%,100%{transform:translateY(2vh) rotate(0)}}
.miracle-fx-11 .miracle-sprite{animation:faith-hand-reach-hem 6.5s ease-in-out both;transform-origin:20% 80%}
@keyframes faith-hand-reach-hem{0%{opacity:0;transform:translate(-22vw,15vh) rotate(-18deg)}36%{opacity:1;transform:translate(0,0) rotate(0)}57%{transform:scale(1.08);filter:brightness(1.18)}77%,100%{transform:scale(1);filter:brightness(1)}}
.miracle-fx-12 .miracle-sprite{animation:jairus-girl-rise 6.5s ease-out both;transform-origin:50% 100%}
@keyframes jairus-girl-rise{0%{opacity:0;transform:translateY(30vh) scaleY(.65)}25%{opacity:1;transform:translateY(12vh) scaleY(.8)}52%{transform:translateY(0) scaleY(1)}72%{transform:translateY(-2vh) scaleY(1.03)}100%{transform:translateY(0) scaleY(1)}}
.miracle-fx-13 .miracle-sprite{animation:five-loaves-basket-abundance 6.5s ease-in-out both}
@keyframes five-loaves-basket-abundance{0%{opacity:0;transform:translateY(20vh) scale(.2)}20%{opacity:1;transform:translateY(0) scale(.55)}42%{transform:scale(.75) rotate(-3deg)}62%{transform:scale(1) rotate(3deg)}82%,100%{transform:scale(1.06) rotate(0)}}
.miracle-fx-14 .miracle-sprite{animation:water-peter-held 6.5s ease-in-out both}
@keyframes water-peter-held{0%{opacity:0;transform:translate(-30vw,18vh) rotate(-8deg)}28%{opacity:1;transform:translate(-10vw,10vh) rotate(4deg)}48%{transform:translate(0,3vh) rotate(-2deg)}65%{transform:translate(6vw,0) rotate(0)}100%{transform:translate(10vw,-1vh) rotate(0)}}
.miracle-fx-15 .miracle-sprite{animation:canaanite-family-together 6.5s ease-in-out both}
@keyframes canaanite-family-together{0%{opacity:0;transform:translateX(30vw) scale(.8)}35%{opacity:1;transform:translateX(0) scale(1)}50%{transform:rotate(2deg) scale(1.02)}65%{transform:rotate(-2deg) scale(1.02)}80%,100%{transform:rotate(0) scale(1)}}
.miracle-fx-16 .miracle-sprite{animation:decapolis-listen-joy 6.5s ease-in-out both;transform-origin:45% 65%}
@keyframes decapolis-listen-joy{0%{opacity:0;transform:scale(.8) rotate(-8deg)}25%{opacity:1;transform:scale(1) rotate(0)}42%{transform:rotate(-5deg);filter:brightness(1.04)}60%{transform:rotate(3deg);filter:brightness(1.13)}80%,100%{transform:rotate(0);filter:brightness(1)}}
.miracle-fx-17 .miracle-sprite{animation:siloam-wash-and-look 6.5s ease-in-out both;transform-origin:50% 75%}
@keyframes siloam-wash-and-look{0%{opacity:0;transform:translateY(12vh) rotate(12deg)}25%{opacity:1;transform:translateY(3vh) rotate(8deg)}45%{transform:translateY(0) rotate(-3deg);filter:brightness(1.1)}65%{transform:rotate(2deg)}85%,100%{transform:rotate(0);filter:brightness(1)}}
.miracle-fx-18 .miracle-sprite{animation:ten-travelers-gratitude 6.5s ease-out both}
@keyframes ten-travelers-gratitude{0%{opacity:0;transform:translateY(8vh) scale(.3)}25%{opacity:1;transform:translateY(0) scale(.65)}48%{transform:scale(.9)}68%{transform:scale(1.06);filter:brightness(1.13)}85%,100%{transform:scale(1);filter:brightness(1)}}
.miracle-fx-19 .miracle-sprite{animation:lazarus-doorway-life 6.5s ease-out both}
@keyframes lazarus-doorway-life{0%{opacity:0;clip-path:inset(0 48% 0 48%);transform:scale(.75)}25%{opacity:1;clip-path:inset(0 30% 0 30%);transform:scale(.85)}55%{clip-path:inset(0);transform:scale(1)}80%,100%{clip-path:inset(0);transform:scale(1.04)}}
.miracle-fx-20 .miracle-sprite{animation:bartimaeus-cloak-forward 6.5s ease-in-out both;transform-origin:50% 90%}
@keyframes bartimaeus-cloak-forward{0%{opacity:0;transform:translateX(-42vw) rotate(-3deg)}20%{opacity:1;transform:translateX(-22vw) rotate(3deg)}40%{transform:translateX(-5vw) rotate(-2deg)}60%{transform:translateX(10vw) rotate(2deg)}80%{transform:translateX(22vw) rotate(-1deg)}100%{transform:translateX(28vw) rotate(0)}}
.miracle-burst.reduced-motion{animation:miracle-cleanup 6.5s linear both}.miracle-burst.reduced-motion .miracle-sprite{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){.miracle-water-light{animation:none}.miracle-burst .miracle-sprite{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}}
@media(max-width:640px){.miracle-sprite{width:88vw;height:60vh}}

/* A silver Galilee fish leaps out of the foreground net in illustration 04-b. */
.catch-fish-jump{position:absolute;inset:0;pointer-events:none;opacity:0;animation:catch-net-leap 7.5s linear infinite}
.scene .catch-fish-jump img{position:absolute;left:44%;top:76%;width:9%;height:auto;aspect-ratio:auto;object-fit:contain;animation:catch-fish-turn 7.5s linear infinite;transform-origin:50% 50%;filter:drop-shadow(0 2px 2px #10293b33)}
@keyframes catch-net-leap{0%,11%{opacity:0;transform:translate(0,0)}12%{opacity:1;transform:translate(0,0)}18%{opacity:1;transform:translate(3%,-16%)}24%{opacity:1;transform:translate(7%,-23%)}30%{opacity:1;transform:translate(11%,-16%)}36%{opacity:1;transform:translate(15%,0)}37%,100%{opacity:0;transform:translate(15%,0)}}
@keyframes catch-fish-turn{0%,12%{transform:rotate(-45deg)}18%{transform:rotate(-30deg)}24%{transform:rotate(0)}30%{transform:rotate(35deg)}36%,100%{transform:rotate(60deg)}}
@media(prefers-reduced-motion:reduce){.catch-fish-jump,.catch-fish-jump img{animation:none!important}.catch-fish-jump{display:none}}

/* Keep picture motion on the overlays, not on the entire illustration. */
.miracle-scene>img{animation:none;transform:none;aspect-ratio:auto}