@layer site {
@media only screen {
.animate.animate--image { max-width:100%; height:auto; }
}
@media only screen and (width >= 60em) and (prefers-reduced-motion:no-preference) {
@keyframes hr-vertical {
0% { transform:scaleY(0); }
100% { transform:scaleY(1); }
}
@keyframes fade-in {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes move-left {
0% { transform:translateX(15%); }
100% { transform:translateX(0%); }
}
@keyframes move-right {
0% { transform:translateX(-15%); }
100% { transform:translateX(0%); }
}
@keyframes move-up {
0% { transform:translateY(15%); }
100% { transform:translateY(0%); }
}
@keyframes move-down {
0% { transform:translateY(-15%); }
100% { transform:translateY(0%); }
}
@keyframes scrub-up {
0% { transform:translateY(5rem); }
100% { transform:translateY(-10rem); }
}
@keyframes scrub-down {
0% { transform:translateY(-10rem); }
100% { transform:translateY(5rem); }
}
@keyframes scale-up {
0% { transform:scale(0.8); }
100% { transform:scale(1); }
}
@keyframes parallax {
to { opacity:0; transform:translateY(20vh); }
}
@keyframes hero-grow {
from { width:calc(100% + 6vw); margin-inline:-3vw; border-radius:var(--border-radius); }
to { width:calc(100% + 10vw); margin-inline:-5vw; border-radius:0; }
}
@supports (animation-timeline: view()) {
.animate {
animation-timeline:view();
animation-range:0 40%;
animation-timing-function:ease-out;
transform-origin:center top;
animation-duration:0;
animation-fill-mode:forwards;
&.animate--move-up { animation-name:move-up; }
&.animate--move-left { animation-name:move-left; }
&.animate--move-right { animation-name:move-right; }
&.animate--move-down { animation-name:move-down; }
&.animate--scale-up { animation-name:scale-up; }
&.animate--fade-in { animation-name:fade-in; }
&.animate--fade-in-up { animation-name:fade-in, move-up; }
&.animate--fade-in-left { animation-name:fade-in, move-left; }
&.animate--fade-in-right { animation-name:fade-in, move-right; }
}
.animate.animate--image { position:relative; overflow:clip; border-radius:var(--border-radius); background:rgba(0,0,0,0.4); }
.animate.animate--image img { animation-timeline:view(); animation-range:entry exit; animation-timing-function:linear; transform-origin:center center; animation-duration:0; animation-fill-mode:forwards; animation-name:scrub-down; height:calc(100% + 10rem); object-fit:cover; }
hr.vertical { transform-origin:top center; animation:hr-vertical linear forwards; animation-fill-mode:both; animation-timeline:view(); animation-range:15% 60%; }
.page-header--screen.animate { overflow:clip; }
.page-header--screen.animate .page-image img,
.page-header--screen.animate .page-image video { animation:parallax linear forwards; animation-timeline:view(); animation-range:exit; }
.page-header--container.animate .page-image { animation:hero-grow linear forwards; animation-timeline:view(); animation-range:exit -7rem 70%; }
}
}
}