front/styles/global.css
@import "./fonts.css";

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

@layer base {
  html {
    touch-action: manipulation;
    font-feature-settings:
      "rlig" 1,
      "calt" 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
  }

  @supports (font-synthesis-weight: none) {
    html {
      font-synthesis: initial;
      font-synthesis-weight: none;
    }
  }
}

html,
body,
main {
  @apply h-full;
}

#__next {
  @apply h-full;
}

.loading-dots::after {
  display: inline-block;
  animation: dotty steps(1, end) 1s infinite;
  content: "";
}

@keyframes dotty {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "";
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-3px, -1px, 0);
  }

  20%,
  80% {
    transform: translate3d(6px, 2px, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-8px, -3px, 0);
  }

  40%,
  60% {
    transform: translate3d(8px, 3px, 0);
  }
}

.loading-text {
  background: linear-gradient(90deg, #999999 0%, #000000 50%, #999999 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    initialFade 0.3s ease-out forwards,
    rainbowLoop 3s linear infinite;
}

@keyframes initialFade {
  from {
    color: currentColor;
  }
  to {
    color: transparent;
  }
}

@keyframes rainbowLoop {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes fade-collapse {
  0% {
    opacity: 1;
    max-height: 100%;
  }

  100% {
    opacity: 0;
    max-height: 0;
  }
}

.animate-fade-collapse {
  animation: fade-collapse 500ms ease-out forwards;
}

/* Privacy mask style for dd-privacy-mask elements - only when enabled */
.privacy-mask-enabled .dd-privacy-mask {
  filter: blur(5px) !important;
}

/* Custom scrollbar styles */
@layer base {
  * {
    scrollbar-width: thin;
  }
  .dark * {
    scrollbar-color: theme("colors.gray.700") theme("colors.gray.900");
  }
}

/* Remove this once we have migrated to tailwindcss v4 */
.h-dvh {
  height: 100dvh;
}

.min-h-dvh {
  min-height: 100dvh;
}

.max-h-dvh {
  max-height: 100dvh;
}
