/* Loxone Hero Animation – timings and offsets from the Figma "Header Animation" frame (2 s timeline). */

/* Everything waits this long after load before the first movement, so the animation is not over
   before the visitor looks at the hero. The shortcode's delay attribute overrides it per page. */
:root {
    --lx-hero-delay: 1s;
}

/* Headline: hidden until the script has split it into lines; the failsafe reveals it anyway
   after 1.5 s, so a blocked or broken script never leaves the headline invisible. */
.lx-hero-headline {
    opacity: 0;
    animation: lx-hero-failsafe 0.3s ease 1.5s both;
}

.lx-hero-headline.is-ready {
    opacity: 1;
    animation: none;
}

@keyframes lx-hero-failsafe {
    to {
        opacity: 1;
    }
}

.lx-hero-headline__line {
    display: block;
    opacity: 0;
    animation: lx-hero-line-in 0.5s cubic-bezier(0, 0, 0, 1) both;
    animation-delay: calc(var(--lx-hero-delay) + var(--lx-hero-line-index, 0) * 0.12s);
}

@keyframes lx-hero-line-in {
    from {
        opacity: 0;
        transform: translateY(-1.3em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lockup: geometry in em so one font-size scales the whole thing. */
.lx-hero-logo {
    --lx-hero-halo: 0.68em;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--lx-hero-halo);
    color: #fff;
    font-family: "Loxone Sans", "Georgia", sans-serif;
    font-size: 46px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Soft edge the sliding lines pass through; margin/padding keep the resting text fully opaque. */
.lx-hero-logo__lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 -1.4em;
    padding: 0 1.4em;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 1.4em,
        #000 calc(100% - 1.4em),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 1.4em,
        #000 calc(100% - 1.4em),
        transparent 100%
    );
}

.lx-hero-logo__line {
    display: block;
}

.lx-hero-logo__line--3 {
    align-self: flex-end;
}

.lx-hero-logo__text {
    display: inline-block;
    animation-duration: 0.7s;
    animation-fill-mode: both;
}

.lx-hero-logo__line--1 .lx-hero-logo__text {
    animation-name: lx-hero-slide-left;
    animation-timing-function: cubic-bezier(0.42, 0, 0.077, 1);
    animation-delay: calc(var(--lx-hero-delay) + 0.59s);
}

.lx-hero-logo__line--2 .lx-hero-logo__text {
    animation-name: lx-hero-slide-right;
    animation-timing-function: cubic-bezier(0.42, 0, 0, 1);
    animation-delay: calc(var(--lx-hero-delay) + 0.69s);
}

.lx-hero-logo__line--3 .lx-hero-logo__text {
    animation-name: lx-hero-rise;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.118, 0.284, 0, 1);
    animation-delay: calc(var(--lx-hero-delay) + 0.77s);
}

/* Figma moves these two only; the fade keeps them from sitting displaced before the slide starts. */
@keyframes lx-hero-slide-left {
    from {
        opacity: 0;
        transform: translateX(-1.16em);
    }
    40% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lx-hero-slide-right {
    from {
        opacity: 0;
        transform: translateX(1.25em);
    }
    40% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lx-hero-rise {
    from {
        opacity: 0;
        transform: translateY(1.22em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Halo brackets: quarter rings at the top-right and bottom-left corners. */
.lx-hero-logo__halo {
    position: absolute;
    width: var(--lx-hero-halo);
    height: var(--lx-hero-halo);
    line-height: 0;
    animation: 0.8s cubic-bezier(0.42, 0, 0.081, 1) both;
    animation-delay: calc(var(--lx-hero-delay) + 0.59s);
}

.lx-hero-logo__halo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lx-hero-logo__halo--top {
    top: calc(-1 * var(--lx-hero-halo) * 0.5);
    right: 0.07em;
    transform: rotate(90deg);
    animation-name: lx-hero-halo-top;
}

.lx-hero-logo__halo--bottom {
    bottom: 0.13em;
    left: calc(-1 * var(--lx-hero-halo) * 0.8);
    transform: rotate(-90deg);
    animation-name: lx-hero-halo-bottom;
}

@keyframes lx-hero-halo-top {
    from {
        opacity: 0;
        translate: 2.15em -0.77em;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lx-hero-halo-bottom {
    from {
        opacity: 0;
        translate: -2.3em 0.87em;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (max-width: 767px) {
    .lx-hero-logo {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lx-hero-headline {
        opacity: 1;
        animation: none;
    }

    /* Same specificity as the per-line rules above so the reset wins. */
    .lx-hero-headline__line,
    .lx-hero-logo__line .lx-hero-logo__text,
    .lx-hero-logo__halo {
        animation: none;
        opacity: 1;
    }
}