@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

nav a,
nav i {
  opacity: 50%;
}

nav a.active i {
  opacity: 100%;
  border-width: 5px;
}

nav a.active {
  opacity: 100%;
}

#overlay {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

#overlay.show {
  opacity: 1;
}

.card { perspective: 800px;}
.card__content {transform-style: preserve-3d;}
.card:hover .card__content {transform: rotateY(.5turn);}

.card__front,
.card__back { backface-visibility: hidden;}
.card__back{ transform: rotateY(.5turn);}

@media (prefers-color-scheme: light) {
  :root {
    --text: #e5e4e7;
    --background: #0c0a10;
    --primary: #a59dd8;
    --secondary: #493277;
    --accent: #6d2eea;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e5e4e7;
    --background: #0c0a10;
    --primary: #a59dd8;
    --secondary: #493277;
    --accent: #6d2eea;
  }
}

/* Animation d'ouverture et de fermeture */
.navbar-menu {
    transform: scale(0);
    transition: transform 0.3s ease-out;
    /* Ajoutez d'autres propriétés si nécessaire pour l'animation */
}

.scale-up {
    transform: scale(1);
}

.scale-down {
    transform: scale(0);
}

/* Contact */

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    --focus-padding-left: 1rem;
}

.input-group input, .input-group textarea {
    font-size: 1.5rem;
    padding-left: 3.5rem;
    animation: un-slide 0.3s ease;
}

@keyframes un-slide {
    0% { padding-left: var(--focus-padding-left); }
    100% { padding-left: 3.5rem; }
}

.input-group input:valid, .input-group input:focus, .input-group textarea:valid, .input-group textarea:focus {
    animation: slide 0.3s ease;
    padding-left: var(--focus-padding-left);
}

@keyframes slide {
    0% { padding-left: 3.5rem; }
    100% { padding-left: var(--focus-padding-left); }
}


.input-group textarea {
    height: 15rem;
    max-height: 20rem;
    min-height: 10rem;
}

.input-group button {
    width: 14rem;
}

.input {
    border: solid 1.5px #9e9e9e;
    border-radius: 1rem;
    background: none;
    padding: 1rem;
    font-size: 1rem;
    color: #f5f5f5;
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
    width: 100%;
    height: 4rem;
}

.user-label {
    position: absolute;
    left: 15px;
    color: #e8e8e8;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4,0,0.2,1);
    font-size: 1.5rem;
}

.input:focus, input:valid, textarea:valid {
    outline: none;
    border: 1.5px solid var(--primary);
}

.input:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    transform: translateY(-50%) scale(0.8);
    background-color: #0e0915;
    padding: 0 0.3em;
    color: var(--primary);
}

@media (max-width: 768px) {
  .input:focus ~ label, input:valid ~ label, textarea:valid ~ label {
      background-color: #3e2163;
  }
}

/* button */

.input-group button {
  font-family: inherit;
  font-size: 20px;
  background: var(--accent);
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.input-group button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.input-group button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.input-group button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.input-group button:hover svg {
  transform: translateX(0em) rotate(45deg) scale(1.1);
}

.input-group button:hover span {
  transform: translateX(0.5em);
}

.input-group button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #29292b inset !important;
}

input:-webkit-autofill{
    -webkit-text-fill-color: white !important;
}