/* INTRO ANIMATION
01 GENERAL
*/
/* -----------------------------------------------------------------------
01 GENERAL
/* ---------------------------------------------------------------------*/
.wfbb-intro-animation {
background: #fff;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000000000000;
}
.wfbb-intro-animation svg {
width: 100%;
height: 100%;
}
.wfbb-intro-animation rect#Loading_Bar {
fill: var(--color-primary);
}
.wfbb-intro-animation .bb-cutout,
.wfbb-intro-animation .bb-loading {
opacity: 0;
}
.wfbb-intro-animation .wfbb-logo-animation {
opacity: 0;;
transform-origin: 50% 50%;
animation: wfbb_logo .75s ease-in-out 5s forwards;
}
.wfbb-intro-animation .wfbb-logo-animation #wfbb-arbeit-logo,
.wfbb-intro-animation .wfbb-logo-animation #energyagency-logo {
display: none;
}
.wfbb-intro-animation .bb-cutout,
.wfbb-intro-animation .bb-loading {
transform: scale(1.6);
}
.wfbb-intro-animation .bb-cutout {
transform-origin: 50% 50%;
animation: bb_overlay .1s ease-in-out 3.75s forwards, bb_maps_shift .75s ease-in-out 5s forwards;
}
.wfbb-intro-animation .bb-loading {
transform-origin: 50% 30%;
transform: scale(1.6);
animation: bb_loading 1s ease-in-out 4s forwards, bb_maps_shift .75s ease-in-out 5s forwards;
}
.wfbb-intro-animation #Brandenburg_Outline {
fill: none;
stroke: var(--color-primary);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 500 501;
stroke-dashoffset: 500;
animation: map_path 4s ease-in-out 0s forwards;
}
.wfbb-intro-animation #Gruppe_maskieren_1,
.wfbb-intro-animation .Deutschland-Map,
.wfbb-intro-animation .Brandenburg-Map {
transform: scale(1);
transform-origin: 50% 50%;
}
.wfbb-intro-animation .Brandenburg-Map {
animation: bb_maps_shift .75s ease-in-out 5s forwards;
}
.wfbb-intro-animation #Gruppe_maskieren_1 {
animation: map_zoom 2s ease-in-out 1.5s forwards, maps_fadeout .75s ease-in-out 2.5s forwards;
}
@keyframes map_path {
100% {
stroke-dashoffset: 0;
}
}
@keyframes map_zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.6)
}
}
@keyframes maps_fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes bb_overlay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes bb_loading {
0% {
opacity: 0;
transform-origin: 50% 30%;
}
30% {
opacity: 1;
}
100% {
opacity: 1;
transform-origin: 50% 50%;
}
}
@keyframes bb_maps_shift {
0% {
transform-origin: 50% 50%;
}
100% {
transform-origin: 60% 50%;
}
}
@keyframes wfbb_logo {
0% {
opacity: 0;
transform: translateX(0%);
}
100% {
opacity: 1;
transform: translateX(5%);
}
}
.intro-animation-button {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
width: 100%;
padding: 0 0 3rem 0;
}
@media (max-width: 991px) {
.wfbb-intro-animation {
transform: scale(1.5);
}
}
@media (max-width: 767px) {
.wfbb-intro-animation {
display: none !important;
transform: scale(2.5);
}
}
@media (max-width: 500px) {
.wfbb-intro-animation {
transform: scale(3);
}
}
