/* hero_intro.php */

.public-hero-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}

.public-hero-placeholder img {
    width: min(42vw, 360px);
    height: auto;
    opacity: 0.42;
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}

/* Tenant-specific animated logo intro. */
.public-intro-slide.public-logo-animated.active .public-hero-placeholder img {
    animation: fotokreisLogoEyeDive var(--public-logo-slide-ms, 6000ms) linear forwards;
    transform-origin: 50% 50%;
}

.public-intro-slide.public-logo-animated.public-logo-static.active .public-hero-placeholder img {
    animation-name: fotokreisLogoPlainDive;
}

.public-intro-slide.public-logo-animated.logo-finished .public-hero-placeholder img {
    animation: none;
    opacity: 0;
    transform: translateZ(1400px) rotate(1180deg) scale(9.4);
}

.public-intro-slide.public-logo-animated.public-logo-static.logo-finished .public-hero-placeholder img {
    transform: translateZ(1400px) scale(9.4);
}

@keyframes fotokreisLogoEyeDive {
    0%, 4.55% {
        opacity: 0;
        transform: translateZ(0) rotate(0deg) scale(1);
    }
    9.09% {
        opacity: 0.42;
        transform: translateZ(10px) rotate(18deg) scale(1.02);
    }
    28.79% {
        opacity: 0.42;
        transform: translateZ(160px) rotate(160deg) scale(2);
    }
    70% {
        opacity: 0.34;
        transform: translateZ(760px) rotate(650deg) scale(5.8);
    }
    84.85% {
        opacity: 0.10;
        transform: translateZ(1120px) rotate(900deg) scale(7.5);
    }
    90% {
        opacity: 0;
        transform: translateZ(1260px) rotate(1030deg) scale(8.6);
    }
    100% {
        opacity: 0;
        transform: translateZ(1400px) rotate(1180deg) scale(9.4);
    }
}

@keyframes fotokreisLogoPlainDive {
    0%, 4.55% {
        opacity: 0;
        transform: translateZ(0) scale(1);
    }
    9.09% {
        opacity: 0.42;
        transform: translateZ(10px) scale(1.02);
    }
    28.79% {
        opacity: 0.42;
        transform: translateZ(160px) scale(2);
    }
    70% {
        opacity: 0.34;
        transform: translateZ(760px) scale(5.8);
    }
    84.85% {
        opacity: 0.10;
        transform: translateZ(1120px) scale(7.5);
    }
    90% {
        opacity: 0;
        transform: translateZ(1260px) scale(8.6);
    }
    100% {
        opacity: 0;
        transform: translateZ(1400px) scale(9.4);
    }
}