:root {
  --random-delay-1: 0;
  --random-delay-2: 1;
  --random-delay-3: 2;
  --random-delay-4: 3;
  --random-delay-5: 4;
  --random-delay-6: 4;
  --random-delay-7: 4;
  --random-delay-8: 4;
  --random-delay-9: 4;

  --random-duration-1: 2;
  --random-duration-2: 2.5;
  --random-duration-3: 3;
  --random-duration-4: 2.75;
  --random-duration-5: 2.25;
  --random-duration-6: 3;
  --random-duration-7: 2.75;
  --random-duration-8: 2.25;
  --random-duration-9: 2.25;

  --random-font-1: 1.8rem;
  --random-font-2: 2.2rem;
  --random-font-3: 1.5rem;
  --random-font-4: 1.7rem;
  --random-font-5: 2rem;
  --random-font-6: 1.6rem;
  --random-font-7: 1.9rem;
  --random-font-8: 2.1rem;
  --random-font-9: 2rem;
}

body {
  background-color: #020617;
  /*transform: translateZ(0);*/
  background-image:
    linear-gradient(to right, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
    linear-gradient(to right, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
    /* Gradient principal lissé */ radial-gradient(circle at 50% 60%, rgba(236, 72, 153, 0.15) 0%, rgba(220, 78, 180, 0.12) 20%, rgba(200, 80, 210, 0.08) 40%, rgba(168, 85, 247, 0.05) 60%, rgba(168, 85, 247, 0.02) 75%, transparent 90%),
    /* Dithering léger */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");

  background-size:
    100% 175%,
    200% 200%,
    200% 200%,
    100% 102%,
    120px 120px;
}

.modal {
  --bs-modal-bg: #1f1f20;
}

.toast {
  --bs-toast-bg: rgb(0 0 0 / 25%);
}

.toast-error {
  --bs-toast-header-bg: var(--bs-danger);
}

.toast-success {
  --bs-toast-header-bg: var(--bs-success);
}

.toast-info {
  --bs-toast-header-bg: var(--bs-primary);
}

.custom-popover {
  --bs-popover-bg: rgb(22 22 22 / 73%) !important;
  --bs-popover-border-width: 1px !important;
  --bs-popover-min-width: 320px !important;
  min-width: 320px !important;
  --bs-popover-header-color: rgb(225 225 225) !important;
  --bs-popover-header-bg: rgb(128 87 215 / 50%) !important;
}

.custom-popover .popover-body .list-group {
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-color: #ffffff6b;
  --bs-list-group-action-color: rgb(255 255 255);
  --bs-list-group-action-hover-bg: #4444446e;
  --bs-list-group-action-active-bg: #4a4a4a8a;
  --bs-list-group-bg: #80808017;
  --bs-list-group-action-hover-color: #ffffff;
  --bs-list-group-action-active-color: #ffffff;
}

.w-65 {
  width: 65% !important;
}

.w-35 {
  width: 35% !important;
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover,
.js-focus-visible .vjs-menu li.vjs-selected:hover {
  background-color: rgb(33, 21, 45, 0.8) !important;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  width: 130% !important;
}

.form-floating {
  > label {
    color: rgba(255, 255, 255, 0.5);
  }
}

select,
option {
  color: rgb(40, 40, 40);
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  text-align: start !important;
}

.form-control.glass-effect {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

.table-glass {
  --bs-table-bg: rgba(255, 255, 255, 0.5);
  --bs-table-border-color: rgba(0, 0, 0, 0.259);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.08);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  > thead {
    background-color: rgba(213, 250, 255, 0.33);
  }
}

.custom-modal {
  background-color: #343a40;
  color: #fff;
}

.card {
  background-color: #282828;
  border-color: #484848;
  color: #fff;
}

.card.glass-effect {
  background-color: rgb(131, 131, 131, 0.2);
  border-color: rgb(0, 0, 0, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
}

.card-footer {
  border-top: var(--bs-card-border-width) solid rgb(0, 0, 0, 0);
}

.hidden {
  display: none;
}

.modal-dialog-fixed {
  width: 800px;
  height: 400px;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* Video Player */

.track-controls {
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  color: white;
}

.track-controls div {
  margin-bottom: 10px;
}

.track-controls select {
  background-color: #333;
  color: white;
  border: 1px solid #555;
  padding: 5px;
  border-radius: 3px;
  margin-left: 10px;
}

/* Animations */
@keyframes vibrate-2-normal {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}
.vibrate-2-normal {
  animation: vibrate-2-normal 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite normal both;
}

@keyframes jello-horizontal-normal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
.jello-horizontal-normal:hover {
  animation: jello-horizontal-normal 0.9s ease 0s 1 normal both;
}

@keyframes shake-bl-normal {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 0 100%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}
.shake-bl-normal:focus {
  animation: shake-bl-normal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal both;
}

@keyframes pulsate-fwd-normal {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulsate-fwd-normal:hover {
  animation: pulsate-fwd-normal 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite normal both;
}

.btn {
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }
}

.madixaudio {
  width: auto;
  height: 250px;
  display: block;
  margin: 0 auto;
  transform: scale(1);
  transition: transform 0.1s linear;
}

.giraffe-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.giraffe {
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  animation: appear 5s infinite;
  will-change: transform;

  --audio-scale: 1;
}

.giraffe-reverse {
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  animation: appear-reverse 5s infinite;
  will-change: transform;

  --audio-scale: 1;
}

@keyframes appear {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(calc(0.5 * var(--audio-scale)));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) rotate(10deg) scale(calc(1 * var(--audio-scale)));
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) rotate(-10deg) scale(calc(0.5 * var(--audio-scale)));
    opacity: 0;
  }
}

@keyframes appear-reverse {
  0% {
    transform: translateY(-10vh) rotate(-10deg) scale(calc(0.5 * var(--audio-scale)));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) rotate(10deg) scale(calc(1 * var(--audio-scale)));
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(0deg) scale(calc(0.5 * var(--audio-scale)));
    opacity: 0;
  }
}

/* Positions */
.giraffe:nth-child(1) {
  left: 10%;
  animation-delay: calc(var(--random-delay-1) * 0.5s);
}
.giraffe-reverse:nth-child(2) {
  left: 15%;
  animation-delay: calc(var(--random-delay-2) * 0.5s + 1s);
}
.giraffe:nth-child(3) {
  left: 30%;
  animation-delay: calc(var(--random-delay-3) * 0.5s + 2s);
}
.giraffe-reverse:nth-child(4) {
  left: 35%;
  animation-delay: calc(var(--random-delay-4) * 0.5s + 3s);
}
.giraffe:nth-child(5) {
  left: 50%;
  animation-delay: calc(var(--random-delay-5) * 0.5s + 4s);
}
.giraffe-reverse:nth-child(6) {
  left: 55%;
  animation-delay: calc(var(--random-delay-6) * 0.5s + 4s);
}
.giraffe:nth-child(7) {
  left: 70%;
  animation-delay: calc(var(--random-delay-7) * 0.5s + 4s);
}
.giraffe-reverse:nth-child(8) {
  left: 75%;
  animation-delay: calc(var(--random-delay-8) * 0.5s + 4s);
}
.giraffe:nth-child(9) {
  left: 90%;
  animation-delay: calc(var(--random-delay-9) * 0.5s + 4s);
}

/* Variations */
.giraffe:nth-child(1) {
  animation-duration: calc(var(--random-duration-1) * 2s + 4s);
  font-size: clamp(1.8rem, var(--random-font-1), 2.3rem);
}
.giraffe-reverse:nth-child(2) {
  animation-duration: calc(var(--random-duration-2) * 2s + 5s);
  font-size: clamp(2rem, var(--random-font-2), 2.6rem);
}
.giraffe:nth-child(3) {
  animation-duration: calc(var(--random-duration-3) * 2s + 7s);
  font-size: clamp(1.5rem, var(--random-font-3), 2.2rem);
}
.giraffe-reverse:nth-child(4) {
  animation-duration: calc(var(--random-duration-4) * 2s + 6.5s);
  font-size: clamp(1.7rem, var(--random-font-4), 2.3rem);
}
.giraffe:nth-child(5) {
  animation-duration: calc(var(--random-duration-5) * 2s + 5.5s);
  font-size: clamp(2rem, var(--random-font-5), 2.4rem);
}
.giraffe-reverse:nth-child(6) {
  animation-duration: calc(var(--random-duration-6) * 2s + 7s);
  font-size: clamp(1.6rem, var(--random-font-6), 2.2rem);
}
.giraffe:nth-child(7) {
  animation-duration: calc(var(--random-duration-7) * 2s + 6.5s);
  font-size: clamp(1.9rem, var(--random-font-7), 2.4rem);
}
.giraffe-reverse:nth-child(8) {
  animation-duration: calc(var(--random-duration-8) * 2s + 5.5s);
  font-size: clamp(2.1rem, var(--random-font-8), 2.6rem);
}
.giraffe:nth-child(9) {
  animation-duration: calc(var(--random-duration-9) * 2s + 5.5s);
  font-size: clamp(2rem, var(--random-font-9), 2.5rem);
}

/* Base color */
* {
  color: white;
}