/* HPE Logo Animation Styles */
.hpe-logo {
    --hpe-logo-bg: #fff;
    --hpe-logo-color: #000
}

.dark-theme .hpe-logo {
    --hpe-logo-bg: #000;
    --hpe-logo-color: #fff
}

.hpe-logo path {
    fill: none;
    stroke-width: 36;
    stroke-dashoffset: var(--_stroke-dashoffset, 0)
}

.hpe-logo.play .hpe-logo-element {
    animation: hpe-logo-element 2s linear 0.3s forwards
}

@keyframes hpe-logo-element {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.hpe-logo .hpe-logo-snake {
    opacity: 0
}

.hpe-logo.play .hpe-logo-snake {
    animation: hpe-logo-snake 5s linear 0s forwards;
}

@keyframes hpe-logo-snake {
    10% {
        opacity: .1
    }
    20% {
        opacity: .4
    }
    30% {
        opacity: 1
    }
    40% {
        stroke-dashoffset: 550
    }
    43.5% {
        stroke-dashoffset: 750
    }
    45% {
        stroke-dashoffset: 1230
    }
    50% {
        stroke-dashoffset: 1590
    }
    51% {
        stroke-dashoffset: 1600
    }
    55% {
        stroke-dashoffset: 1600;
    }
    100% {
        stroke-dashoffset: 1600;
        opacity: 1
    }
}

.hpe-logo .hpe-logo-snake2 {
    opacity: 0
}

.hpe-logo.play .hpe-logo-snake2 {
    animation: hpe-logo-snake2 5s linear 0s forwards
}

@keyframes hpe-logo-snake2 {
    20% {
        opacity: .5
    }
    30% {
        opacity: 1
    }
    40% {
        opacity: .8
    }
    43%, 100% {
        opacity: 0
    }
}

.hpe-logo .hpe-logo-H1 {
    --_stroke-dashoffset: 180
}

.hpe-logo.play .hpe-logo-H1 {
    animation: hpe-logo-dashoffset-reduce 0.458s ease-out 2.167s forwards
}

.hpe-logo .hpe-logo-H2 {
    --_stroke-dashoffset: 180
}

.hpe-logo.play .hpe-logo-H2 {
    animation: hpe-logo-dashoffset-reduce 0.583s cubic-bezier(0, 0.7, 0.1, 1) 2.292s forwards
}

.hpe-logo .hpe-logo-H3 {
    --_stroke-dashoffset: 140
}

.hpe-logo.play .hpe-logo-H3 {
    animation: hpe-logo-dashoffset-reduce 0.37s cubic-bezier(0, 0.7, 0.1, 1) 2.34s forwards
}

.hpe-logo .hpe-logo-P1 {
    --_stroke-dashoffset: 180
}

.hpe-logo.play .hpe-logo-P1 {
    animation: hpe-logo-dashoffset-reduce 0.25s cubic-bezier(0, 0.7, 0.1, 1) 2.167s forwards
}

.hpe-logo .hpe-logo-P2 {
    --_stroke-dashoffset: 370
}

.hpe-logo.play .hpe-logo-P2 {
    animation: hpe-logo-dashoffset-reduce 0.333s ease-out 2.5s forwards
}

.hpe-logo .hpe-logo-E1 {
    --_stroke-dashoffset: 220
}

.hpe-logo.play .hpe-logo-E1 {
    animation: hpe-logo-dashoffset-reduce 0.458s ease-out 2.417s forwards
}

.hpe-logo .hpe-logo-E2 {
    --_stroke-dashoffset: 168;
    opacity: 0;
    filter: brightness(1) contrast(2)
}

.hpe-logo.play .hpe-logo-E2 {
    animation: hpe-logo-E2 1s ease-out 2.533s forwards
}

@keyframes hpe-logo-E2 {
    0% {
        stroke-dashoffset: var(--_stroke-dashoffset, 0)
    }
    40% {
        filter: brightness(0.8) contrast(1)
    }
    50% {
        opacity: 1
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
        filter: brightness(1) contrast(2)
    }
}

.hpe-logo .hpe-logo-half {
    opacity: 0
}

.hpe-logo.play .hpe-logo-half {
    animation: hpe-logo-half 0.4s ease-out 3s forwards;
    opacity: 0
}

@keyframes hpe-logo-half {
    to {
        opacity: 1
    }
}

.hpe-logo.play.css-animation #hpe-logo-gradient {
    animation: hpe-logo-gradient 5s linear 0s forwards
}

@keyframes hpe-logo-gradient {
    0% {
        transform: translateX(-70%) rotate(70deg)
    }
    5% {
        transform: translateX(-70%) rotate(50deg)
    }
    17.5% {
        transform: translateX(-55%) rotate(-20deg)
    }
    22.5% {
        transform: translateX(-55%) rotate(-33deg)
    }
    30% {
        transform: translateX(-60%) rotate(-16deg)
    }
    40% {
        transform: translateX(-60%) rotate(30deg)
    }
    50% {
        transform: translateX(-20%) rotate(30deg)
    }
    55%, 100% {
        transform: translateX(0%) rotate(37deg)
    }
}

.hpe-logo.play.css-animation #hpe-logo-gradient2 {
    animation: hpe-logo-gradient2 5s linear 0s forwards
}

@keyframes hpe-logo-gradient2 {
    0% {
        transform: scale(.2)
    }
    30% {
        transform: scale(.8)
    }
    40% {
        transform: scale(.3)
    }
    43%, 100% {
        transform: scale(0)
    }
}

.hpe-logo.play.css-animation #hpe-half-gradient {
    animation: hpe-half-gradient 5s linear 0s forwards;
    scale: 1.2
}

@keyframes hpe-half-gradient {
    0% {
        transform: translate(100%, 47%)
    }
    50% {
        transform: translate(62%, 47%)
    }
    55% {
        transform: translate(26%, 43%)
    }
    62% {
        transform: translate(3%, 11%)
    }
    65%, 100% {
        transform: translate(6%, -16%)
    }
}

.hpe-logo.play.css-animation #hpe-logo-fade1 {
    animation: hpe-fade1-gradient 5s linear 0s forwards
}

@keyframes hpe-fade1-gradient {
    0% {
        transform: translateX(60%)
    }
    17.5% {
        transform: translateX(10%)
    }
    22.5% {
        transform: translateX(5%)
    }
    30% {
        transform: translateX(7%)
    }
    40% {
        transform: translateX(60%)
    }
    45%, 100% {
        transform: translateX(100%)
    }
}

.hpe-logo.play.css-animation #hpe-logo-fade2 {
    animation: hpe-fade2-gradient 5s linear 0s forwards
}

@keyframes hpe-fade2-gradient {
    0% {
        transform: translateX(100%)
    }
    32% {
        transform: translateX(5%)
    }
    43%, 100% {
        transform: translateX(0%)
    }
}

@keyframes hpe-logo-dashoffset-reduce {
    0% {
        stroke-dashoffset: var(--_stroke-dashoffset, 0)
    }
    100% {
        stroke-dashoffset: 0
    }
}