@media (prefers-reduced-motion: no-preference) {
[data-reveal] {
opacity: 0;
will-change: opacity, transform;
transition:
opacity 720ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
transform 820ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}
[data-reveal="fade-up"] {
transform: translate3d(0, 28px, 0);
}
[data-reveal="fade"] { }
[data-reveal="scale-in"] {
transform: scale(0.94);
}
[data-reveal="slide-right"] {
transform: translate3d(-36px, 0, 0);
}
[data-reveal="slide-left"] {
transform: translate3d(36px, 0, 0);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
} [data-reveal-glow] {
position: relative;
}
[data-reveal-glow]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
transition: box-shadow 1200ms ease-out;
}
[data-reveal-glow].is-revealed::after {
box-shadow: 0 0 40px 8px rgba(37, 99, 235, 0.18);
animation: lp-glow-fade 1800ms ease-out 600ms forwards;
}
@keyframes lp-glow-fade {
to { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
} [data-reveal-shine] {
position: relative;
overflow: hidden;
}
[data-reveal-shine]::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
110deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
pointer-events: none;
}
[data-reveal-shine].is-revealed::before {
animation: lp-shine 1400ms ease-out 300ms 1;
}
@keyframes lp-shine {
0%   { left: -120%; }
100% { left: 220%; }
} [data-reveal-bounce].is-revealed {
animation: lp-bounce 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms 1;
}
@keyframes lp-bounce {
0%   { transform: scale(1); }
40%  { transform: scale(1.15); }
70%  { transform: scale(0.96); }
100% { transform: scale(1); }
}
} @media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; }
}