/* ==================================================
FORBIDDEN FRUIT — SLOW IMAGE SCROLL REVEALS
================================================== */
/*
Images begin:
- 15px lower
- invisible
- blurred by 4px
*/
body:not(.sqs-edit-mode) img.ff-scroll-reveal {
opacity: 0;
transform: translateY(15px);
filter: blur(4px);
transition:
opacity 1s ease,
transform 1s cubic-bezier(.22, .61, .36, 1),
filter 1s ease;
will-change: opacity, transform, filter;
}
/*
JavaScript adds this class when the image
enters the visitor's screen.
*/
body:not(.sqs-edit-mode) img.ff-scroll-reveal.ff-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/*
Do not animate tiny icons, logos, navigation images,
or images inside buttons.
*/
body:not(.sqs-edit-mode) .header img.ff-scroll-reveal,
body:not(.sqs-edit-mode) .header-menu img.ff-scroll-reveal,
body:not(.sqs-edit-mode) .sqs-svg-icon--wrapper img.ff-scroll-reveal,
body:not(.sqs-edit-mode) button img.ff-scroll-reveal {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
/*
Respect visitors who have reduced-motion enabled.
*/
@media (prefers-reduced-motion: reduce) {
body:not(.sqs-edit-mode) img.ff-scroll-reveal {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}