.vignette-overlay {
    background: linear-gradient(90deg, rgb(5, 5, 5) 0%, transparent 15%, transparent 85%, rgb(5, 5, 5) 100%);
    pointer-events: none;
  }

  .animate-hidden {
    opacity: 0;
    transform: translateX(-100%);
    transition: 1s;
  }

  .show {
    opacity: 1;
    transform: translateX(0px);
  }

  .swiper-vignette {
    background: linear-gradient(90deg, transparent 0%, rgb(5, 5, 5) 100%);
    pointer-events: none;
  }

  nav {
    transition: 0.3s;
  }

  .nav-scrolled {
    --tw-backdrop-blur: blur(12px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }

  @property --percent {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }

  @property --temp {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }

  @property --v1 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }

  @property --v2 {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }

  .animated-number {
    transition: --percent 1s;
    --temp: calc(var(--percent) * 100);
    --v1: max(var(--temp) - 0.5, 0);
    --v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0);
    counter-reset: v1 var(--v1) v2 var(--v2);
  }

  .animated-number::before {
    content: counter(v1) "." counter(v2, decimal-leading-zero);
  }