/* Stationary backgrounds dissolve; the text, overlay and layout never move. */
.hero-backgrounds{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero:after{z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:2;opacity:1;transform:none}
.hero-anniversary,.hero-motion{z-index:2}
.hero-backgrounds .hero-photo{z-index:0;opacity:0;transition:opacity 2.2s cubic-bezier(.4,0,.2,1)}
.hero-backgrounds .hero-photo.is-visible{opacity:1}
.hero-backgrounds .hero-photo.is-front{z-index:1}
.hero-backgrounds .hero-photo img{object-position:center 22%}
.hero-motion{position:absolute;right:28px;bottom:23px;width:40px;height:40px;display:grid;place-items:center;padding:10px;border:1px solid #ffffff80;border-radius:50%;background:#17171755;color:white;backdrop-filter:blur(6px);transition:background .2s}
.hero-motion:hover{background:#171717b3}
.hero-motion:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.hero-motion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-motion .motion-play{display:none}
.hero-motion[aria-pressed=true] .motion-pause{display:none}
.hero-motion[aria-pressed=true] .motion-play{display:block}
.hero-anniversary{max-width:calc(100% - 140px)}
@media(max-width:760px){.hero-motion{right:20px;bottom:19px;width:36px;height:36px;padding:8px}.hero-backgrounds .hero-photo img{object-position:center top}.hero-anniversary{max-width:calc(100% - 90px)}}
@media(prefers-reduced-motion:reduce){.hero-backgrounds .hero-photo{transition:none}}