/* Motion is brief, triggered by entry or interaction, and leaves the text in place. */
.motion-word,.motion-letter{display:inline-block}
.hero-heading h1 em .motion-word{position:relative}
.hero-heading h1 em .motion-word:after{content:'';position:absolute;left:0;right:0;bottom:-.05em;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.hero-heading h1 em:hover .motion-word:after{transform:scaleX(1)}}
.path-link h2{transition:transform .3s ease,color .3s ease}.path-link:hover h2{transform:translateX(4px)}
.photo-plus{transition:background .25s,transform .25s}.photo-button:hover .photo-plus{background:var(--orange);transform:scale(1.08)}
.hero-banner .hero-photo-outgoing{position:absolute;inset:0;height:100%;pointer-events:none;z-index:1}
.hero-label{z-index:2}
.hero-tabs button,.filter-tabs button,.occasion-buttons button{transition:background .25s,border-color .25s,color .25s}
dialog[open]{animation:dialog-arrive .25s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:backdrop-arrive .25s ease}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
/* Keep the real page interactive throughout its entrance. */
@view-transition{navigation:none}
main{animation:content-arrive .25s ease-out}
@keyframes content-arrive{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .path-link:hover h2{transform:none}
}