/* A scroll-scrubbed opening for all three celebration chapters. */
:is(#welcome,#venue,#afterparty) .welcome-stage{position:relative;width:100%;height:100%}
:is(#welcome,#venue,#afterparty).welcome-motion{height:210svh;min-height:0;max-height:none;margin:45px 0 20px;--welcome-progress:0}
:is(#welcome,#venue,#afterparty).welcome-motion .welcome-stage{position:sticky;top:0;height:100svh;min-height:480px;overflow:clip;isolation:isolate}
:is(#welcome,#venue,#afterparty).welcome-motion .estate-number{top:7%;left:7%}
:is(#welcome,#venue,#afterparty).welcome-motion h2{inset:50% 0 auto;width:100%;height:1.1em;padding:0;display:block;font-size:clamp(28px,2.8vw,42px);line-height:1.1;transform:translateY(-50%);z-index:3}
:is(#welcome,#venue,#afterparty).welcome-motion h2 span,:is(#welcome,#venue,#afterparty).welcome-motion h2 em{position:absolute;top:0;left:0;white-space:nowrap;will-change:transform;transform:translate3d(var(--word-x,0px),0,0)}
:is(#welcome,#venue,#afterparty).welcome-motion .frame-primary{left:29%;top:18%;width:42%;height:64%;transform:none;z-index:1;clip-path:inset(0 calc((1 - var(--welcome-progress))*50%) 0 calc((1 - var(--welcome-progress))*50%));will-change:clip-path}
:is(#welcome,#venue,#afterparty).welcome-motion .frame-primary .image-flight{animation:none;transform:scale(calc(1.07 - var(--welcome-progress)*.07));will-change:transform}
:is(#welcome,#venue,#afterparty).welcome-motion .frame-secondary{left:16%;top:72%;bottom:auto;width:22%;height:22%;z-index:2;opacity:var(--welcome-detail,0);transform:translate3d(0,calc((1 - var(--welcome-progress))*45px),0)}
:is(#welcome,#venue,#afterparty).welcome-motion .estate-caption{right:7%;bottom:7%;font-size:24px;opacity:var(--welcome-detail,0)}
@media(max-width:760px){
 :is(#welcome,#venue,#afterparty).welcome-motion{height:190svh;margin-top:30px}
 :is(#welcome,#venue,#afterparty).welcome-motion h2{font-size:clamp(24px,6.4vw,43px);left:0;width:100%;top:48%}
 :is(#welcome,#venue,#afterparty).welcome-motion .frame-primary{left:36%;width:40%;top:25%;height:46%}
 :is(#welcome,#venue,#afterparty).welcome-motion .frame-secondary{left:9%;top:73%;width:36%;height:19%}
 :is(#welcome,#venue,#afterparty).welcome-motion .estate-caption{font-size:20px;width:38%;bottom:8%;right:7%}
}

/* The supporting photographs enter after the titles have opened. */
:is(#venue,#afterparty).welcome-motion .frame-third{left:66%;top:8%;width:24%;height:23%;opacity:var(--welcome-detail,0);transform:translate3d(0,calc((1 - var(--welcome-progress))*-35px),0);z-index:2}
:is(#venue,#afterparty).welcome-motion .image-flight{height:100%;aspect-ratio:auto}
#venue.welcome-motion .estate-caption{left:auto;right:7%}
#venue.welcome-motion .frame-primary img{object-fit:contain}
#venue.welcome-motion .frame-secondary{right:auto}
@media(max-width:760px){
 :is(#venue,#afterparty).welcome-motion .frame-third{left:60%;top:10%;width:32%;height:15%}
 #venue.welcome-motion .estate-caption{width:38%;left:auto;right:7%;bottom:8%}
}

/* Slow, independent paths move the whole photograph without disturbing its reveal. */
:is(#welcome,#venue,#afterparty).welcome-motion{--drift-x:10px;--drift-y:16px}
:is(#welcome,#venue,#afterparty).welcome-motion .estate-frame{animation:celebration-float 23s ease-in-out infinite;will-change:transform,translate}
:is(#welcome,#venue,#afterparty).welcome-motion .frame-secondary{--drift-x:20px;--drift-y:13px;animation-duration:29s;animation-delay:-9s;animation-direction:reverse}
:is(#welcome,#venue,#afterparty).welcome-motion .frame-third{--drift-x:18px;--drift-y:14px;animation-duration:33s;animation-delay:-17s}
#venue.welcome-motion .frame-primary{animation-delay:-7s}
#afterparty.welcome-motion .frame-primary{animation-delay:-14s}
/* Drift belongs to the frame; retain the existing scale on the primary image. */
:is(#welcome,#venue,#afterparty).welcome-motion .image-flight{animation:none}
@keyframes celebration-float{
 0%,100%{translate:calc(var(--drift-x)*-.65) calc(var(--drift-y)*.35)}
 25%{translate:calc(var(--drift-x)*.3) calc(var(--drift-y)*-1)}
 50%{translate:var(--drift-x) calc(var(--drift-y)*-.15)}
 75%{translate:calc(var(--drift-x)*-.15) var(--drift-y)}
}
.setting-paused :is(#welcome,#venue,#afterparty).welcome-motion .estate-frame,
.setting-motion-ready :is(#welcome,#venue,#afterparty).welcome-motion:not(.in-view) .estate-frame{animation-play-state:paused}
@media(max-width:760px){
 :is(#welcome,#venue,#afterparty).welcome-motion .estate-frame{--drift-x:6px;--drift-y:9px}
 :is(#welcome,#venue,#afterparty).welcome-motion .frame-secondary{--drift-x:9px;--drift-y:7px}
 :is(#welcome,#venue,#afterparty).welcome-motion .frame-third{--drift-x:8px;--drift-y:8px}
}
@media(prefers-reduced-motion:reduce){
 :is(#welcome,#venue,#afterparty) .estate-frame{animation:none!important;translate:none!important}
}

/* Wedding day: gates at center, dusk pavilion as the smaller upper-left image. */
#venue.welcome-motion .frame-third{left:9%;top:8%;width:24%;height:auto;aspect-ratio:547/365}
@media(max-width:760px){
 #venue.welcome-motion .frame-third{left:7%;top:10%;width:32%;height:auto;aspect-ratio:547/365}
}