/* =========================================
   RED ECHO – HOME INTRO EFFECT
   TITEL + BILD
========================================= */


/* =========================================
   1. TITEL
   BIG TO NORMAL
========================================= */


/* Ausgangszustand */

.hero__title-line {
    opacity: 0;

    transform:
        scale(1.35);

    transform-origin: left center;

    will-change:
        transform,
        opacity;
}


/* -----------------------------------------
   Die drei Zeilen erscheinen nacheinander
----------------------------------------- */

.hero__title-line:nth-child(1) {
    animation:
        redEchoBigBeat
        1000ms
        cubic-bezier(0.16, 1, 0.3, 1)
        100ms
        forwards;
}


.hero__title-line:nth-child(2) {
    animation:
        redEchoBigBeat
        1000ms
        cubic-bezier(0.16, 1, 0.3, 1)
        420ms
        forwards;
}


.hero__title-line:nth-child(3) {
    animation:
        redEchoBigBeat
        1000ms
        cubic-bezier(0.16, 1, 0.3, 1)
        740ms
        forwards;
}


/* -----------------------------------------
   Titel: GROSS → NORMAL
----------------------------------------- */

@keyframes redEchoBigBeat {

    0% {
        opacity: 0;

        transform:
            scale(1.35);
    }


    25% {
        opacity: 1;
    }


    65% {
        opacity: 1;

        transform:
            scale(0.97);
    }


    82% {
        transform:
            scale(1.015);
    }


    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================
   2. BILD DER MUSIKERINNEN
   LANGSAMER BIG-TO-NORMAL-EFFEKT
========================================= */

/*
   Smartphone + Tablet

   Dein Bild wird in home.css mit
   translateX(-50%) zentriert.

   Deshalb muss dieses translateX während
   der Animation erhalten bleiben.
*/

.hero__people {
    opacity: 0;

    transform:
        translateX(-50%)
        scale(1.12);

    transform-origin: center bottom;

    animation:
        redEchoPeopleIntroMobile
        1900ms
        cubic-bezier(0.16, 1, 0.3, 1)
        200ms
        forwards;

    will-change:
        transform,
        opacity;
}


/* -----------------------------------------
   Bild Smartphone + Tablet
   GROSS → NORMAL
----------------------------------------- */

@keyframes redEchoPeopleIntroMobile {

    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            scale(1.12);
    }


    35% {
        opacity: 1;
    }


    100% {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1);
    }
}


/* =========================================
   3. BILD-EFFEKT AUF DESKTOP
========================================= */

/*
   Ab 1100px liegt das Bild rechts.

   Deshalb darf hier kein translateX
   verwendet werden.
*/

@media (min-width: 1100px) {

    .hero__people {
        opacity: 0;

        transform:
            scale(1.12);

        transform-origin: right bottom;

        animation:
            redEchoPeopleIntroDesktop
            1900ms
            cubic-bezier(0.16, 1, 0.3, 1)
            200ms
            forwards;
    }


    /* -------------------------------------
       Bild Desktop
       GROSS → NORMAL
    ------------------------------------- */

    @keyframes redEchoPeopleIntroDesktop {

        0% {
            opacity: 0;

            transform:
                scale(1.12);
        }


        35% {
            opacity: 1;
        }


        100% {
            opacity: 1;

            transform:
                scale(1);
        }
    }
}


/* =========================================
   4. LAUFBAND

   Blendet erst ein, wenn Titel und Bild
   angekommen sind.
========================================= */

.marquee {
    animation:
        redEchoMarqueeIntro
        1200ms
        ease
        1400ms
        backwards;
}

@keyframes redEchoMarqueeIntro {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================
   5. REDUCED MOTION

   Ohne Animation muss das Bild direkt in
   seiner Endposition stehen. Deshalb wird
   auch die Vergrösserung zurückgesetzt.
========================================= */

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

    .hero__title-line {
        opacity: 1;

        transform: none;

        animation: none;
    }


    .hero__people {
        opacity: 1;

        transform:
            translateX(-50%);

        animation: none;
    }


    .marquee {
        animation: none;
    }

}


@media (prefers-reduced-motion: reduce) and (min-width: 1100px) {

    .hero__people {
        transform: none;
    }

}