/*
    landingPage.css
 */

@import url("flaschensammler.css");

:root {
    --prt-area-rows: "1fr 1fr 1fr";

    --prt-area: "prt-a1" "prt-a1" "prt-a2";

    /*
    --prt-area-width: 100vw;

     */
    --prt-area-height: auto;

    --prt-area-margin: 0;
}

/*
    body
 */

@container prt-area (width > 700px) {
}

@container prt-area (width > 0) {

    /*
        header
     */
    .prt-a0 {

    }

    /*
        main
     */
    .prt-a1 {
        display: grid;
        grid-template-rows: 1fr 1.5fr 1fr;
        grid-template-areas:
                "prt-c1"
                "prt-c2"
                "prt-c3";
        min-height: 100vh !important;

        background-color: var(--primeColor_1);
    }

    /*
        footer
     */
    .prt-a2 {

    }

    @container prt-a0 (width > 0) {

    }

    @container prt-a1 (width > 0) {
        #projectDisplay {
            grid-area: projectDisplay;

        }

        /*#servicesAndPayments {
            grid-area: servicesAndPayments;
        }*/

        #newLogoDisplay img {
            width: 100%;
            height: 100%;
        }

        .displayON {
            box-shadow: 1px 1px 14px 0 black;
            border: 1px solid var(--primeColor_2);
            border-radius: 0.3rem;
        }

        #projectFooter {
            grid-area: projectFooter;
        }

        #trainDisplay {
            grid-area: trainDisplay;

            animation-name: displayScaleForward;
            animation-duration: 2s;
            animation-timing-function: linear;

            box-shadow: 1px 1px 14px 0 var(--primeColor_2);
            border: 1px solid var(--primeColor_2);
            border-radius: 0.3rem;
            /*background: #434E60;*/ /*#4E6978*/
            background: #2C3440;
            color: #FEF9EF;

            padding: 0 1rem;
        }

        #trainDisplay p {
            filter: drop-shadow(2px 4px 6px #101B2C);

            background: rgba(70, 81, 98, 0.5);
            box-shadow: 0 0 7px 1px #465162;
            white-space: nowrap;
            overflow: hidden;

            text-indent: 100%;
        }

        /*
         * 5 Messages for Trains
         * Box start open till end close = 60sek
         * 60 / 5 = 12sek for 1 message
         *
         */
        #trainDisplay > :nth-Child(1) {
            animation-name: train_1;
            animation-direction: normal;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #trainDisplay > :nth-Child(2) {
            animation-name: train_1;
            animation-direction: normal;
            animation-duration: 30s;
            animation-delay: 12s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #trainDisplay > :nth-Child(3) {
            animation-name: train_1;
            animation-direction: normal;
            animation-duration: 30s;
            animation-delay: 24s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #trainDisplay > :nth-Child(4) {
            animation-name: train_1;
            animation-direction: normal;
            animation-duration: 30s;
            animation-delay: 36s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #trainDisplay > :nth-Child(5) {
            animation-name: train_1;
            animation-direction: normal;
            animation-duration: 30s;
            animation-delay: 48s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        #trainFooter {
            grid-area: trainFooter;
            color: #FFFFFF;
        }

        /*
         * @duration: 30 - jetzt Dauerhaft !!!
         */
        @keyframes displayScaleForward {

            0% {
                scale: 0;
            }

            /*
            25% {
                scale: 1;
            }

             */

            100% {
                scale: 1;
            }
        }

        @keyframes train_1 {
            0% {
                text-indent: 100%;
            }

            100% {
                text-indent: -150ch;
            }
        }
    }

    @container prt-a1 (width < 700px) {
        .prt-c1 {
            grid-template-rows: 2.5fr 2fr 2fr 2fr;
            grid-template-columns: 1fr;
            grid-template-areas:
                "prt-b1"
                "prt-b2"
                "prt-b4"
                "prt-b3";

            padding: 2rem;
        }

        @container prt-c1 (width < 700px) {

            .prt-b2 {
                grid-template-rows: 1fr 1fr 1fr;
                grid-template-areas:
                    "trainDisplay trainDisplay trainDisplay trainDisplay"
                    "trainDisplay trainDisplay trainDisplay trainDisplay"
                    "trainFooter trainFooter trainFooter trainFooter";
            }

            .prt-b3 {
                grid-template-areas:
                    ". . . ."
                    "anima anima anima anima"
                    "anima anima anima anima"
                    ". . . .";
                align-items: end;
                height: 30vh
            }

            .prt-b4 {
                line-height: unset;
                grid-template-areas:
                    "slText slText slText slText"
                    "slText slText slText slText"
                    "slText slText slText slText"
                    "slText slText slText slText";
                height: 30vh;
            }

            .prt-b1 {
                display: none;
            }
        }
    }

    @container prt-a1 (width > 700px) {
        .prt-c1 {
            grid-template-rows: 1fr 1fr;
            grid-template-areas:
            "prt-b1 prt-b2"
            "prt-b3 prt-b4";

            height: 100vh !important;
        }

        @container prt-c1 (width > 700px) {

            .prt-b1, .prt-b2, .prt-b3, .prt-b4 {
                height: 50vh;
                max-height: 50vh;
            }

            .prt-b3 {
                grid-template-areas:
                    ". . . ."
                    "anima anima anima ."
                    "anima anima anima ."
                    ". . . .";
            }

            .prt-b4 {
                grid-template-areas:
                    ". . . ."
                    ". sapHeadline sapHeadline sapHeadline"
                    ". sapDoIt sapDoIt sapDoIt"
                    ". . . .";

                color: #F9F9FA;
                font-family: "JetBrainsMono-Regular", sans-serif;
            }

            .prt-b1 {

                grid-template-areas:
                    ". . . ."
                    "slText slText slText ."
                    "slText slText slText ."
                    ". . . .";

                color: #F9F9FA;
                font-family: "JetBrainsMono-Regular", sans-serif;
            }

            @keyframes playLogo {

                0% {

                }
                6.25% {

                }
                12.5% {

                }
                18.75% {

                }
                25% {

                }
                31.25% { /* 5s */

                }
                37.5% { /* 6s */

                }
                43.75% { /* 7s */

                }

                50% { /* 8s  */
                    transform: translate(50%, 50%);
                }
                56.25% {

                }
                62.5% { /* 10s */

                }
                68.75% {

                }
                75% { /* 12s */

                }
                81.25% {

                }
                87.5% { /* 14s */

                }
                93.75% {

                }
                100% { /* 16 s*/
                    transform: translate(10%, 10%);
                }
            }

            .prt-b2 {
                grid-template-rows: 1fr 1fr 1fr 1fr;
                grid-template-areas:
                    ". trainDisplay trainDisplay trainDisplay"
                    ". trainDisplay trainDisplay trainDisplay"
                    ". trainDisplay trainDisplay trainDisplay"
                    ". . . .";
            }
        }
    }

    @container prt-a1 (width > 0) {

        /*
            Slogan
         */
        .prt-c1 {
            align-items: center;
            width: inherit;
        }


        /*
            About Us
         */
        .prt-c2 {
            display: grid;
            grid-template-rows: 1fr 1fr;
            min-height: 90vh;
            height: auto;
            padding-top: 0;
            background: transparent;
            width: inherit;

            /* background: #243A37; */
            /* background: #2E2B40; */
        }

        #about {
            background: transparent;
        }

        /*
            Services
         */
        .prt-c3 {

        }

        @container prt-c1 (width > 0) {

            .prt-b1, .prt-b2, .prt-b3, .prt-b4 {
                display: grid;

                grid-template-columns: 1fr 1fr 1fr 1fr;

                justify-content: center;
                align-items: center;
                text-align: center;
            }

            .prt-b1, .prt-b3, .prt-b4 {
                grid-template-rows: 1fr 1fr 1fr 1fr;
            }

            .prt-b2 {
                grid-template-rows: 1fr 1fr 1fr;
            }

            .prt-b4 {
                color: #F9F9FA;
            }

            @container prt-b3 (width < 700px) {
                #sloganAnimationTextBox {
                    font-size: small;
                }
            }

            @container prt-b3 (width > 700px) {
                #sloganAnimationTextBox {
                    font-size: 1.2rem;
                }
            }

            @container prt-b3 (width > 0) {

                #sloganAnimationTextBox {
                    display: grid;
                    grid-template-rows: repeat(auto-fit, minmax(1rem, 1fr));

                    grid-area: anima;

                    max-width: 70ch;

                    align-items: center;
                    color: coral;
                    font-family: "JetBrainsMono-Regular", sans-serif;


                    opacity: 0;

                    animation: loadText 5s ease-in-out;
                    animation-fill-mode: forwards;
                }

                #sloganAnimationTextBox > h2:first-child {

                    justify-self: start;
                }

                #sloganTextAnimation {
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                }

                #sloganAnimationTextBox > #sloganTextAnimation > h2 {

                    margin: 0;
                    font-size: 3rem;
                }

                #leftHand, #rightHand {
                    overflow: hidden;
                }

                /*
                   TODO: Animation für leftHand und rightHand erstellen
                 */
                #sloganAnimationTextBox > h2:last-child {

                    justify-self: end;
                }
            }

            @container prt-b4 (width > 0) {
                #sapHeadline {
                    grid-area: sapHeadline;
                }

                #sapDoIt {
                    grid-area: sapDoIt;
                    display: grid;
                    justify-content: center;
                    grid-template-columns: 1fr 2fr;
                }
            }

            @container prt-b4 (width < 700px) {
                h1 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                }
            }

            @container prt-b4 (width > 700px) {
                h1 {
                    font-size: 2rem;
                    line-height: 3rem;
                }
            }

            @container prt-b1 (width > 0) {
                h1 {
                    grid-area: slText;
                }

                h3 {
                    grid-area: a_h3Top;
                }

                h4 {
                    grid-area: a_h4Top;
                }
            }

            @container prt-b2 (width > 0) {
                h3 {
                    grid-area: b_h3Top;
                }

                h4 {
                    grid-area: b_h4Top;
                }
            }
        }

        @container prt-c2 (width > 0) {

            .aboutBox {
                height: 35vh;
            }
        }
    }

    @container prt-a2 (width > 0) {

    }
}

/*
    Animationen | keyframes
 */

.aboutBoxGeometry {
    display: grid;
    height: 100%;
    background: burlywood;
}

.aboutBoxGeometryOverlay {
    display: grid;
    position: sticky;
    width: 100%;
    margin-top: -35vh;
}

.geometryLeft {
    grid-template-columns: 2fr 1fr;
    background-image: linear-gradient(45deg, antiquewhite, burlywood);
}

.geometryLeftShape {
    background: antiquewhite;
    transform: skew(-10deg, -10deg);
    filter: drop-shadow(2px 4px 6px black);
}

.geometryLeftOverlay {
    grid-template-columns: 2fr 1fr;
    height: 100%;
}

.geometryRight {
    grid-template-columns: 1fr 2fr;
    background-image: linear-gradient(45deg, burlywood, antiquewhite);
}

.geometryRightShape {
    background: antiquewhite;
    transform: skew(10deg, 10deg);
    filter: drop-shadow(2px 4px 6px black);
}

.geometryRightOverlay {
    grid-template-columns: 1fr 2fr;
    height: 100%;
}

.aboutBoxPicture {
    height: 35vh;
    filter: sepia(1);
}

.aboutBoxPictureBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutBoxText {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.aboutBoxTextLeft {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutBoxTextRight {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 0px) and (max-width: 700px) {

    .geometryLeft, .geometryLeftOverlay, .geometryRight, .geometryRightOverlay {
        container: smallGeometry / size;

        transition: grid-template-rows 0.5s linear;

        grid-template-columns: unset;
        grid-template-rows: 0fr 1fr;
    }

    main {
        grid-template-rows: 100vh;
    }

    #sloganLogo {
        height: 20vh;
    }

    #about {
        height: unset;
        gap: 4rem;
        margin: 0 2rem;
    }

    .aboutBox {
        display: flex;
        flex-direction: column;
        height: unset;
    }

    .aboutBoxText {
        justify-content: flex-start;
        height: 25vh;
    }

    .aboutBoxOverlay {
        display: none
    }

    .aboutBoxGeometry {
        height: 30vh;
    }

    .aboutBoxPicture {
        height: 30vh;
    }

    .aboutBoxPictureBox {
        align-items: flex-start;
    }

    .aboutBoxGeometryOverlay {
        height: 25vh;
        margin-top: unset;
    }

    .geometryLeft {
        background-image: linear-gradient(360deg, antiquewhite, burlywood);
    }

    .geometryLeftOverlay {
        background: antiquewhite;
    }

    .geometryRight {
        background-image: linear-gradient(360deg, burlywood, antiquewhite);
    }

    .geometryRightOverlay {
        background: burlywood;
    }

    .geometryRightShape {
        display: none;
    }

    .geometryLeftShape {
        display: none;
    }
}

@media (min-width: 701px) and (max-width: 1200px) {
    .geometryLeft, .geometryLeftOverlay, .geometryRight, .geometryRightOverlay {
        container: smallGeometry / size;
    }
}

@media (min-width: 701px) and (max-width: 845px) {
    .geometryRightOverlay, .geometryLeftOverlay {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 846px) and (max-width: 1000px) {
    .geometryRightOverlay {
        grid-template-columns: 1fr 1.5fr;
    }

    .geometryLeftOverlay {
        grid-template-columns: 1.5fr 1fr;
    }
}

@media (min-width: 1201px) and (max-width: 2000px) {
    .geometryLeft, .geometryLeftOverlay, .geometryRight, .geometryRightOverlay {
        container: mediumGeometry / size;
    }
}

@media (min-width: 2001px) {
    .geometryLeft, .geometryLeftOverlay, .geometryRight, .geometryRightOverlay {
        container: largeGeometry / size;
    }
}

.geometryLeftShape, .geometryRightShape {
    transition: transform 0.5s linear;
}

@container smallGeometry (width < 600px) {

    .geometryLeftShape {
        transform: skew(0deg, 0deg);
    }

    .geometryRightShape {
        transform: skew(0deg, 0deg);
    }
}

@container smallGeometry (width > 650px) and (width < 1200px) {

    .geometryLeftShape {
        transform: skew(0deg, 0deg);
    }

    .geometryRightShape {
        transform: skew(0deg, 0deg);
    }
}


@container mediumGeometry (width < 1300px) {

    .geometryLeftShape {
        transform: skew(-1deg, -1deg);
    }

    .geometryRightShape {
        transform: skew(1deg, 1deg);
    }
}

@container mediumGeometry (width > 1300px) and (width < 1400px) {

    .geometryLeftShape {
        transform: skew(-2deg, -2deg);
    }

    .geometryRightShape {
        transform: skew(2deg, 2deg);
    }
}

@container mediumGeometry (width > 1400px) and (width < 1500px) {

    .geometryLeftShape {
        transform: skew(-3deg, -3deg);
    }

    .geometryRightShape {
        transform: skew(3deg, 3deg);
    }
}

@container mediumGeometry (width > 1500px) and (width < 1600px) {

    .geometryLeftShape {
        transform: skew(-4deg, -4deg);
    }

    .geometryRightShape {
        transform: skew(4deg, 4deg);
    }
}

@container mediumGeometry (width > 1600px) and (width < 1700px) {

    .geometryLeftShape {
        transform: skew(-5deg, -5deg);
    }

    .geometryRightShape {
        transform: skew(4deg, 4deg);
    }
}

@container mediumGeometry (width > 1700px) and (width < 1800px) {

    .geometryLeftShape {
        transform: skew(-6deg, -6deg);
    }

    .geometryRightShape {
        transform: skew(6deg, 6deg);
    }
}

@container mediumGeometry (width > 1800px) and (width < 1900px) {

    .geometryLeftShape {
        transform: skew(-7deg, -7deg);
    }

    .geometryRightShape {
        transform: skew(8deg, 8deg);
    }
}

@container mediumGeometry (width > 1900px) and (width < 2000px) {

    .geometryLeftShape {
        transform: skew(-9deg, -9deg);
    }

    .geometryRightShape {
        transform: skew(9deg, 9deg);
    }
}

@container largeGeometry (width > 2000px) {

    .geometryLeftShape {
        transform: skew(-10deg, -10deg);
    }

    .geometryRightShape {
        transform: skew(10deg, 10deg);
    }
}