@property --escalier-dy {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
@property --rise-y {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.home-escalier {
position: relative;
z-index: var(--escalier-z, 2);
--escalier-course: calc(100 * var(--vp-unit));
margin-top: calc(-1 * var(--escalier-overlap, calc(100 * var(--vp-unit))));
height: calc(100 * var(--vp-unit) + var(--escalier-course));
background: transparent;
pointer-events: none;
}
.home-escalier__sticky {
position: sticky;
top: 0;
height: calc(100 * var(--vp-unit));
overflow: hidden;
}
.home-escalier__fond {
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: calc(100 * var(--vp-unit) + 2px);
background: var(--escalier-depart, transparent);
will-change: transform;
--start: 100;
transform: translateY(calc((var(--start) - var(--escalier-dy)) * var(--vp-unit)));
}
.home-escalier__rect {
position: absolute;
top: 0;
height: calc(100 * var(--vp-unit));
width: calc(25% + 1px);
background: var(--escalier-arrivee, var(--color-gray-100));
will-change: transform;
transform: translateY(calc((var(--start) - var(--escalier-dy)) * var(--vp-unit)));
}
.home-escalier__rect--1 { left: 0;   --start: 100; }
.home-escalier__rect--2 { left: 25%; --start: 120; }
.home-escalier__rect--3 { left: 50%; --start: 140; }
.home-escalier__rect--4 { left: 75%; --start: 160; }
@media (prefers-reduced-motion: reduce) {
.home-escalier {
margin-top: 0;
height: calc(62.5 * var(--vp-unit));
}
.home-escalier__rect,
.home-escalier__fond { transform: none; }
}