/* Light motion layer: nothing is hidden by default, so pages never wait on animation. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease-out}
img.img-pending{opacity:0}
img.img-ready{opacity:1;transition:opacity .45s ease}
main img{background:#e8ede2}
.button,.next-event,.date,.photo-card img{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.date:not(.sold-out):hover,.next-event:hover{transform:translateY(-3px);box-shadow:0 12px 28px #1837211a}
.button:hover{transform:translateY(-1px)}
.photo-card:hover img{transform:scale(1.015)}
/* Hero depth: the active photo slowly zooms; a fading-out photo resets only after it is invisible. */
.hero-slider{overflow:hidden}
.hero-slider>.hero-slide{transform:scale(1);transition:opacity 1.2s ease,transform 0s linear 1.2s;will-change:transform}
.hero-slider>.hero-slide.is-active{transform:scale(1.07);transition:opacity 1.2s ease,transform 8s cubic-bezier(.25,.6,.35,1)}
@starting-style{.hero-slider>.hero-slide.is-active{transform:scale(1)}}
@media(max-width:760px){
 header.forest-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f6f8f2}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 img.img-pending{opacity:1}
 *,*:before,*:after{transition:none!important}
 .hero-slider>.hero-slide,.hero-slider>.hero-slide.is-active{transform:none}
}