/* Keyframes for VirtasLoader. Eye start positions and the flip pivot (86.2, 38.92) are in viewBox units and must match the markup.
   Intro (1.5s, once): logo flips, eyes drop into the bowl. Loop (4.4s): fill, tip out, refill. */

.virtas-loader {
    display: inline-block;
    line-height: 0;
    fill: var(--virtas-loader-color, #4788c3);
}

.virtas-loader svg {
    display: block;
    width: 100%;
    height: auto;
}

.vl-stage, .vl-arch, .vl-eye, .vl-dot {
    transform-box: view-box;
}

.vl-stage {
    transform-origin: 86.2px 38.92px;
    animation: vl-tip 4.4s 1.5s infinite;
}

.vl-arch {
    transform-origin: 86.2px 38.92px;
    animation: vl-flip 1.5s forwards;
}

.vl-eye {
    transform-origin: 0 0;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.vl-dot {
    opacity: 0;
    animation-duration: 4.4s;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
}

.vl-eye .vl-dot {
    opacity: 1;
}

@keyframes vl-flip {
    0%, 20% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.6, -0.2, .3, 1.25); }
    50%, 100% { transform: rotate(180deg); }
}

@keyframes vl-tip {
    0%, 60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
    68%, 77% { transform: rotate(42deg); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
    84% { transform: rotate(-8deg); animation-timing-function: ease-in-out; }
    90% { transform: rotate(3deg); animation-timing-function: ease-in-out; }
    94%, 100% { transform: rotate(0deg); }
}

@keyframes vl-intro-a2 {
    0%, 20% { transform: translate(86.2px, 38.92px) rotate(0deg) translate(-86.2px, -38.92px) translate(-35.23px, 18.77px); animation-timing-function: cubic-bezier(.6, -0.2, .3, 1.25); }
    50%, 58% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(-35.23px, 18.77px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    92% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(-24.99px, -2.16px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    96% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(-24.99px, -5.16px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    99% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(-24.99px, -2.16px); animation-timing-function: steps(1, end); }
    100% { transform: translate(86.2px, 38.92px) rotate(0deg) translate(-86.2px, -38.92px) translate(0px, 0px); }
}

@keyframes vl-intro-a1 {
    0%, 20% { transform: translate(86.2px, 38.92px) rotate(0deg) translate(-86.2px, -38.92px) translate(35.21px, 18.77px); animation-timing-function: cubic-bezier(.6, -0.2, .3, 1.25); }
    50%, 58% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(35.21px, 18.77px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    92% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(25.01px, -2.16px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    96% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(25.01px, -5.16px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    99% { transform: translate(86.2px, 38.92px) rotate(180deg) translate(-86.2px, -38.92px) translate(25.01px, -2.16px); animation-timing-function: steps(1, end); }
    100% { transform: translate(86.2px, 38.92px) rotate(0deg) translate(-86.2px, -38.92px) translate(0px, 0px); }
}

@keyframes vl-fill-a1 {
    0% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01% { transform: translate(0px, -110px); opacity: 0; }
    82% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    85% { opacity: 1; }
    90% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    92% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    94% { transform: translate(0px, 0px); opacity: 1; }
    100% { transform: translate(0px, 0px); opacity: 1; }
}

@keyframes vl-fill-a2 {
    0% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01% { transform: translate(0px, -110px); opacity: 0; }
    87% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    90% { opacity: 1; }
    95% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    97% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    99% { transform: translate(0px, 0px); opacity: 1; }
    100% { transform: translate(0px, 0px); opacity: 1; }
}

@keyframes vl-fill-b1 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    2% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    5% { opacity: 1; }
    10% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    12% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    14% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-b2 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    9% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    12% { opacity: 1; }
    17% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    19% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    21% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-b3 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    16% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    19% { opacity: 1; }
    24% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    26% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    28% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-b4 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    23% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    26% { opacity: 1; }
    31% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    33% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    35% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-c1 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    30% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    33% { opacity: 1; }
    38% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    40% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    42% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-c2 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    37% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    40% { opacity: 1; }
    45% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    47% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    49% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

@keyframes vl-fill-c3 {
    0% { transform: translate(0px, -110px); opacity: 0; }
    44% { transform: translate(0px, -110px); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    47% { opacity: 1; }
    52% { transform: translate(0px, 0px); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    54% { transform: translate(0px, -3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    56% { transform: translate(0px, 0px); opacity: 1; }
    65% { transform: translate(0px, 0px); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    70% { transform: translate(28px, -52px); opacity: 1; }
    77% { transform: translate(125px, -40px); opacity: 0; animation-timing-function: steps(1, end); }
    77.01%, 100% { transform: translate(0px, -110px); opacity: 0; }
}

.vl-dot-a1 { animation-name: vl-fill-a1; }
.vl-dot-a2 { animation-name: vl-fill-a2; }
.vl-dot-b1 { animation-name: vl-fill-b1; }
.vl-dot-b2 { animation-name: vl-fill-b2; }
.vl-dot-b3 { animation-name: vl-fill-b3; }
.vl-dot-b4 { animation-name: vl-fill-b4; }
.vl-dot-c1 { animation-name: vl-fill-c1; }
.vl-dot-c2 { animation-name: vl-fill-c2; }
.vl-dot-c3 { animation-name: vl-fill-c3; }

.vl-eye-a2 { animation-name: vl-intro-a2; }
.vl-eye-a1 { animation-name: vl-intro-a1; }

/* No motion: show the plain logo, breathing gently. */
@media (prefers-reduced-motion: reduce) {
    .vl-stage, .vl-arch, .vl-eye, .vl-dot {
        animation: none;
    }

    .vl-eye-a2 { transform: translate(-35.23px, 18.77px); }
    .vl-eye-a1 { transform: translate(35.21px, 18.77px); }

    .virtas-loader svg {
        animation: vl-breathe 1.6s ease-in-out infinite alternate;
    }
}

@keyframes vl-breathe {
    from { opacity: 1; }
    to { opacity: .45; }
}