/* 採用②。木戸より奥、水面の付近から上る薄い湯気。 */
.fv-steam{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.48;transition:opacity 1.6s ease;mask-image:linear-gradient(transparent 16%,#000 40%,#000 69%,transparent 93%)}
.fv-steam svg{position:absolute;width:130%;height:100%;max-width:none;left:-15%;top:0;overflow:visible}
.fv-steam .vapour-a{animation:steam-rise-a 14s ease-in-out infinite alternate}
.fv-steam .vapour-b{animation:steam-rise-b 19s ease-in-out infinite alternate}
.fv-steam .vapour-c{animation:steam-rise-c 11s ease-in-out infinite alternate}
[data-playing="true"] .fv-steam,[data-playing="paused"] .fv-steam{opacity:0}
@keyframes steam-rise-a{from{transform:translate(-20px,48px) scaleX(.96);opacity:.2}to{transform:translate(38px,-55px) scaleX(1.08);opacity:.62}}
@keyframes steam-rise-b{from{transform:translate(30px,18px);opacity:.48}to{transform:translate(-24px,-68px);opacity:.16}}
@keyframes steam-rise-c{from{transform:translate(10px,35px);opacity:.35}to{transform:translate(-35px,-42px);opacity:.65}}
@media(prefers-reduced-motion:reduce){.fv-steam{display:none}}
.plan-none .fv-steam{display:none}

.fv-steam g[class]{animation-play-state:paused}
.fv-steam[data-running="true"] g[class]{animation-play-state:running}