.scroll-ornament-from-top-left,
.scroll-ornament-from-top-right,
.scroll-ornament-from-bottom-left,
.scroll-ornament-from-bottom-right,
.scroll-ornament-from-bottom-right-custom,
.scroll-ornament-from-top,
.scroll-ornament-from-bottom,
.scroll-ornament-from-left,
.scroll-ornament-from-right,
.scroll-photo-from-left,
.scroll-photo-from-right,
.scroll-photo-from-top-custom,
.scroll-photo-from-bottom-custom,
.scroll-photo-from-left-custom,
.scroll-photo-from-right-custom,
.scroll-photo-zoom-in-custom,
.scroll-content-from-left,
.scroll-content-from-right,
.scroll-ornament-zoom-in-umbrella {
    opacity: 0;
    visibility: hidden;
}

.scroll-text-from-top,
.scroll-text-from-bottom,
.scroll-text-from-left,
.scroll-text-from-right {
    opacity: 0;
}

.scroll-ornament-from-top-left.is-visible {
    visibility: visible;
    animation: ornamentSlideFromTopLeft 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-top-right.is-visible {
    visibility: visible;
    animation: ornamentSlideFromTopRight 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-bottom-left.is-visible {
    visibility: visible;
    animation: ornamentSlideFromBottomLeft 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-bottom-right.is-visible {
    visibility: visible;
    animation: ornamentSlideFromBottomRight 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-bottom-right-custom.is-visible {
    visibility: visible;
    animation: ornamentSlideFromBottomRightCustom 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-top.is-visible {
    visibility: visible;
    animation: ornamentSlideFromTop 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-bottom.is-visible {
    visibility: visible;
    animation: ornamentSlideFromBottom 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-left.is-visible {
    visibility: visible;
    animation: ornamentSlideFromLeft 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-ornament-from-right.is-visible {
    visibility: visible;
    animation: ornamentSlideFromRight 1s ease-out var(--delay, 0.75s) forwards;
}

.scroll-photo-from-left.is-visible {
    visibility: visible;
    animation: photoSlideFromLeft 1s ease-out var(--delay, 0.5s) forwards;
}

.scroll-photo-from-right.is-visible {
    visibility: visible;
    animation: photoSlideFromRight 1s ease-out var(--delay, 0.5s) forwards;
}

.scroll-photo-from-top-custom.is-visible {
    visibility: visible;
    animation: photoSlideFromTop 1.5s ease-out 1.5s forwards;
}

.scroll-photo-from-bottom-custom.is-visible {
    visibility: visible;
    animation: photoSlideFromBottom 1.5s ease-out 1.5s forwards;
}

.scroll-photo-from-left-custom.is-visible {
    visibility: visible;
    animation: photoSlideFromLeft 1.5s ease-out var(--delay, 0.5s) forwards;
}

.scroll-photo-from-right-custom.is-visible {
    visibility: visible;
    animation: photoSlideFromRight 1.5s ease-out var(--delay, 0.5s) forwards;
}

.scroll-photo-zoom-in-custom.is-visible {
    visibility: visible;
    animation: zoomInPhoto 1.5s ease-out var(--delay, 1.5s) forwards;
}

.scroll-content-from-left.is-visible {
    visibility: visible;
    animation: contentSlideFromLeft 1.5s ease-out var(--delay, 0.5s) forwards;
}

.scroll-content-from-right.is-visible {
    visibility: visible;
    animation: contentSlideFromRight 1.5s ease-out var(--delay, 0.5s) forwards;
}

.scroll-ornament-zoom-in-umbrella.is-visible {
    visibility: visible;
    animation: zoomInUmbrella 0.8s ease-out var(--delay, 0.8s) forwards;
}

.scroll-text-from-top.is-visible {
    animation: textSlideFromTop 1s ease-out var(--delay, 1s) forwards;
}

.scroll-text-from-bottom.is-visible {
    animation: textSlideFromBottom 1s ease-out var(--delay, 1s) forwards;
}

.scroll-text-from-left.is-visible {
    animation: textSlideFromLeft 1s ease-out var(--delay, 1s) forwards;
}

.scroll-text-from-right.is-visible {
    animation: textSlideFromRight 1s ease-out var(--delay, 1s) forwards;
}