/* █▀▀ █▀█ █▄ █ ▀█▀ */
/* █▀  █▄█ █ ▀█  █  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: dunkin;
  src: url(font/Typo_Round_Regular_Demo.otf) format("opentype");

}

@font-face {
  font-family: helveticas;

  src: url(font/ComicHelvetic_Medium.otf) format("opentype");

}

/* ▄▀█ █▄ █ █ █▀▄▀█ ▄▀█ ▀█▀ █ █▀█ █▄ █ */
/* █▀█ █ ▀█ █ █ ▀ █ █▀█  █  █ █▄█ █ ▀█ */

@keyframes logo {
  0% {
    scale: 1;
    rotate: 0deg;
  }

  50% {
    scale: 1.1;
  }

  100% {
    scale: 1;
    rotate: -10deg;
  }
}

/* Assure que les balises non standards sont bien animables */
moy,
gr,
fin,
vl {
  display: inline-block;
  /* ou block si nécessaire */
}

/* Animation de glissement depuis le bas */
@keyframes slideUp {
  0% {
    transform: translateY(100px);
    scale: 1;
    opacity: 1;
  }

  50%{
    transform: translateY(60px);
    opacity: 1;
    scale: 1.1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
    scale: 1;
  }
}

/* Animation de glissement depuis le bas */
@keyframes slideUpca {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.1;
  }

  100% {
    scale: 1;
  }
}
/* Classe générale pour l'animation */
.animate {
  animation: slideUp 0.3s ease-out;
  will-change: transform, opacity;
  animation-fill-mode: both;
}
.animate.logo {
  animation: slideUpca 0.4s ease-out, relan 20s infinite;
  will-change: transform;
}

/* Cache les éléments avant l'animation */
.hidden {
  opacity: 0;
  visibility: hidden;
}
.hidden.logo {
  opacity: 1;
  visibility: visible;
}
/* Une fois animés, ils deviennent visibles */
.animate {
  visibility: visible;
}


@keyframes relan {
  0% {
    box-shadow: 0 0 30px #70B8FF;
  }

  25% {
    box-shadow: 0 0 50px #C2E6FF;
  }

  50% {
    box-shadow: 0 0 40px #54a9ff;
  }

  75% {
    box-shadow: 0 0 60px #2587e8;
  }

  100% {
    box-shadow: 0 0 30px #70B8FF;
  }
}
/*
@keyframes relan {
  0% {
    box-shadow: 0 0 30px #70ff70;
  }

  25% {
    box-shadow: 0 0 50px #a0ff95;
  }

  50% {
    box-shadow: 0 0 40px #73ff54;
  }

  75% {
    box-shadow: 0 0 60px #3fd03d;
  }

  100% {
    box-shadow: 0 0 30px #88ff70;
  }
}*/


@keyframes moveDot {

  0%,
  100% {
    top: 10%;
    right: 10%;
  }

  25% {
    top: 10%;
    right: calc(100% - 35px);
  }

  50% {
    top: calc(100% - 30px);
    right: calc(100% - 35px);
  }

  75% {
    top: calc(100% - 30px);
    right: 10%;
  }
}


@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes progress {
  0% {
    width: 0;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* Effet d'apparition avec blur */
@keyframes blur-in {
  0% {
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Effet de disparition simple */
@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0eg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/*  ██████╗  ██╗       ██████╗  ██████╗   █████╗  ██╗      */
/* ██╔════╝  ██║      ██╔═══██╗ ██╔══██╗ ██╔══██╗ ██║      */
/* ██║  ███╗ ██║      ██║   ██║ ██████╔╝ ███████║ ██║      */
/* ██║   ██║ ██║      ██║   ██║ ██╔══██╗ ██╔══██║ ██║      */
/* ╚██████╔╝ ███████╗ ╚██████╔╝ ██████╔╝ ██║  ██║ ███████╗ */
/*  ╚═════╝  ╚══════╝  ╚═════╝  ╚═════╝  ╚═╝  ╚═╝ ╚══════╝ */

:root {
  --first-height: 80vh;
  --second-height: 528.60px;
  --third-height: 400vh;
  --four-height: 88px;
  --outline-color: #70768257;
  --text-highlight: #70b8ff;
  --text-color: #F4F8FF;
  --primer-color: #1D2E62;
  --card: #182449;
  --background-color: #0b0c10;
}/*
:root {
  --first-height: 80vh;
  --second-height: 528.60px;
  --third-height: 400vh;
  --four-height: 88px;
  --outline-color: #70768257;
  --text-highlight: #46A758;
  --text-color: #F4F8FF;
  --primer-color: #366740;
  --card: #2D5736;
  --background-color: #0b100b;
}*/

* {
  transition: font-size 0.25s, top 0.25s, translate 0.25s ease-in-out, scale 0.5s ease-in-out, margin 0.5s ease-in-out, rotate 0.3s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, opacity 1s ease-in-out, background-color 0.5s, color 0s, box-shadow 0.5s, text-shadow 0.5s, transform 1s, text-decoration 0.5s;
  z-index: 1;
}

html {
  scroll-behavior: smooth;
}

/* Ajoutez un padding au main pour laisser de l'espace au footer */
main {
  flex: 1;
  margin: 0;
  width: 100%;
  height: calc(var(--third-height)) !important;
}

.outlinegen {
  width: calc(100% - 154px) !important;
  height: calc(var(--second-height) + var(--first-height) + var(--third-height) + var(--four-height) - 100px) !important;
  border-left: var(--outline-color) solid;
  border-right: var(--outline-color) solid;
  margin-left: 74px;
  margin-right: 80px;
  position: absolute;
}

button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

/* Style global */
body {
  overflow-x: hidden;
  background-color: var(--background-color);
  margin: 0;
  font-family: dunkin;
}

a {
  pointer-events: all !important;
  position: relative !important;
  display: inline-block !important;
  padding: 5px;
  border-radius: 10px 10px 0 0;
}

a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background-color: var(--text-highlight);
  left: 50%;
  bottom: 0px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

a:hover::after {
  width: 110%;
}

.sel::after {
  width: 100%;
}

.morgan {
  position: absolute;
  height: 50px;
  left: 0px !important;
  top: 0px;
  font-style: normal;
  font-size: 22px;
  line-height: 22px;
  padding: 10px;
  /* or 98% */
  display: flex;
  align-items: center;
  color: var(--text-highlight);
  margin: 40px;
  margin-left: 30px;
  background: transparent;
  z-index: 999;
}

p {
  padding: 0;
  margin: 0;
  margin-top: 10px;
  font-size: 25px;
  height: 200px !important;
}

/* Appliquer l'animation de blur pour l'apparition */
.blur-in {
  animation: blur-in 1s forwards;
}

/* Appliquer l'animation de disparition simple */
.fade-out {
  animation: fade-out 1s forwards;
}

.blanc {
  color: var(--text-color);
}

.mov {
  position: relative;
  top: -25px;
}

vl {
  color: var(--text-highlight);
  margin: 0;
  padding: 0;
}

vl:hover {
  font-size: 35px;
}

gr {
  font-size: 65px;
  margin: 1.41vw;
  padding: 0;
  position: relative;
  top: -32px;
  margin-bottom: 0;
}

gr:hover {
  font-size: 70px;
}

moy {
  font-size: 52px;
  margin: -0.10px;
  padding: 0;
  position: relative;
  top: -4px;
}

moy:hover {
  font-size: 60px;
}

moy:hover~.adder {
  top: 42px;
}

gr:hover~.adder {
  width: 120px;
  top: 20px;
  right: -60px;
}

.showoed {
  -webkit-filter: drop-shadow(0px 0px 5px #ffffff);
  filter: drop-shadow(0px 0px 5px #222);
}

.cursor {
  pointer-events: none;
  position: fixed;
  display: none;
  transition: mix-blend-mode 0.5s ease-out;
  border-radius: 0;
  mix-blend-mode: difference;
  z-index: 9999;
  border: #C2E6FF 2px solid;
}

.circle {
  pointer-events: none;
  transition: none;
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #fff;
}

.cacheMis {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: var(--background-color);
  z-index: 99999;
}

/* ██████╗   █████╗   ██████╗ ██╗  ██╗  ██████╗  ██████╗   ██████╗  ██╗   ██╗ ███╗   ██╗ ██████╗  */
/* ██╔══██╗ ██╔══██╗ ██╔════╝ ██║ ██╔╝ ██╔════╝  ██╔══██╗ ██╔═══██╗ ██║   ██║ ████╗  ██║ ██╔══██╗ */
/* ██████╔╝ ███████║ ██║      █████╔╝  ██║  ███╗ ██████╔╝ ██║   ██║ ██║   ██║ ██╔██╗ ██║ ██║  ██║ */
/* ██╔══██╗ ██╔══██║ ██║      ██╔═██╗  ██║   ██║ ██╔══██╗ ██║   ██║ ██║   ██║ ██║╚██╗██║ ██║  ██║ */
/* ██████╔╝ ██║  ██║ ╚██████╗ ██║  ██╗ ╚██████╔╝ ██║  ██║ ╚██████╔╝ ╚██████╔╝ ██║ ╚████║ ██████╔╝ */
/* ╚═════╝  ╚═╝  ╚═╝  ╚═════╝ ╚═╝  ╚═╝  ╚═════╝  ╚═╝  ╚═╝  ╚═════╝   ╚═════╝  ╚═╝  ╚═══╝ ╚═════╝  */

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-size: cover;
  background-position: center;
  z-index: -1 !important;
}

.blob {
  z-index: -2 !important;
  position: absolute;
  top: 0;
  left: 0;
}


/* ██╗  ██╗ ███████╗  █████╗  ██████╗  ███████╗ ██████╗  */
/* ██║  ██║ ██╔════╝ ██╔══██╗ ██╔══██╗ ██╔════╝ ██╔══██╗ */
/* ███████║ █████╗   ███████║ ██║  ██║ █████╗   ██████╔╝ */
/* ██╔══██║ ██╔══╝   ██╔══██║ ██║  ██║ ██╔══╝   ██╔══██╗ */
/* ██║  ██║ ███████╗ ██║  ██║ ██████╔╝ ███████╗ ██║  ██║ */
/* ╚═╝  ╚═╝ ╚══════╝ ╚═╝  ╚═╝ ╚═════╝  ╚══════╝ ╚═╝  ╚═╝ */


/* Header */
header {
  position: fixed;
  width: 100%;
  height: 150px !important;
  left: 0;
  top: 0;
  z-index: 999;
  background: var(--background-color);
  background: linear-gradient(180deg, var(--background-color) 10%, transparent 100%);
}

/* NavBar */
.nav-bar {
  /* Auto layout */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  gap: 30px;
  position: absolute;
  height: 50px;
  right: 0;
  top: -1px;
  margin: 40px;
  margin-right: 70px;
}

article h2 {
  font-size: 2.6em !important;
}

/* Accueil */
.accueil {
  width: 62px;
  height: 22px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  /* identical to box height, or 108% */
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-color);
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  text-decoration: none;
}

.true {
  color: green;
}

.false {
  color: red;
}

.same {
  color: yellow;
}

/* Portfolio */
.portfolio {
  width: 50px;
  height: 22px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  /* identical to box height, or 108% */
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-color);
  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
  text-decoration: none;
}

/* Contact */
.contact {
  width: 68px;
  height: 22px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  /* identical to box height, or 108% */
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-color);
  /* Inside auto layout */
  flex: none;
  order: 2;
  flex-grow: 0;
  text-decoration: none;
}





.morgan::after {
  content: '';
  background-color: transparent;
  background: linear-gradient(180deg, transparent 0%, var(--background-color) 30%, var(--background-color) 70%, transparent 100%);
  position: absolute;
  top: 0;
  left: 44px;
  width: 2px;
  height: 100%;
  z-index: -1000;
}


/* ███╗   ███╗  █████╗  ██╗ ███╗   ██╗ */
/* ████╗ ████║ ██╔══██╗ ██║ ████╗  ██║ */
/* ██╔████╔██║ ███████║ ██║ ██╔██╗ ██║ */
/* ██║╚██╔╝██║ ██╔══██║ ██║ ██║╚██╗██║ */
/* ██║ ╚═╝ ██║ ██║  ██║ ██║ ██║ ╚████║ */
/* ╚═╝     ╚═╝ ╚═╝  ╚═╝ ╚═╝ ╚═╝  ╚═══╝ */


/* Presentation */
.presentation {
  position: absolute;
  width: calc(100% - 400px);
  height: 100%;
  left: 0;
  top: 0;
}


/* Salut, je suis Morgan Mazza Voici mon portfolio */
.textepresentation {
  position: absolute;
  left: 20%;
  top: calc(50% - 102px);
  display: flex;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  color: var(--text-color);
}

.effect_txt {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 200px;
  height: 200px;
  background-color: var(--primer-color);
  filter: blur(70px);
  border-radius: 1000px;
  z-index: -1 !important;
  animation: relan 5s infinite;
}

.adder {
  position: absolute;
  top: 30px;
  filter: brightness(200);
  right: -50px;
  width: 100px;
  transition: all 0.25s !important;
}

.social_link {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 25px;
  position: absolute;
  margin-left: -40.5px;
  bottom: -130px;
}

.noef::after {
  opacity: 0;
}

.nono {
  padding: 10px;
}

.nono:hover {
  background-color: transparent;

}

.nono::after {
  display: none;
}

.nono:hover .noef {
  background-color: rgba(0, 0, 0, 0);
  animation: shake infinite 0.25s;
  scale: 1.15;
  position: relative;
  translate: 0px 10px;
}

.tagla {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
  z-index: 10 !important;
}

.tagla span {
  padding: 10px;
  background-color: var(--card);
  margin-left: 5px;
  border-radius: 10000px;
}

.tagla span:hover {
  animation: shake infinite 0.25s;
  scale: 1.15;
  position: relative;
  translate: 0px 10px;
}

.youtube_v {
  width: 55px;
  height: 38px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.inta_v {
  width: 38px;
  height: 38px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.dicord_v {
  width: 49px;
  height: 38px;
  flex: none;
  order: 2;
  flex-grow: 0;
}

.tiktok_v {
  width: 34px;
  height: 38px;
  flex: none;
  order: 3;
  flex-grow: 0;
}

.bio {
  position: relative;
  top: 200px;
  width: 100%;
  text-align: center;
  padding-inline: 15%;
  color: var(--text-color);
}

/* █   █▀█ █▀▀ █▀█ */
/* █▄▄ █▄█ █▄█ █▄█ */

.logo {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  right: 2%;
  top: calc(50% - 200px);
  animation: relan 20s infinite;
}

.logo:hover {
  rotate: -20deg;
}


.logo2 {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 200px);
  box-shadow: 0 0 30px var(--text-highlight);
}

.section--one {
  position: relative;
  top: -45px;
}

@media(min-width: 1325px) {
  @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
  @import 'normalize.css';

  @media(max-height: 760px) {
    section {
      top: 150px;
    }

    .scrollers {
      width: 75vw !important;
      max-width: 1000px !important;
      min-width: 0px;
    }
  }

  .panel {
    display: none !important;
  }

  h1 {
    position: relative;
    font-size: clamp(2rem, 3vw + 1rem, 8rem);
  }

  h2,
  p,
  a,
  .tagla {
    margin: 0;
  }

  :root {
    --lower: 150px;
    --upper: 290px;
    --mid: 40vmin;
    --ratio: 0.075;
    --gap: clamp(var(--lower) * var(--ratio),
        var(--mid) * var(--ratio),
        var(--upper) * var(--ratio));
  }

  section,
  article {
    height: 100%;
    position: relative;
    width: 100%;
    max-width: 40ch;
    color: var(--text-color) !important;
  }

  header {
    height: 50vh;
    display: grid;
    place-items: end;
  }

  body>section {
    height: 25vh;
  }

  /* These determine the scroll distance for change  */
  main>section {
    height: 80vh;
  }

  h1 span {
    font-size: 0.5em;
    display: block;
    text-align: center;
    font-variant: small-caps;
  }

  h1::after {
    content: "*";
    position: absolute;
    top: -5px;
    left: 100%;
    font-size: 0.6em;
  }

  .centered {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 100%;
  }

  .centered h2 {
    font-size: clamp(1.5rem, 2vw + 1rem, 6rem);
  }

  .tiles {
    display: grid;
    width: clamp(var(--lower), var(--mid), var(--upper));
    display: flex;
    flex-direction: column-reverse;
    justify-self: center;
    position: relative;
    top: -55px;
    left: -65px;
    scale: 1.3;
    translate: 0 calc(50% + (var(--gap)));
  }

  .tile {
    height: var(--gap);
    position: relative;
  }

  hr {
    height: 0;
    width: 100%;
    border: solid;
    border-radius: 1000px;
  }

  @media(min-width: 768px) {
    hr {
      width: calc(100% + 4rem);
      translate: -4rem 0;
    }

    .tiles {
      justify-self: end;
    }
  }

  .tile::after,
  .tile::before {
    content: '';
    background-image: url(https://assets.codepen.io/605876/translucent-panel.png);
    position: absolute;
    width: 100%;
    aspect-ratio: 1160 / 521;
    background-size: cover;
    pointer-events: none;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    filter: brightness(1.3);
  }

  .tile1::after {
    opacity: 0;
    background-image: url(./icon/bottom-panel2.png);
    pointer-events: none;
  }

  .tile2::after {
    opacity: 0;
    background-image: url(./icon/bottom-panel4.png);
    pointer-events: none;
  }

  .tile3::after {
    opacity: 0;
    background-image: url(./icon/bottom-panel3.png);
    pointer-events: none;
  }

  .tile4::after {
    opacity: 0;
    background-image: url(./icon/bottom-panel1.png);
    pointer-events: none;
  }

  .tile1:nth-of-type(1)::after {
    filter: brightness(2);
    pointer-events: auto;
  }

  .tile1:nth-of-type(4)::after {
    opacity: 1;
    pointer-events: auto;
  }

  .tile2:nth-of-type(4)::after {
    opacity: 1;
    pointer-events: auto;
  }

  .tile3:nth-of-type(4)::after {
    opacity: 1;
    pointer-events: auto;
  }

  .tile4:nth-of-type(4)::after {
    opacity: 1;
    pointer-events: auto;
  }

  .content {
    min-height: 100vh;
    display: grid;
    grid-template: 1fr 1fr / 1fr;
    place-items: center;
    gap: 4rem;
    position: sticky;
    top: 0;
    margin-bottom: 50vh;
    padding: 2rem;
    z-index: 2 !important;
  }

  article {
    pointer-events: none;
    display: grid;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    font-weight: 300;
    z-index: 1;
  }


  .tile {
    aspect-ratio: 1160 / 521;
  }

  article a {
    z-index: 2 !important;
    position: relative;
    left: 10px;
    font-size: 1.5rem;
    text-shadow: 0 0 20px var(--text-highlight);
    color: var(--text-highlight);
  }

  article a:hover {
    color: #b4b0ff;
  }

  article p {
    z-index: 2 !important;
    margin-left: 5px;
  }

  article h2 {
    z-index: 2;
    font-size: 1.8rem;
    text-decoration: underline var(--text-highlight) 2px;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
  }

  footer {
    padding: 2rem;
  }

  .title-wrap {
    align-self: end;
  }

  .content-wrap {
    align-self: start;
    position: relative;
    position: none;
  }

  :is(.title-wrap, .content-wrap) {
    line-height: 1.5;
    mask: linear-gradient(transparent, white 10px calc(100% - 10px), transparent);
  }

  @media (min-width: 768px) {
    article {
      grid-template-rows: 1fr auto 1fr;
    }

    .content {
      grid-template: 1fr / 1fr 1fr;
    }
  }

  /*faire que cha que article ai un z index differant */
  .title-wrap:nth-of-type(1) {
    z-index: 5;
  }

  .title-wrap:nth-of-type(2) {
    z-index: 4;
  }

  .title-wrap:nth-of-type(3) {
    z-index: 3;
  }

  .title-wrap:nth-of-type(4) {
    z-index: 2;
  }

  .content-wrap:nth-of-type(1) {
    z-index: 5;
  }

  .content-wrap:nth-of-type(2) {
    z-index: 3;
  }

  .content-wrap:nth-of-type(3) {
    z-index: 6;
  }

  .content-wrap:nth-of-type(4) {
    z-index: 2;
  }

  #bg {
    position: absolute;
    top: 350px;
    left: -20px;
    width: 400px;
    height: 400px;
    background-color: var(--background-color);
  }

  .bga1 {
    z-index: 4;
  }

  .bga2 {
    z-index: 3;
  }

  .bga3 {
    z-index: 2;
  }

  .bga4 {
    z-index: 1;
  }

  @supports (animation-timeline: scroll()) {
    :root {
      timeline-scope: --section-one, --section-two, --section-three,
        --section-four;
    }

    .tiles {
      --orig: 0;
      --dest: calc(-100% + var(--gap));
      animation: translate both linear;
      animation-timeline: --main;
      animation-range: entry 150vh exit -100vh;
    }

    @media(max-width: 768px) {
      .tiles {
        --orig: 200%;
        --dest: 0%;
        align-self: center;

      }
    }

    main {
      view-timeline-name: --main;
      width: 100%;
    }

    .section--one {
      view-timeline-name: --section-one;
    }

    @media(min-width: 768px) {
      .section--one {
        justify-self: start;
      }
    }

    .section--two {
      view-timeline-name: --section-two;
    }

    .section--three {
      view-timeline-name: --section-three;
    }

    .section--four {
      view-timeline-name: --section-four;
    }

    .section--five {
      height: 50vh;
    }


    article :is(h2, p, a, .tagla, #bg),
    .tile,
    .tile::before,
    .tile::after {
      animation: journey both linear;
    }

    article :is(h2, p, a, .tagla, #bg),
    .tile,
    .tile::after,
    .tile::before {
      animation-range: entry 20% entry 120%;
    }

    article:nth-of-type(1) :is(h2, p, a, .tagla, #bg),
    .tile:nth-of-type(4)::after,
    .tile:nth-of-type(4)::before {
      animation-range: entry -80% entry 20%;
    }

    .tile::after,
    .tile::before {
      --start: 0;
      --end: 0;
      --origin: -50% -50%;
      --destination: -50% -50%;
      --via: -50% -50%;
    }

    .tile::before {
      --start: 1;
      --mid: 1;
      --end: 0.5;
    }

    .tile:nth-of-type(4)::after {
      --start: 1;
    }

    .tile:nth-of-type(4) {
      --origin: 0 -150%;
    }

    .tile:nth-of-type(1)::after {
      --start: 0;
      --mid: 1;
      --end: 1;
    }

    article :is(h2, p, a, .tagla, #bg) {
      --origin: 0 100%;
      --via: 0 0;
      --destination: 0 -100%;
      --start: 0;
      --mid: 1;
      --end: 0;
    }

    article:nth-of-type(4) :is(h2, p, a, .tagla, #bg) {
      --destination: 0 0;
      --end: 1;
    }

    article:nth-of-type(1) :is(h2, p, a, .tagla, #bg) {
      --origin: 0 0;
      --via: 0 0;
      --destination: 0 -100%;
      --start: 1;
      --end: 0;
    }

    .tile {
      --origin: 0 0;
      --via: 0 -150%;
      --destination: 0 -150%;
    }

    .tile:nth-of-type(3),
    .tile:nth-of-type(3)::after,
    .tile:nth-of-type(4),
    .tile:nth-of-type(4)::after,
    article:nth-of-type(1) :is(h2, p, a, .tagla, #bg),
    article:nth-of-type(2) :is(h2, p, a, .tagla, #bg) {
      animation-timeline: --section-two;
    }

    .tile:nth-of-type(2),
    .tile:nth-of-type(2)::after,
    article:nth-of-type(3) :is(h2, p, a, .taglav, #bg) {
      animation-timeline: --section-three;
    }

    .tile:nth-of-type(1),
    .tile:nth-of-type(1)::after,
    article:nth-of-type(4) :is(h2, p, a, .tagla, #bg) {
      animation-timeline: --section-four;
    }

    @keyframes translate {
      from {
        transform: translateY(var(--orig));
      }

      to {
        transform: translateY(var(--dest));
      }
    }

    @keyframes journey {
      0% {
        translate: var(--origin, 0 0);
        opacity: var(--start, 1);
      }

      15%,
      85% {
        translate: var(--via, 0 0);
        opacity: var(--mid, 0);
      }

      100% {
        translate: var(--destination, 0 0);
        opacity: var(--end, 1);
      }
    }
  }

  /* Social */
  .bear-link {
    color: canvasText;
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }
}

/*  █████╗   ██████╗  ███████╗ ███╗   ██╗  ██████╗ ███████╗ ███╗   ███╗ ███████╗ ███╗   ██╗ ████████╗ */
/* ██╔══██╗ ██╔════╝  ██╔════╝ ████╗  ██║ ██╔════╝ ██╔════╝ ████╗ ████║ ██╔════╝ ████╗  ██║ ╚══██╔══╝ */
/* ███████║ ██║  ███╗ █████╗   ██╔██╗ ██║ ██║      █████╗   ██╔████╔██║ █████╗   ██╔██╗ ██║    ██║    */
/* ██╔══██║ ██║   ██║ ██╔══╝   ██║╚██╗██║ ██║      ██╔══╝   ██║╚██╔╝██║ ██╔══╝   ██║╚██╗██║    ██║    */
/* ██║  ██║ ╚██████╔╝ ███████╗ ██║ ╚████║ ╚██████╗ ███████╗ ██║ ╚═╝ ██║ ███████╗ ██║ ╚████║    ██║    */
/* ╚═╝  ╚═╝  ╚═════╝  ╚══════╝ ╚═╝  ╚═══╝  ╚═════╝ ╚══════╝ ╚═╝     ╚═╝ ╚══════╝ ╚═╝  ╚═══╝    ╚═╝    */


.email {
  position: absolute;
  top: 0%;
  right: 0;
  width: 60%;
  height: 65vh;
}


.first {
  position: absolute;
  top: 100px;
  width: calc(100% - 160px);
  margin-left: 80px;
  margin-right: 80px;
  height: var(--first-height);
  display: flex;
  justify-content: end;
  padding-bottom: 5px;
}

.firstout {
  position: absolute;
  top: 104px;
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  height: var(--first-height);
  display: flex;
  justify-content: end;
  padding-bottom: 20px !important;
  border-top: var(--outline-color) solid;
  border-bottom: var(--outline-color) solid;
}

.second {
  position: absolute;
  top: calc(var(--first-height) + 120px);
  width: calc(100% - 160px);
  margin-left: 80px;
  margin-right: 80px;
  height: var(--second-height);
  display: flex;
  justify-content: end;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--second-height) + var(--first-height) + var(--third-height) + var(--four-height) - 150px) !important;
  --color: rgba(255, 255, 255, 0.027);
  background-color: transparent;
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent);
  background-size: 60.2px 60.2px;
  z-index: 2;
  pointer-events: none;
}


.tile_sec {
  position: absolute;
  top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  height: 150px;
  color: var(--text-color);
  font-family: "Poppins";
  font-size: 25px;
}



.third {
  position: absolute;
  top: calc(var(--second-height) + 20px + var(--first-height) + 120px);
  width: calc(100% - 200px);
  margin-left: 100px;
  margin-right: 100px;
  height: auto;
  display: flex;
  justify-content: center;

}

footer {
  position: absolute;
  bottom: calc(-1 * (var(--second-height) + var(--first-height) + var(--third-height) - 100vh - 105px));
  width: calc(100% - 80px);
  margin-left: 10px;
  margin-right: 10px;
  height: var(--four-height);
  justify-content: center;
  text-align: center;
  border-top: var(--outline-color) solid;
  border-bottom: var(--outline-color) solid;
}

.contacte_logo_containt {
  width: 400px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}



.mouseDown_inf {
  font-size: 0.9em;
  /* CONTROL MOUSE SIZE */
  border: 2px solid rgba(255, 255, 255, 1);
  display: block;
  width: 1.7em;
  height: 2.8em;
  border-radius: 0.9em;
  margin: 0 auto;
  margin-left: -2px;
  text-decoration: none;
  transition: border 0.2s ease-out;
  position: absolute;
  bottom: 0px;
  transition: all 0.25s;
  left: calc(50% - 0.85em);

}

.mouseDown_inf:hover {
  border: 2px solid rgba(255, 255, 255, 0.7);
  scale: 1.27;
}

.mouseDown_inf span {
  display: block;
  background: #fff;
  width: 0.2em;
  height: 0.3em;
  margin: 0.7em auto 0;
  border-radius: 0.4em;
}

.mouseDown_inf span {
  -webkit-animation-name: scroll;
  animation-name: scroll;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
  animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  will-change: transform;
}

.mouseDown_inf:hover span {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

@-webkit-keyframes scroll {

  0%,
  20% {
    -webkit-transform: translateY(0) scaleY(1);
  }

  10% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(1.2em) scaleY(1.5);
    opacity: 0.01;
  }
}

@keyframes scroll {

  0%,
  20% {
    transform: translateY(0) scaleY(1);
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translateY(1.2em) scaleY(1.5);
    opacity: 0.01;
  }
}


/* █▄▄ ▄▀█ █▀█ █▀█ █▀▀ */
/* █▄█ █▀█ █▀▄ █▀▄ ██▄ */

.scrollers {
  position: absolute;
  top: 170px;
  max-width: 70%;
  min-width: 500px;
  color: var(--text-color) !important;
}

.scaled {
  transform: scale(1.2);
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scrollers[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,
      transparent,
      white 20%,
      white 80%,
      transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scrollers[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll_tab var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scrollers[data-direction="right"] {
  --_animation-direction: reverse;
}

.scrollers[data-direction="left"] {
  --_animation-direction: forwards;
}

.scrollers[data-speed="fast"] {
  --_animation-duration: 15s;
}

.scrollers[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll_tab {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

html {
  color-scheme: dark;
}


.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  text-align: center;
  font-family: 'Poppins';
  font-weight: 600;
  padding: 1rem;
  background: var(--primer-color);
  border-radius: 20px;
  margin: 5px;
  box-shadow: 0 0 10px var(--text-highlight);
}

.tag-list li svg {
  width: 100px;
  height: 100px;
  pointer-events: none;
  padding: 5px;	
  padding-bottom: 10px;
  border-bottom: #F4F8FF solid 2px;
}



/* ██████╗  ███████╗ ███████╗ ██████╗   ██████╗  ███╗   ██╗ ███████╗ ██╗ ██╗   ██╗ ███████╗ */
/* ██╔══██╗ ██╔════╝ ██╔════╝ ██╔══██╗ ██╔═══██╗ ████╗  ██║ ██╔════╝ ██║ ██║   ██║ ██╔════╝ */
/* ██████╔╝ █████╗   ███████╗ ██████╔╝ ██║   ██║ ██╔██╗ ██║ ███████╗ ██║ ██║   ██║ █████╗   */
/* ██╔══██╗ ██╔══╝   ╚════██║ ██╔═══╝  ██║   ██║ ██║╚██╗██║ ╚════██║ ██║ ╚██╗ ██╔╝ ██╔══╝   */
/* ██║  ██║ ███████╗ ███████║ ██║      ╚██████╔╝ ██║ ╚████║ ███████║ ██║  ╚████╔╝  ███████╗ */
/* ╚═╝  ╚═╝ ╚══════╝ ╚══════╝ ╚═╝       ╚═════╝  ╚═╝  ╚═══╝ ╚══════╝ ╚═╝   ╚═══╝   ╚══════╝ */


/* ▀█▀ ▄▀█ █▄▄ █▀▀ ▀█▀ ▀█▀ █▀▀ */
/*  █  █▀█ █▄█ ██▄  █   █  ██▄ */

@media screen and (max-width: 1325px) {


  .scrollers {
    width: 100vw;
    max-width: 800px;
    min-width: 0px;
  }

  :root {
    --third-height: 2907.3px;
    --four-height: 120px;
  }

  .third img {
    width: 200px;
    height: 100px;
    z-index: 999;
  }

  article {
    position: relative;
    top: 200px;
    margin-bottom: -150px;
    display: grid;
    justify-items: center;
  }

  hr {
    width: 90%;
  }

  .content-wrap {
    width: 60%;
  }

  footer {
    width: calc(100% - 160px);
    padding-left: 80px;
    padding-right: 60px;
  }

  .adder {
    width: 80px;
  }

  ah {
    display: none !important;
  }

  :root {
    --first-height: 800px;
  }

  .first {
    display: flex;
    justify-content: center;
    margin: 20px;
    width: calc(100% - 60px);
  }

  .firstc {
    height: 600px !important;
  }

  .logo {
    position: absolute;
    top: 400px;
    right: calc(50% - 200px);
  }

  .presentation {
    position: absolute;
    width: 100%;
    height: 350px;
    left: 0;
    top: 0;
  }

  gr {
    font-size: 55px;
    margin: 17px;
    position: relative;
    top: -1px;
    padding: 0;
  }

  .mov {
    position: relative;
    top: 10px;
  }

  moy {
    font-size: 42px;
    margin: -12px;
    padding: 0;
  }


  .second {
    display: flex;
    justify-content: center;

  }

  .logo2 {
    display: none;
    opacity: 0;
  }



}

/* █▀█ █ █ █▀█ █▄ █ █▀▀ */
/* █▀▀ █▀█ █▄█ █ ▀█ ██▄ */

@media screen and (max-width: 725px) {
  :root {
    --first-height: 700px;
    --third-height: 3000px;
    --four-height: 250px;
  }
  /*disable cirecle and reapir the mouse */
  .circle {
    display: none;
  }

  .container {
    display: none;
  }

  .outlinegen {
    display: none;
  }

  .firstout {
    display: none;
  }

  .content-wrap {
    width: 80%;
    height: 550px;
  }

  footer {
    border: none !important;
    width: 90%;
    bottom: calc(-1 * (var(--second-height) + var(--first-height) + var(--third-height) - 100vh + 80px));
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 5% !important;
    border-top: var(--outline-color) solid !important;
    border-bottom: var(--outline-color) solid !important;
  }

  .nav-bar {
    margin-right: 10px !important;
  }

  .leftl {
    left: 12.5%;
  }

  .firstc {
    height: 400px !important;
  }

  .textepresentation {
    left: 40px;
  }

  .social_link {
    position: relative;
    margin: -2.5% !important;
  }

  .logo {
    position: absolute;
    top: 470px;
    right: calc(50% - 100px);
    width: 200px;
    height: 200px;
  }



  .morgan {
    position: absolute;
    top: -40px;
    left: -20px;
  }

  gr {
    font-size: 40px !important;
  }

  .second {
    display: flex;
    justify-content: center;

  }

  .third {
    width: calc(100% - 30px);
    margin: 10px;
  }

  .first {
    margin: 20px;
    width: calc(100% - 60px);
  }

  .firstc {
    position: absolute;
    top: 220px;
    left: 10px;

  }

  .presentation {
    position: absolute;
    width: 100%;
    height: 350px;
    left: 0;
    top: 0;

  }

  header {
    display: flex;
    justify-content: center;
  }

  .social_link {
    display: flex;
    position: absolute;
    bottom: -150px;
    width: calc(100vw - 60px) !important;
    left: -10px !important;
    justify-content: center;
    align-items: center;
    width: 100%;
  }


  .first {
    margin: 0;
    width: 100%;

  }

  footer p {
    margin-top: 50px;
    height: 50px !important;
  }

}

footer p {
  height: 50px !important;
}

@media screen and (max-width: 440px) {
  .adder {
    top: -40px;
    right: 60px;
  }
}

@media screen and (max-width: 440px) {
  body{
    cursor: default !important;
  }
}