@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


.tile__image__container{
    position:relative;
    width: 180px;
    aspect-ratio: 1;
}

.tile__image__container--pointer{
    cursor: pointer;
}

.tile__image__container__image{
    /*background-image: url("../../../img/magazynbiomasa/webinarium-biogazowe-xylem/maja_rosiak.png");*/
    background-size: cover;

    width: 100%;
    aspect-ratio: 1;

    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index: 1;

    border-radius: 5px;

    transition: all .5s;

backface-visibility: hidden;
}


.tile__image__container__image__text{
    background-color: whitesmoke;
    color:black;
    font-size: 3em;
    text-align: center;

    position: absolute;
    left:50%;
    transform: translateX(-50%);
    opacity:0;
    visibility: hidden;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:.3em;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;

}

.tile__image__container__image__text__name{
    color: var(--blue1);
    padding: .8em .2em;
    font-size: 2em;
    top:50%;
    transform: translateY(-50%);
    width: 100%;
    transition: all .4s;
}

.tile__image__container__image__text__title{
    color: var(--blue1);
    bottom: 0;
    font-size: 1.2em;
    height: 2rem;
    width: 120%;
    /*min-width: 100%;*/
    cursor: default;
}

.tile__image__container__image__text__link{
    color: var(--orange1);
    bottom: 0;
    font-size: 1em;
    height: 2rem;
    width: 90%;

    transition: all .4s;
}


.tile__image__container:hover .tile__image__container__image {
    width: 200px;
    border-radius: 10px;
    box-shadow: 3px 8px 20px 7px rgb(144, 144, 153);
    z-index: 9999;
}

.tile__image__container:hover .tile__image__container__image__text {
    opacity:1;
    visibility: visible;
}

.tile__image__container:hover .tile__image__container__image__text__name {
    border-left: 3px solid var(--orange1);

    animation: moveTextToLeft .7s ease-out;
    transform: translate(-150%,-50%);
}
.tile__image__container:hover .tile__image__container__image__text__title {
    border-right: 2px solid var(--orange1);
    border-left:  2px solid var(--orange1);
    border-bottom:  2px solid var(--orange1);

    animation: moveTextToBottom .7s ease-in;
    transform: translate(-50%,100%);
}

.tile__image__container:hover  .tile__image__container__image__text__link {
    border-right: 2px solid var(--orange1);
    border-left:  2px solid var(--orange1);

    animation: moveTextToFarBottom 1.1s ease-in-out;
    transform: translate(-50%,193.5%);
}

.tile__image__container__image__text__name:hover{
    border-left:  3px solid var(--blue1) !important;
    color: var(--orange1);
}

.tile__image__container__image__text__link:hover{
    border-left:  2px solid var(--blue1) !important;
    border-right:  2px solid var(--blue1) !important;
    color: var(--blue1);
}

@keyframes moveTextToLeft {
    0%{
        opacity:0;
        visibility: hidden;
        transform: translate(-50%,-50%);

    }

    40%{
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%,-50%);
    }

    80%{
        transform: translate(-160%,-50%);
    }

    100%{
        opacity:1;
        transform: translate(-150%,-50%);
    }
}

@keyframes moveTextToBottom {
    0%{
        opacity:0;
        visibility: hidden;
        transform: translate(-50%,0%);
    }

    40%{
        opacity: 0;
        visibility: hidden;
    }

    80%{
        transform: translate(-50%,120%);
    }

    100%{
        opacity:1;
        transform: translate(-50%,100%);
    }
}

@keyframes moveTextToFarBottom {
    0%{
        opacity:0;
        visibility: hidden;
        transform: translate(-50%,0%);
    }

    40%{
        opacity: 0;
        visibility: hidden;
    }

    80%{
        transform: translate(-50%,240%);
    }

    100%{
        opacity:1;
        transform: translate(-50%,195%);
    }
}