/* FLUX Logo Animation Component */

.flux-logo {
    display: inline-flex;
    gap: 0.3em;
    perspective: 800px;
    font-weight: bold;
}

.flux-letter {
    display: inline-block;
    position: relative;
}

.flux-letter--animated {
    transform-style: preserve-3d;
    position: relative;
    display: grid;
    place-items: center;
}

.flux-letter--animated.animate {
    animation: flux-bounce-flip 2s forwards;
}

.flux-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    grid-area: 1 / 1;
}

.flux-face--front {
    z-index: 2;
}

.flux-face--back {
    transform: rotateX(180deg);
    z-index: 1;
}

@keyframes flux-bounce-flip {
    0% {
        transform: translateY(0) rotateX(0deg);
        animation-timing-function: ease-out;
    }
    
    12.5% {
        transform: translateY(-20%) rotateX(0deg);
        animation-timing-function: ease-in;
    }
    
    25% {
        transform: translateY(0) rotateX(0deg);
        animation-timing-function: ease-out;
    }
    
    37.5% {
        transform: translateY(-14%) rotateX(0deg);
        animation-timing-function: ease-in;
    }
    
    50% {
        transform: translateY(0) rotateX(0deg);
        animation-timing-function: ease-in-out;
    }
    
    100% {
        transform: translateY(0) rotateX(180deg);
    }
}

.flux-logo--xs .flux-letter { font-size: 0.75rem; }
.flux-logo--sm .flux-letter { font-size: 0.875rem; }
.flux-logo--base .flux-letter { font-size: 1rem; }
.flux-logo--lg .flux-letter { font-size: 1.125rem; }
.flux-logo--xl .flux-letter { font-size: 1.25rem; }
.flux-logo--2xl .flux-letter { font-size: 1.5rem; }
.flux-logo--3xl .flux-letter { font-size: 1.875rem; }
.flux-logo--4xl .flux-letter { font-size: 2.25rem; }
.flux-logo--5xl .flux-letter { font-size: 3rem; }
.flux-logo--6xl .flux-letter { font-size: 3.75rem; }
.flux-logo--7xl .flux-letter { font-size: 4.5rem; }
.flux-logo--8xl .flux-letter { font-size: 6rem; }
.flux-logo--9xl .flux-letter { font-size: 8rem; }