#content {
    min-height: auto;
}

#customPageTitle {
    display: none;
}

.landingPage {
    --landing-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --landing-duration: 1.2s;
    --landing-distance: 30px;
    --landing-stagger: 0.15s;
    overflow-x: clip;
}

.landingPage :where(h1, h2, h3, p, figure) {
    margin: 0;
}

.landingPage :where(h2) {
    width: auto;
    max-width: none;
    overflow: visible;
    text-align: inherit;
}

.landingPage :where(picture, img) {
    display: block;
}

.landingPage :where(img) {
    width: 100%;
    height: auto;
}

.landingPage em {
    font-style: italic;
    font-weight: 300;
}

/* on load */

.animOnLoad {
    animation: landingOnLoad var(--landing-duration) var(--landing-ease) both;
}

/* reveal */

.animReveal {
    opacity: 0;
    transform: translateY(var(--landing-distance));
    transition: opacity var(--landing-duration) var(--landing-ease), transform var(--landing-duration) var(--landing-ease);
    transition-delay: var(--delay, 0s);
}

.animReveal.onViewport {
    opacity: 1;
    transform: none;
}

/* stagger */

.landingPage .animStagger {
    opacity: 1;
}

.animStagger > * {
    opacity: 0;
    transform: translateY(var(--landing-distance));
    transition: opacity var(--landing-duration) var(--landing-ease), transform var(--landing-duration) var(--landing-ease);
}

.animStagger.onViewport > * {
    opacity: 1;
    transform: none;
}

.animStagger > :nth-child(2) {
    transition-delay: var(--landing-stagger);
}

.animStagger > :nth-child(3) {
    transition-delay: calc(var(--landing-stagger) * 2);
}

.animStagger > :nth-child(4) {
    transition-delay: calc(var(--landing-stagger) * 3);
}

/* image */

.landingPage .animImage {
    opacity: 1;
    overflow: hidden;
}

.animImage img {
    clip-path: inset(0 0 0 100%);
    transform: scale(1.08);
    transition: clip-path var(--landing-duration) var(--landing-ease), transform var(--landing-duration) var(--landing-ease);
}

.animImageLeft img {
    clip-path: inset(0 100% 0 0);
}

.animImage.onViewport img {
    clip-path: inset(0);
    transform: none;
}

/* spin */

.animSpin {
    opacity: 0;
    transform: rotate(-45deg);
    transition: opacity var(--landing-duration) var(--landing-ease), transform var(--landing-duration) var(--landing-ease);
}

.animSpin.onViewport {
    opacity: 1;
    transform: none;
}

/* hover zoom */

.animHoverZoom img {
    transition: transform 1.2s var(--landing-ease);
}

.animHoverZoom:hover img {
    transform: scale(1.06);
}

@keyframes landingOnLoad {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {

    .animOnLoad,
    .animReveal,
    .animStagger > *,
    .animImage img,
    .animSpin,
    .animHoverZoom img {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }
}