/* =========================================================
   BROBEIL LOGO ANIMATION
   ========================================================= */


/* ---------------------------------------------------------
   SVG
   --------------------------------------------------------- */

.brobeil-logo-svg {
    --brobeil-letter-duration: 0.45s;
    --brobeil-letter-step: 0.075s;
    --brobeil-letter-start: 0.25s;

    display: block;
    width: 100%;
    height: auto;

    aspect-ratio: 610.68 / 260.94;
    overflow: hidden;
}


/* =========================================================
   CLAIM / TAGLINE
   ========================================================= */

.brobeil-logo-tagline {
    opacity: 1;
    transform: translateY(0);

    transform-box: fill-box;
    transform-origin: center;

    transition:
        opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}


/* =========================================================
   BUCHSTABEN INTRO
   ========================================================= */

.brobeil-logo-letter {
    opacity: 0;

    transform-box: fill-box;
    transform-origin: center;
    transform: translateY(1px);

    animation:
        brobeil-letter-in
        var(--brobeil-letter-duration)
        ease-out
        forwards;

    animation-delay:
        calc(
            var(--brobeil-letter-start) +
            (var(--letter-index) * var(--brobeil-letter-step))
        );
}


@keyframes brobeil-letter-in {

    from {
        opacity: 0;
        transform: translateY(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   ORANGER BOBBEL
   ========================================================= */

.brobeil-logo-dot {
    opacity: 0;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        brobeil-dot-in 0.35s ease-out 0.3s forwards,
        brobeil-dot-hop 4.5s ease-in-out 0.6s infinite;
}


/* Bobbel einblenden */

@keyframes brobeil-dot-in {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* Dezentes Hopsen */

@keyframes brobeil-dot-hop {

    /* Ruhe */
    0%,
    55% {
        transform: translateY(0);
    }

    /* Hoch */
    68% {
        transform: translateY(-8px);
    }

    /* Direkt nach unten durchziehen */
    84% {
        transform: translateY(8px);
    }

    /* Wieder Mitte */
    100% {
        transform: translateY(0);
    }
}


/* =========================================================
   STICKY HEADER – LOGO
   ========================================================= */

.bde-header-builder--sticky-styles .brobeil-logo-tagline {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}


.bde-header-builder--sticky-styles .brobeil-logo-dot {
    animation: none;
    opacity: 0;
    transform: translateY(0);
}


/* =========================================================
   HEADER PADDING
   ========================================================= */

/* Normaler Header */

.breakdance .bde-header-builder .bde-header-builder__container {
    padding-top: 15px !important;
    padding-bottom: 15px !important;

    transition:
        padding-top 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        padding-bottom 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}


/* Sticky Header */

.breakdance
.bde-header-builder.bde-header-builder--sticky-styles
.bde-header-builder__container {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .brobeil-logo-letter,
    .brobeil-logo-dot {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .brobeil-logo-tagline {
        transition: none;
    }

    .breakdance .bde-header-builder .bde-header-builder__container {
        transition: none;
    }

}