@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(0, 0, 0, 1) 0%,
    rgba(46, 46, 46, 1) 20%,
    rgba(46, 46, 46, 1) 80%,
    rgba(0, 0, 0, 1) 100%
  );
  position: relative;
}

.translate-center {
  transform: translate(-50%, -50%);
}

/* MOBILE */
.container {
  z-index: 1;
  position: relative;
  width: 340px;
  height: 530px;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 0 0 5px 5px rgb(255, 255, 255, 0.5);
  & .bg {
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 15px;
  }
  & .bg-basket {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    border-radius: 15px;
  }
  & .ball {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 100%;
    z-index: 30;
    &.zoom {
      animation: zoom 2s linear infinite;
      box-shadow: 0px 0px 15px 0px white;
    }
  }
  & .cta-click {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 50;
    transition:
      opacity 1.5s ease,
      transform 1.5s ease;
    &.fade-out {
      opacity: 0;
      transform: scale(0.8);
    }
    p {
      width: 90%;
      position: absolute;
      top: 35%;
      left: 50%;
      color: white;
      text-transform: uppercase;
      font-family: "Rubik", sans-serif;
      font-size: 21px;
      font-weight: 700;
      text-align: center;
    }
  }
}

/* BALL ANIMATION */
.ball-animation {
  animation: ball-mobile 3500ms linear;
}

@keyframes zoom {
  0% {
    transform: translate(-50%, 0) scale(1);
  }
  25% {
    transform: translate(-50%, 0) scale(1.2);
  }
  50% {
    transform: translate(-50%, 0) scale(1);
  }
  75% {
    transform: translate(-50%, 0) scale(0.8);
  }
  100% {
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes ball-mobile {
  0% {
    transform: translate(-50%, 0%) scale(1) rotate(0deg);
    z-index: 30;
  }
  10% {
    transform: translate(-50%, -120px) scale(1.15) rotate(90deg);
    z-index: 30;
  }
  15% {
    transform: translate(-49%, -240px) scale(1.1) rotate(150deg);
    z-index: 30;
  }
  20% {
    transform: translate(-46%, -300px) scale(0.9) rotate(250deg);
    z-index: 30;
  }
  30% {
    transform: translate(-45%, -290px) scale(0.7) rotate(450deg);
    z-index: 30;
  }
  50% {
    transform: translate(-40%, -240px) scale(0.3) rotate(750deg);
    z-index: 30;
  }
  60% {
    transform: translate(-41%, -208px) scale(0.17) rotate(850deg);
    z-index: 15;
  }
  70% {
    transform: translate(-50%, -220px) scale(0.17) rotate(500deg);
    z-index: 15;
  }
  80% {
    transform: translate(-56%, -208px) scale(0.17) rotate(350deg);
    z-index: 15;
  }
  85% {
    transform: translate(-50%, -212px) scale(0.17) rotate(540deg);
    z-index: 15;
  }
  90% {
    transform: translate(-50%, -180px) scale(0.17) rotate(540deg);
    z-index: 15;
  }
  100% {
    transform: translate(-50%, -160px) scale(0.17) rotate(600deg);
    z-index: 15;
  }
}
/* CARD SLIDE-IN ANIMATION */
@keyframes appear {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  100% {
    width: 340px;
    height: 600px;
    opacity: 1;
  }
}

/* FLIP CARD ANIMATION */
.card {
  width: 340px;
  height: 600px;
  perspective: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;

  display: none;
  &.active {
    display: flex;
    top: 50%;
    left: 50%;
    animation: appear 2s linear;
  }
}

.card-inner {
  transform-style: preserve-3d;
  transition: transform 1.1s ease-in-out;
  width: 340px;
  height: 600px;
}

.recto {
  position: relative;
  width: 340px;
  height: 600px;
}
.cta-flip {
  position: absolute;
  left: 0;
  bottom: -5px;
  cursor: pointer;
  z-index: 4;
  .svg-background {
    transition: fill 0.2s linear;
    fill: #007ac1;
  }
  &:hover .svg-background {
    transition: fill 0.2s linear;
    fill: #f05133;
  }
}
.verso {
  position: relative;
  width: 340px;
  height: 600px;
  .cta-cv,
  .cta-github {
    position: absolute;
    bottom: 13%;
    cursor: pointer;
    .svg-background {
      transition: fill 0.2s linear;
    }

    &:hover .svg-background {
      fill: #f05133;
    }
  }
  .cta-cv {
    left: 8%;
  }
  .cta-github {
    right: 8%;
  }
}

.card.rotate-right .card-inner {
  transform: rotateY(180deg);
}
.card.rotate-left .card-inner {
  transform: rotateY(0deg);
}

.card-face {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-face.back {
  transform: rotateY(180deg);
}

/* MAIN LOGOS ANIMATION */
.logos-main-container {
  z-index: 0;
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden;
  & .logo-row {
    width: 100%;
    height: 100px;
    position: absolute;
    white-space: nowrap;
    display: flex;
  }
  & .logo-row:nth-of-type(1) {
    top: 0%;
  }
  & .logo-row:nth-of-type(2) {
    top: 50%;
    transform: translate(0, -50%);
  }
  & .logo-row:nth-of-type(3) {
    bottom: 0%;
  }
  .logo {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }

  /* Styles pour le défilement vers la gauche */
  .logo-left {
    width: 100px;
    height: 100px;
    position: absolute;
    right: min(calc((100px * 5) * -1), -100%);
    animation-name: scroll-left;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* Styles pour le défilement vers la droite */
  .logo-right {
    width: 100px;
    height: 100px;
    position: absolute;
    left: min(calc((100px * 5) * -1), -100%);
    animation-name: scroll-right;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .logo1 {
    animation-delay: -8s;
  }
  .logo2 {
    animation-delay: -6s;
  }
  .logo3 {
    animation-delay: -4s;
  }
  .logo4 {
    animation-delay: -2s;
  }
  .logo5 {
    animation-delay: 0s;
  }
}

@keyframes scroll-left {
  to {
    right: 100%;
  }
}

@keyframes scroll-right {
  to {
    left: 100%;
  }
}

/* DESKTOP */
@media screen and (min-width: 1024px) {
  .container {
    width: 448px;
    height: 700px;
    & .bg {
      width: 100%;
      height: 100%;
    }
    & .bg-basket {
      width: 100%;
      height: 100%;
    }
  }

  .logo-row:nth-of-type(1) {
    top: 5% !important;
  }
  .logo-row:nth-of-type(2) {
    top: 50%;
    transform: translate(0, -50%);
  }
  .logo-row:nth-of-type(3) {
    bottom: 5% !important;
  }

  /* BALL ANIMATION */
  .ball-animation {
    animation: ball-desktop 3500ms linear;
  }

  @keyframes ball-desktop {
    0% {
      transform: translate(-50%, 0%) scale(1) rotate(0deg);
      z-index: 30;
    }
    10% {
      transform: translate(-50%, -150px) scale(1.15) rotate(90deg);
      z-index: 30;
    }
    15% {
      transform: translate(-49%, -300px) scale(1.1) rotate(150deg);
      z-index: 30;
    }
    20% {
      transform: translate(-47%, -400px) scale(0.9) rotate(250deg);
      z-index: 30;
    }
    30% {
      transform: translate(-45%, -380px) scale(0.7) rotate(350deg);
      z-index: 30;
    }
    50% {
      transform: translate(-40%, -300px) scale(0.45) rotate(600deg);
      z-index: 30;
    }
    60% {
      transform: translate(-35%, -260px) scale(0.2) rotate(700deg);
      z-index: 15;
    }
    70% {
      transform: translate(-50%, -275px) scale(0.2) rotate(500deg);
      z-index: 15;
    }
    80% {
      transform: translate(-60%, -260px) scale(0.2) rotate(450deg);
      z-index: 15;
    }
    85% {
      transform: translate(-50%, -270px) scale(0.2) rotate(540deg);
      z-index: 15;
    }
    90% {
      transform: translate(-50%, -230px) scale(0.2) rotate(540deg);
      z-index: 15;
    }
    100% {
      transform: translate(-50%, -210px) scale(0.2) rotate(600deg);
      z-index: 15;
    }
  }

  /* !important obligatoire pour changer la durée de l'animation
    après plusieurs autres solutions tentées */
  .logo-left {
    animation-duration: 20s !important;
  }
  .logo-right {
    animation-duration: 20s !important;
  }
  .logo1 {
    animation-delay: -16s !important;
  }
  .logo2 {
    animation-delay: -12s !important;
  }
  .logo3 {
    animation-delay: -8s !important;
  }
  .logo4 {
    animation-delay: -4s !important;
  }
  .logo5 {
    animation-delay: 0s !important;
  }
}