/* Hide animation text elements by default to prevent flash before JavaScript loads */
.animation--text {
    opacity: 0;
}

.animation--text * {
    opacity: 0;
}

/* .animation--text span {
    display: inline !important;
} */

.line--animation,
.viewport--media {
    --radius: 0;
    --ease-in-out-soft: cubic-bezier(.4, .15, 0, 1);
    overflow: hidden;
}


.animation--text-line .char {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
}

.viewport--media .viewport--media-inner {
    -webkit-clip-path: inset(20% 20% 0 20% round var(--radius) var(--radius) var(--radius) var(--radius));
    clip-path: inset(20% 20% 0 20% round var(--radius) var(--radius) var(--radius) var(--radius));
    opacity: 0;
}

.viewport--media.is-in-viewport .viewport--media-inner {
    -webkit-clip-path: inset(0 0 0 0 round var(--radius) var(--radius) var(--radius) var(--radius));
    clip-path: inset(0 0 0 0 round var(--radius) var(--radius) var(--radius) var(--radius));
    opacity: 1;
    -webkit-transition: opacity .75s var(--ease-in-out-soft), -webkit-clip-path .75s var(--ease-in-out-soft);
    transition: opacity .75s var(--ease-in-out-soft), -webkit-clip-path .75s var(--ease-in-out-soft);
    -o-transition: clip-path .75s var(--ease-in-out-soft), opacity .75s var(--ease-in-out-soft);
    transition: clip-path .75s var(--ease-in-out-soft), opacity .75s var(--ease-in-out-soft);
    transition: clip-path .75s var(--ease-in-out-soft), opacity .75s var(--ease-in-out-soft), -webkit-clip-path .75s var(--ease-in-out-soft);
}


.animation--text-line {
    opacity: 0;
    overflow: hidden;
}

.animation--text-line.is-in-viewport {
    overflow: visible;
}

.animation--text-line .word {
    display: inline-block !important;
    vertical-align: top;
    overflow: hidden;
}

.animation--text-line {
    display: inline !important;
}

.animation--text-line .s1 .word {
    vertical-align: unset;
}

.animation--text-line .char {
    display: inline-block;
}

.line--animation:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #E9E9E9;
    pointer-events: none;
    opacity: 0;
}

.line--animation.is-in-viewport:before {
    opacity: 1;
    width: 100%;
    -webkit-transition: width .75s var(--ease-in-out-soft);
    -o-transition: width .75s var(--ease-in-out-soft);
    transition: width .75s var(--ease-in-out-soft);
    -webkit-transition-delay: calc(var(--index) * .5s);
    -o-transition-delay: calc(var(--index) * .5s);
    transition-delay: calc(var(--index) * .5s);
}

.image--hover {
    overflow: hidden;
}

.image--hover img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform .75s var(--ease-in-out-soft);
    transition: -webkit-transform .75s var(--ease-in-out-soft);
    -o-transition: transform .75s var(--ease-in-out-soft);
    transition: transform .75s var(--ease-in-out-soft);
    transition: transform .75s var(--ease-in-out-soft), -webkit-transform .75s var(--ease-in-out-soft);
}

.image--hover:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform .75s var(--ease-in-out-soft);
    transition: -webkit-transform .75s var(--ease-in-out-soft);
    -o-transition: transform .75s var(--ease-in-out-soft);
    transition: transform .75s var(--ease-in-out-soft);
    transition: transform .75s var(--ease-in-out-soft), -webkit-transform .75s var(--ease-in-out-soft);
}

html:not([lang="en-US"]) .animation--text-line .word {
    display: inline !important;
}