/* =====  ANIMATE  ==================================================== */


:root {
    --delay: 0.25s;
}

.tile-whitex {
    background: none;
    background-color: #333;border: 1px solid red;
}

.hfg-block, .hfg-block .hfg-mask {
    transition-delay: calc(var(--delay) + 0s);
}
.hfg-roof, .hfg-roof .hfg-mask {
    transition-delay: calc(var(--delay) + 0.2s);
}
.hfg-grass, .hfg-grass .hfg-mask {
    transition-delay: calc(var(--delay) + 0.2s);
}
.hfg-red, .hfg-red .hfg-mask {
    transition-delay: calc(var(--delay) + 0.3s);
}
.hfg-sky, .hfg-sky .hfg-mask {
    transition-delay: calc(var(--delay) + 0.45s);
}

.hfg-animate-holder {
    width: 100%;
    display: flex;
    flex-direction: row;align-items: center;
    column-gap: 7%;
}  
.hfg-logomark {
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
}   
.hfg-layer {
    position: absolute;
    opacity: 0;
    transform: translateX(100%);
}
.hfg-layer.animate {
    transform: translateX(0%);
    opacity: 1;
}
.hfg-mask {
    position: absolute;
    transition: transform .4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s;
}
.hfg-mask {
    
   
   background-color: #fff;

} 
.hfg-logotype {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(5%);

}
.hfg-logotype img {
    opacity: 0;
   transform: translateX(25%);
   transition: transform .5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s;
}
.hfg-logotype.animate .img1 {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: calc(var(--delay) + 0.25s);
}
.hfg-logotype.animate .img2 {
    opacity: 1;
    transform: translateX(0%);
    transition-delay: calc(var(--delay) + 0.35s);
}

/*** BLOCK ***/

.hfg-block {
    display: flex;
    justify-content: center;
}
.hfg-block .hfg-mask {
    width: 50%;
    aspect-ratio: 1/0.82;
    top: 39.5%;
    transform-origin: top center;
}

.hfg-block.animate .hfg-mask  {
    transform: scaleY(0.01);
}

/*** roof ***/

.hfg-roof {
    display: flex;
    justify-content: center;
}
.hfg-roof .hfg-mask { 
    width: 45%;
    aspect-ratio: 1/0.4;
    top: 20%;
    transform-origin: bottom center;
}
.hfg-roof.animate .hfg-mask  {
    transform: scaleY(0.01);
}

/*** grass ***/

.hfg-grass {
    display: flex;
    justify-content: center;
}
.hfg-grass .hfg-mask {
    width: 45%;
    aspect-ratio: 1/0.4;
    top: 82%;
    transform-origin: top center;
}
.hfg-grass.animate .hfg-mask  {
    transform: scaleY(0.01);
}

/*** red ***/

.hfg-red { 
    display: flex;
    justify-content: center;
}
.hfg-red .hfg-mask {
    width: 24%;
    top: 20%;
    aspect-ratio: 1/2.5;
}
.hfg-red .hfg-mask.mask-l {
    left: 0;
    transform-origin: left center;
}
.hfg-red .hfg-mask.mask-r {
    right: 0;
    transform-origin: right center;
}
.hfg-red.animate .hfg-mask  {
    transform: scaleX(0.01);
}

/*** sky ***/

.hfg-sky {
    display: flex;
    justify-content: center;
}
.hfg-sky .hfg-mask {
    width: 35%;
    top: -15%;
    aspect-ratio: 1/1.1;
}
.hfg-sky .hfg-mask.mask-l {
    left: 14%;
    transform: rotate(50deg);
    transform-origin: left center;
}
.hfg-sky .hfg-mask.mask-r {
    right: 14%;
    transform: rotate(-50deg);
    transform-origin: right center;
}
.hfg-sky.animate .hfg-mask.mask-l  {
    transform: rotate(50deg) scaleX(0.01);
} 
.hfg-sky.animate .hfg-mask.mask-r  {
    transform: rotate(-50deg) scaleX(0.01);
}

/*** door ***/

.hfg-door {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(20%);
    transition: transform .4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.1s;
    transition-delay: calc(var(--delay) + 0.6s);
}
.hfg-door.animate  {
    transform: translateY(0%);
    opacity: 1;
}