/* BACKGROUND — parallax garden layers + falling petals.
   Layers are moved by js/parallax.js using transform only. */

.bg{position:fixed;left:0;right:0;top:0;height:135vh;z-index:-1;background:url(../assets/hero.webp) center/cover no-repeat;pointer-events:none;will-change:transform}
#bg{opacity:.11}
#bg2{opacity:.05;transform-origin:50% 0;scale:-1 1;background-position:30% center}

#petals{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;contain:strict}
.petal{position:absolute;top:-20px;border-radius:80% 10%;opacity:.7;animation:fall linear infinite;will-change:transform}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--sp))}}

/* js/main.js adds body.paused when the tab is hidden */
body.paused .petal,body.paused .shine,body.paused .star::before,body.paused .star::after,
body.paused .pin::before,body.paused .pin::after{animation-play-state:paused}