/*
=========================================================
Motion and interface polish
=========================================================
*/


/*
=========================================================
Smooth scrolling
=========================================================
*/

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 7rem;
}


/*
=========================================================
Reveal animations
=========================================================
*/

.reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal--left {
    transform: translateX(-28px);
}

.reveal--right {
    transform: translateX(28px);
}

.reveal--scale {
    transform: scale(.97);
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


/*
=========================================================
Staggered reveal
=========================================================
*/

.reveal-stagger > * {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity .58s ease,
        transform .58s ease;

    transition-delay:
        calc(
            var(--reveal-index, 0)
            * 75ms
        );
}

.reveal-stagger.is-visible > * {
    opacity: 1;

    transform: translateY(0);
}


/*
=========================================================
Interactive elements
=========================================================
*/

.button,
.document-card__link,
.gallery-section__link,
.news-card__link {
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform:
        translateY(0)
        scale(.97);
}

.document-card__link:hover,
.gallery-section__link:hover,
.news-card__link:hover {
    transform: translateY(-1px);
}

.document-card__link:active,
.gallery-section__link:active,
.news-card__link:active {
    transform: scale(.97);
}


/*
=========================================================
Back to top button
=========================================================
*/

.back-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 50;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border:
        1px solid
        rgba(77, 181, 247, .28);

    border-radius: 50%;

    color: var(--color-text);

    background:
        linear-gradient(
            135deg,
            var(--color-primary) 0%,
            var(--color-primary-hover) 100%
        );

    box-shadow:
        0 12px 28px
        rgba(35, 116, 166, .24);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(14px)
        scale(.92);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-fast);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.back-to-top:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 16px 34px
        rgba(35, 116, 166, .31);
}

.back-to-top:active {
    transform:
        translateY(0)
        scale(.94);
}

.back-to-top__icon {
    display: block;

    font-size: 1.45rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;

    transform: translateY(-1px);
}


/*
=========================================================
Keyboard focus
=========================================================
*/

.button:focus-visible,
.site-nav__link:focus-visible,
.site-nav__language-link:focus-visible,
.document-card__link:focus-visible,
.gallery-section__link:focus-visible,
.news-card__link:focus-visible,
.back-to-top:focus-visible {
    outline:
        3px solid
        rgba(77, 181, 247, .34);

    outline-offset: 4px;
}


/*
=========================================================
Responsive
=========================================================
*/

@media (max-width: 575.98px) {
    section[id] {
        scroll-margin-top: 5rem;
    }

    .back-to-top {
        width: 46px;
        height: 46px;
    }

    .back-to-top__icon {
        font-size: 1.25rem;
    }
}


/*
=========================================================
Reduced motion
=========================================================
*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal-stagger > * {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .button,
    .document-card__link,
    .gallery-section__link,
    .news-card__link,
    .back-to-top {
        transition: none;
    }

    .button:hover,
    .button:active,
    .document-card__link:hover,
    .document-card__link:active,
    .gallery-section__link:hover,
    .gallery-section__link:active,
    .news-card__link:hover,
    .news-card__link:active,
    .back-to-top:hover,
    .back-to-top:active {
        transform: none;
    }
}