.s-elev-1 { box-shadow: var(--elev-1), var(--elev-ring); }
.s-elev-2 { box-shadow: var(--elev-2), var(--elev-ring); }
.s-elev-3 { box-shadow: var(--elev-3), var(--elev-ring); }
.s-elev-4 { box-shadow: var(--elev-4), var(--elev-ring); }
.s-raised {
background: var(--surface-raised);
box-shadow: var(--elev-2), var(--elev-ring);
}
.s-lift {
position: relative;
transform: translateZ(0);
transition: transform var(--t-state) var(--ease);
}
.s-lift::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: var(--elev-3);
opacity: 0;
transition: opacity var(--t-state) var(--ease);
pointer-events: none;
}
.s-lift:hover { transform: translateY(-4px); }
.s-lift:hover::after { opacity: 1; }
@keyframes s-rise {
from { opacity: 0; transform: translate3d(0, 22px, 0); }
to   { opacity: 1; transform: none; }
}
@keyframes s-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes s-scale-in {
from { opacity: 0; transform: scale(0.965); }
to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-rise], [data-fade], [data-scale] {
animation-timeline: view();
animation-range: entry 0% cover 32%;
animation-fill-mode: both;
animation-duration: 1ms;
}
[data-rise]  { animation-name: s-rise; }
[data-fade]  { animation-name: s-fade; }
[data-scale] { animation-name: s-scale-in; }
}
}
@supports not (animation-timeline: view()) {
.s-m-armed[data-rise]  { opacity: 0; transform: translate3d(0, 22px, 0); }
.s-m-armed[data-fade]  { opacity: 0; }
.s-m-armed[data-scale] { opacity: 0; transform: scale(0.965); }
[data-rise], [data-fade], [data-scale] {
transition: opacity var(--t-page) var(--ease),
transform var(--t-page) var(--ease);
}
}
@property --s-progress {
syntax: '<number>';
inherits: true;
initial-value: 0.5;
}
.s-parallax { overflow: hidden; }
.s-parallax > img,
.s-parallax > .s-parallax__layer {
height: 112%;
width: 100%;
object-fit: cover;
will-change: transform;
transform: translate3d(0, calc((var(--s-progress) - 0.5) * var(--s-depth, 6%) * -2), 0);
}
.s-depth-sm { --s-depth: 3%; }
.s-depth-md { --s-depth: 6%; }
.s-depth-lg { --s-depth: 10%; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.s-parallax > img,
.s-parallax > .s-parallax__layer {
animation: s-parallax-drive linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
@keyframes s-parallax-drive {
from { --s-progress: 0; }
to   { --s-progress: 1; }
}
.s-sticky {
display: grid;
gap: clamp(var(--space-layout-2), 5vw, var(--space-layout-4));
}
@media (min-width: 900px) {
.s-sticky { grid-template-columns: 1fr 1fr; align-items: start; }
.s-sticky__pin {
position: sticky;
top: calc(68px + var(--space-layout-1));
}
}
.s-sticky__steps { display: grid; gap: var(--space-layout-3); }
.s-sticky__step { padding-block: var(--space-layout-1); }
.s-progress {
position: fixed;
inset: 0 0 auto 0;
height: 3px;
z-index: 60;
background: var(--accent);
transform-origin: 0 50%;
transform: scaleX(var(--s-scroll, 0));
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.s-progress {
animation: s-progress-drive linear both;
animation-timeline: scroll(root block);
}
}
}
@keyframes s-progress-drive {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
.s-veil { position: relative; isolation: isolate; }
.s-veil > * { position: relative; z-index: 1; }
.s-veil::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60% 50% at 50% 0%,
color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
@media print {
[data-rise], [data-fade], [data-scale],
.s-parallax > img, .s-parallax > .s-parallax__layer {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.s-parallax > img, .s-parallax > .s-parallax__layer { height: 100%; }
.s-progress { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
[data-rise], [data-fade], [data-scale] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.s-parallax > img,
.s-parallax > .s-parallax__layer {
animation: none !important;
transform: none !important;
height: 100%;
will-change: auto;
}
.s-progress { display: none; }
.s-lift:hover { transform: none; }
}