/* Large translucent watercolor blooms sit in the paper, behind the content. */
.background-hearts{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none!important;user-select:none;contain:layout paint}
.background-hearts *{pointer-events:none!important}
.delivery>.background-hearts{left:calc((100vw - 100%)/-2);right:calc((100vw - 100%)/-2)}
.background-heart{position:absolute;left:var(--heart-x,50%);top:var(--heart-y,50%);width:var(--heart-size,215px);height:var(--heart-size,215px);opacity:0;transform-origin:50% 65%;animation:background-heart-bloom var(--heart-time,8s) var(--heart-delay,0s) ease-in-out infinite both;animation-play-state:paused}
.background-heart>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:saturate(.6) brightness(1.06);user-select:none;-webkit-user-drag:none}
.love-in-view>.background-hearts>.background-heart{animation-play-state:running}
.love-paused .background-hearts:not(.is-opening)>.background-heart{animation-play-state:paused!important}
.ap-opening-active [data-love-garden]>.background-hearts,.ap-opening-pending [data-love-garden]>.background-hearts,.film-hero>.background-hearts,#home>.background-hearts{visibility:hidden}
/* The ribbon overlay has its own motion lifecycle: opening the parcel pauses
   the page's balloons, but must not pause its own watercolor background. */
.ap-opening[data-theme="pocketful"]>.background-hearts{z-index:-1}
.ap-opening[data-theme="pocketful"]>.background-hearts>.background-heart{animation-play-state:running}
.ap-opening[data-stage="film"]>.background-hearts,.ap-opening[data-stage="leaving"]>.background-hearts{opacity:0;transition:opacity .5s}
.ap-opening[data-stage="film"]>.background-hearts>.background-heart,.ap-opening[data-stage="leaving"]>.background-hearts>.background-heart,.background-hearts.is-document-hidden>.background-heart{animation-play-state:paused!important}
@keyframes background-heart-bloom{
  0%,8%{opacity:0;transform:translate3d(-50%,calc(-50% + 12px),0) rotate(var(--heart-angle,-7deg)) scale(.76)}
  29%,54%{opacity:var(--heart-opacity,.36);transform:translate3d(calc(-50% + var(--heart-drift,7px)),-50%,0) rotate(calc(var(--heart-angle,-7deg) + 4deg)) scale(1)}
  82%,100%{opacity:0;transform:translate3d(calc(-50% + var(--heart-drift,7px)),calc(-50% - 27px),0) rotate(calc(var(--heart-angle,-7deg) + 8deg)) scale(1.09)}
}
@media(max-width:600px){.background-heart{width:var(--heart-mobile-size,150px);height:var(--heart-mobile-size,150px)}}
@media(prefers-reduced-motion:reduce){.background-hearts{display:none}.background-heart{animation:none}}