#APP_ME_menu{
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	overflow-y: scroll;
}



#ME_desc{
	/*width: calc(100% - 2em);*/
  margin-top: 1em;
  text-align: left;
  font-size: 1.1em;
  text-align: justify;
  font-family: CyberverseCondensed;
  color: var(--app-primary-color);
  text-shadow: 0 0 1em var(--app-primary-color), 0 0 0.1em var(--app-primary-color);
  filter: brightness(1.7);
}
#ME_desc p {
  padding: 1em 1em;
  margin: 0;
  box-shadow: 0 0 1em var(--app-primary-color);
}




#ME_abilities{
	width: calc(100% - 0em);
	margin-top: 3em;
}
.ME_ability{
	box-shadow: 0 0 1em var(--app-primary-color);
	padding: 1em 0em;
}
#ME_abilities p{
	margin-top: 0em;
  text-align: left;
  font-size: 1.1em;
  text-align: justify;
  font-family: CyberverseCondensed;
  color: var(--app-primary-color);
  text-shadow: 0 0 1em var(--app-primary-color), 0 0 0.1em var(--app-primary-color);
  filter: brightness(3.7);
  padding: 0 1em;
}
.APP_me_icons_container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.APP_me_icon {
  height: 3em;
  filter: drop-shadow(0 0 0.1em #fff) drop-shadow(0 0 0.1em #fff) drop-shadow(0 0 0.1em #3C95B9) drop-shadow(0 0 0.1em #fff);
  --icon_float_speed: 3.5s;
}
.APP_me_icon_float{
  animation: APP_me_icon_float var(--icon_float_speed) ease infinite;
}
@keyframes APP_me_icon_float{
	0%{transform:scale(1.0)}
	50%{transform:scale(0.9)}
	100%{transform:scale(1.0)}
}



#ME_conclusion {
  padding: 0em 1em 5em 1em;
}

.link_button {
  width: 80%;
  display: block;
  margin: 1em auto 0em auto;
  background: black;
  border: 0.1em solid #C3EEFF;
  padding: 0.5em 0em;
  box-shadow: 0 0 var(--box-shadow-thickness) 0px var(--app-primary-color), 0 0 var(--box-shadow-thickness) 0px var(--app-primary-color), 0 0 var(--box-shadow-thickness) 0px var(--app-primary-color), 0 0 var(--box-shadow-thickness) 0px var(--app-primary-color), inset 0 0 var(--box-shadow-thickness) 0px var(--app-primary-color), inset 0 0 5px 1px var(--app-primary-color);
  text-decoration: none;
  user-select: none;
  color: var(--color3);
  font-size: 1.5em;
  --box-shadow-thickness: 0.5em;
  text-shadow: 0 0 var(--box-shadow-thickness) var(--app-primary-color), 0 0 var(--box-shadow-thickness) var(--app-primary-color), 0 0 var(--box-shadow-thickness) var(--app-primary-color), 0 0 var(--box-shadow-thickness) var(--app-primary-color);
  border-radius: 0.1em;
  transition: all 0.7s ease;
  cursor: pointer;
}
.link_button:hover, .link_button:active{
	background: var(--color3);
  color: black;
}





/* ======= AVATAR EFFECTS ======= */

#mg_container{
  position: relative;
  width:300px;
  height:300px;
}

#mg_container{
  width: max-content;
  aspect-ratio: 1;
  margin-top: 0em;
}
#mg_photo_placeholder {
  width: 100%;
  opacity: 0;
}
.mg_photo_part{
  position: absolute;
  left:0;
}
#mg_photo_top{
  top:0 !important;
  bottom: unset !important;
}
#mg_photo_bottom{
  bottom:0 !important;
  top:unset !important;
}

/* ------- Digitalize appear ------- */
  #mg_digitalize {
    position: relative;
    width:100%;
    height:100%;

    opacity: 1;
    animation: digitalize 1.4s ease-out forwards;
    animation-delay: 0.4s;
    filter: brightness(120%) contrast(150%);

    clip-path: inset(0 0 100% 0);
    filter: blur(6px) brightness(300%) contrast(150%);
    opacity: 0;
  }
  @keyframes digitalize{
    0% {
      clip-path: inset(0 0 100% 0);
      filter: blur(6px) brightness(300%) contrast(150%);
      opacity: 0;
    }
    25%{
      filter: blur(0) brightness(100%) contrast(100%);
    }
    100% {
      clip-path: inset(0 0 0% 0);
      opacity: 1;
      filter: blur(0) brightness(100%) contrast(100%);
    } 
  }

  #digitalize_halo{
    /*background: var(--app-primary-color);*/
    background: url(../assets/vhs-snow-blue.gif);
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0%;
    animation: digitalize_halo 1.4s ease-out forwards;
    animation-delay: 0.4s;

    clip-path: inset(0 0 100% 0 round 1rem);
  }
  @keyframes digitalize_halo{
    0%{
      clip-path: inset(0 0 100% 0 round 1rem);
    }
    1%{
      clip-path: inset(0 0 97% 0 round 1rem);
    }
    99%{
      clip-path: inset(97% 0 0% 0 round 1rem);
    }
    100%{
      clip-path: inset(100% 0 0% 0 round 1rem);
    }
  }

/* ------- Glitch effect ------- */
  #mg_glitch {
    position: relative;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 300px;
    height: 300px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .mg_color_photo{
    width:300px;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 1s ease;
  }
  #mg_photo_patchwork img{
    width: 100%;
  }
  .mg_color_photo_part, .mg_color{
    position: absolute;
    left:0;
  }
  #mg_color_photo_top, .mg_color_photo_bottom{
    top:0 !important;
    bottom:unset !important;
  }
  #mg_color_photo_bottom, .mg_color_photo_top{
    top:unset !important;
    bottom:0 !important;
  }
  .glitch_img{
    opacity: 0.5;
    /*transform:translate(var(--glitch_left), var(--glitch_top));*/
    transform: translate(0,0);
    transition: transform calc( var(--glitch_duration) / 3) ease
  }
  .glitch_img img{
    width: 100%;
  }
  #mg_color_0 {
    /*R*/
    --glitch_top: 0.16em;
    --glitch_left: -0.4em;
    filter: sepia(1) hue-rotate(300deg) saturate(10);
  }
  #mg_color_1 {
    /*G*/
    --glitch_top: -0.14em;
    --glitch_left: 0.12em;
    filter: sepia(1) hue-rotate(80deg) saturate(10);
  }
  #mg_color_2 {
    /*B*/
    --glitch_top: 0.14em;
    --glitch_left: -0.24em;
    filter: sepia(1) hue-rotate(160deg) saturate(10);
  }
  
  @keyframes glitch_move{
    0%{transform:translate(0px, 0px);}
    30%{transform:translate(var(--glitch_left), var(--glitch_top));}
    100%{transform:translate(0px, 0px);}
  }
  .glitch_front{
    --glitch_opacity:0.1;
    transition: opacity calc( var(--glitch_duration) / 3) ease;
  }
  @keyframes glitch_fade{
    0%{
      opacity:1;
    }
    25%{
      opacity:1;
    }
    30%{
      opacity: var(--glitch_opacity);
    }
    50%{
      opacity: var(--glitch_opacity);
    }
    70%{
      opacity: var(--glitch_opacity);
    }
    75%{
      opacity:1;
    }
    100%{
      opacity:1;
    }
  }

/* ------- Background ------- */
  #mg_bg {
    width: 100%;            /* taille finale */
    height: 100%;

    /* === Texture visible à travers la forme === */
    background-image: url("../assets/vhs-snow.gif");
    background-size: cover;

    /* === Ton image sert de "pochoir" === */
    mask-image: url("../assets/mg.png");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /* Chrome/Safari (obligatoire) */
    -webkit-mask-image: url("../assets/mg.png");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    position: absolute;
    top: 0;
    left: 0;

  }