/* Motion measured from the supplied Mimio screen recording. Content is visible
   by default; only successfully observed elements receive a pending state. */
.motion-title .motion-word{display:inline-block;color:inherit}
.science h2 .motion-word{color:inherit}
.motion-title.motion-ready:not(.is-visible) .motion-word{opacity:0;transform:translateY(.45em)}
.motion-title.is-visible .motion-word{animation:rise-word-in .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--word-delay,0ms)}
@keyframes rise-word-in{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.motion-title .underline{text-decoration:none;background:linear-gradient(#aa83c6,#aa83c6) left bottom / 100% 2px no-repeat;padding-bottom:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.motion-title.motion-ready:not(.is-visible) .underline{background-size:0% 2px}
.motion-title.is-visible .underline{transition:background-size .65s cubic-bezier(.22,1,.36,1) .45s}
[data-motion].motion-ready{transition:opacity .6s ease,translate .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
[data-motion].motion-ready:not(.is-visible){opacity:0;translate:0 24px}
[data-motion="left"].motion-ready:not(.is-visible){translate:-40px 0}
[data-motion="right"].motion-ready:not(.is-visible){translate:40px 0}
[data-motion].is-visible{opacity:1;translate:none}
.experience-themes strong{font-variant-numeric:tabular-nums}
@media(min-width:701px){
 .experience-wipe-ready{clip-path:inset(0 0 0 0 round 22px);transition:clip-path .7s cubic-bezier(.22,1,.36,1)}
 .experience-wipe-ready:not(.is-open){clip-path:inset(0 50% 0 0 round 22px)}
 .experience-wipe-ready .experience-carousel{position:relative;z-index:1;translate:0 0;transition:translate .7s cubic-bezier(.22,1,.36,1)}
 .experience-wipe-ready:not(.is-open) .experience-carousel{translate:-100% 0}
}
.photo-slides .active{animation:none}
.photo-slides{isolation:isolate}
.photo-slides .photo-outgoing{position:absolute;inset:0;z-index:1}
.photo-indicators button{padding:0}
.photo-indicators button:before,.photo-indicators button:after{content:'';position:absolute;left:0;right:0;top:calc(50% - 1.5px);height:3px}
.photo-indicators button:before{background:var(--cream);transform:scaleX(0);transform-origin:left;z-index:1}
.photo-indicators button.selected:after{background:#fff8}
.photo-indicators button.selected:before{transform:scaleX(var(--photo-progress,1))}
.experience-portrait{position:relative;border-color:transparent}
.experience-portrait:before{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid #ffc36e;border-left-color:transparent;border-right-color:transparent;pointer-events:none;animation:rise-portrait-ring 16s linear infinite;animation-play-state:paused}
.experience-portrait:after{content:'';position:absolute;inset:3px;border-radius:50%;border:1px solid #ffc36e80;pointer-events:none}
.experience-carousel.motion-in-view .experience-portrait:before{animation-play-state:running}
@keyframes rise-portrait-ring{to{transform:rotate(360deg)}}
.header{transition:background .3s,color .3s,box-shadow .3s,height .3s,padding .3s,top .3s}
.wordmark,.wordmark .lifeup-logo{transition:font-size .3s,width .3s}
.arrow,.round>span{transition:transform .28s ease}
.round:not(:disabled):hover>span{transform:scale(.93)}
.support-dots button:before,.switch-dot{transition:background .3s,border-color .3s,box-shadow .3s}
@media(max-width:700px){
 [data-motion="left"].motion-ready:not(.is-visible),[data-motion="right"].motion-ready:not(.is-visible){translate:0 22px}
}
@media(prefers-reduced-motion:reduce){
 .motion-title .motion-word,[data-motion].motion-ready{opacity:1!important;transform:none!important;translate:none!important;animation:none!important;transition:none!important}
 .motion-title .underline{background-size:100% 2px!important}
 .experience-portrait:before{animation:none!important;border-color:#ffc36e}
 .experience-wipe-ready{clip-path:none!important}
 .experience-wipe-ready .experience-carousel{translate:none!important}
}

/* Maintain story progress contrast over the cream third photograph. */
.photo-carousel:has(.photo-slides>img:nth-child(3).active) .photo-indicators button:after{background:#62378226}
.photo-carousel:has(.photo-slides>img:nth-child(3).active) .photo-indicators button:before{background:#62378299}