@font-face {
  font-family: gothic;
  src: url(../font/GOTHICB.TTF);
}

*{
  box-sizing: border-box;
}

body{
  margin:0;
  background: black;
  background-size: cover;
}


.container{
  display:flex;
  height:100vh;
  overflow: hidden;
}

.logo_section{
  flex:1;
  height:100%;
  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
}


.logo_section::before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-image: url('../particle.jpg');
  background-size:200%;
  animation:particle 30s infinite;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

.frame{
  position:absolute;
  width:35vmin;
  pointer-events: none;
  z-index: 2;
}

.top_frame{
  left:0;
  top:0;
}

.bottom_frame{
  right:0;
  bottom:0;
}

.logo{
  width: 70%;
  margin-bottom: 5%;
  z-index: 2;
  -webkit-animation: puff-in-center 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
        animation: puff-in-center 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

.providers{
  position:absolute;
  width:90%;
  left:5%;
  bottom:2%;
  z-index: 2;
}

.country{
  flex:1;
  background: linear-gradient(#ffdd92,#c69428,#998835);
  display:flex;
  position:relative;
}

.country_text{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  text-align: center;
  z-index: 10;
  font-size: clamp(14px,3vmin,25px);
  padding:1vmin 2vmin;
  font-family: gothic;
  background: linear-gradient(rgb(20,20,20),black);
  color:#dfb846;
  white-space: nowrap;
}

.country_text span{
  color:white;
  font-style: italic;
}

.country_item{
  flex:1;
  display:flex;
  align-items: center;
  cursor:pointer;
  position:relative;
  text-decoration: none;
}

.country_content{
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:relative;
  overflow: hidden;
  box-shadow:inset 5px 0px 5px #494949;
}


.country_content::after{
  content:"";
  left:0;
  top:0;
  position:absolute;
  width:100%;
  height:100%;
  background:black;
  opacity: 0.3;
  z-index: 4;
}


.light{
  position:absolute;
  z-index: 5;
  width:15vmin;
  opacity: 0;
  transition: 0.2s;
  display:none;
  pointer-events: none;
}

.left_light{
  bottom:40%;
  left:0;
  transform:translateX(-50%);
  animation:light_left 3s infinite;
}

.right_light{
  top:40%;
  right:0;
  transform:translateX(50%);
  animation:light_right 3s infinite;
}


.country_circle{
  width:80%;
  max-width: 230px;
  display:flex;
  align-items: center;
  justify-content: center;
  position:relative;
  margin-bottom: 5%;
  z-index:4;
  transition: 0.3s;
}

.circle{
  width:100%;
  border-radius: 100%;
}

.country_circle span{
  z-index: 2;
  font-size: clamp(3vmin,3vmin,25px);
  font-weight: bold;
  font-family: gothic;
  font-style: italic;
  color:white;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate3d(-50%,-50%,0);
}


.right_s_light{
  animation:right_s_light 10s infinite;
}

.left_s_light{
  animation:left_s_light 10s infinite;
}

.s_light{
  position:absolute;
  width:15vmin;
  opacity: 0;
  display:none;
  transition: 0.2s;
}

.country_bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:60%;
  object-fit: cover;
  object-position: bottom;
  opacity: 0;
  transition: 0.5s;
  mix-blend-mode: hard-light;
}


.flag{
  position:absolute;
  bottom:-10%;
  width:100%;
  height:60%;
  object-fit:cover;
  object-position: left;
  clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
  transition: 0.5s;
}


.country_active .light{
  display:block;
}

.country_active .country_content::after{
  opacity: 0;
}

.country_active .flag{
  bottom:0;
}

.country_active .s_light{
  display:block;
}

.country_active .country_bg{
  opacity: 0.3;
}

.country_active .country_circle{
  transform:scale(1.2);
}



/**
 * ----------------------------------------
 * animation particle
 * ----------------------------------------
 */

  @keyframes particle {
    0%,100%{
      background-position: top left;
    }

    50%{
      background-position: bottom right;
    }
  }


  /**
   * ----------------------------------------
   * animation s_light
   * ----------------------------------------
   */

    @keyframes right_s_light {
      0%,100%{
        transform:rotate(0deg) translateY(75%);
        opacity: 1;
      }

      50%{
        transform:rotate(120deg) translateY(75%);
        opacity: 0;
      }
    }


    @keyframes left_s_light {
          0%,100%{
            transform:rotate(190deg) translateY(75%);
            opacity: 1;
          }

          50%{
            transform:rotate(310deg) translateY(75%);
            opacity: 0;
          }
      }


    /**
     * ----------------------------------------
     * animation light
     * ----------------------------------------
     */

      @keyframes light_left {
        0%{
          bottom:40%;
          opacity: 0;
        }

        50%{
          opacity: 1;
        }

        100%{
          bottom:0%;
          opacity: 0;
        }
      }


        @keyframes light_right {
          0%{
            top:40%;
            opacity: 0;
          }

          50%{
            opacity: 1;
          }

          100%{
            top:0%;
            opacity: 0;
          }
        }



        /**
         * ----------------------------------------
         * animation puff-in-center
         * ----------------------------------------
         */
        @-webkit-keyframes puff-in-center {
          0% {
            -webkit-transform: scale(2);
                    transform: scale(2);
            -webkit-filter: blur(4px) drop-shadow(5px 5px 3px black);
                    filter: blur(4px) drop-shadow(5px 5px 3px black);
            opacity: 0;
          }
          100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-filter: blur(0px) drop-shadow(5px 5px 3px black);
                    filter: blur(0px) drop-shadow(5px 5px 3px black);
            opacity: 1;
          }
        }
        @keyframes puff-in-center {
          0% {
            -webkit-transform: scale(2);
                    transform: scale(2);
            -webkit-filter: blur(4px) drop-shadow(5px 5px 3px black);
                    filter: blur(4px) drop-shadow(5px 5px 3px black);
            opacity: 0;
          }
          100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-filter: blur(0px) drop-shadow(5px 5px 3px black);
                    filter: blur(0px) drop-shadow(5px 5px 3px black);
            opacity: 1;
          }
        }


@media (orientation: portrait) {
    .container{
        flex-direction: column;
    }

    .logo{
      align-self: flex-start;
      margin-top:15vmin;
    }

    .country{
      position:absolute;
      bottom:15%;
      left:10%;
      width:80%;
      height:50%;
    }

}