/* === Tailwind aktivieren === */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Eigene Fonts === */
/* === Rebond === */
@font-face {
  font-family: 'Rebond';
  src: url('/my-project/public/font/rebond-extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* === Inter (variable) === */
@font-face {
  font-family: 'Inter';
  src: url('/my-project/public/font/Inter-VariableFont_opsz\,wght.ttf') format('truetype-variations');
  font-weight: 100 900;     /* Variable Font Achse */
  font-style: normal;
  font-display: swap;
}

.bg-mesh {
  background-color: hsla(0,0%,100%,1);
  background-image:
    radial-gradient(at 48% 17%, hsla(203,87%,90%,1) 0px, transparent 50%),
    radial-gradient(at 53% 77%, hsla(49,69%,93%,1) 0px, transparent 50%),
    radial-gradient(at 50% 94%, hsla(48,100%,92%,1) 0px, transparent 50%),
    radial-gradient(at 96% 9%, hsla(125,64%,87%,1) 0px, transparent 50%),
    radial-gradient(at 75% 35%, hsla(120,56%,89%,1) 0px, transparent 50%),
    radial-gradient(at 2% 17%, hsla(235,92%,94%,1) 0px, transparent 50%),
    radial-gradient(at 20% 64%, hsla(47,100%,94%,1) 0px, transparent 50%),
    radial-gradient(at 4% 88%, hsla(34,100%,84%,1) 0px, transparent 50%),
    radial-gradient(at 99% 97%, hsla(336,100%,94%,1) 0px, transparent 50%),
    radial-gradient(at 79% 66%, hsla(353,69%,94%,1) 0px, transparent 50%),
    radial-gradient(at 0% 56%, hsla(351,61%,92%,1) 0px, transparent 50%);
  
  background-size: 160% 160%;
  animation: meshFloat 25s ease-in-out infinite;
}

@keyframes meshFloat {
  0% {
    background-position: 50% 50%;
  }
  33% {
    background-position: 55% 45%;
  }
  66% {
    background-position: 45% 55%;
  }
  100% {
    background-position: 50% 50%;
  }
}


.dot::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  left: -0.75rem; /* Startpunkt direkt links neben dem Punkt */
  transform: translate(-100%, -50%); /* verschiebt Tooltip ganz nach links vom Punkt */
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Kleine Pfeilspitze am Tooltip */
.dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px; /* direkt links am Punkt */
  transform: translate(-100%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Tooltip aktivieren beim Hover */
.dot:hover::after,
.dot:hover::before {
  opacity: 1;
  transform: translate(-105%, -50%);
}

/* === Beispiel: Optionale Anpassung, falls du globale Fonts willst === */
body {
  color: #111;
  background-color: #fff;
}

@keyframes wordSlide {
  0% { opacity: 0; transform: translateY(100%); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

.word-anim {
  animation: wordSlide 2s ease forwards;
}

/* Standard-Cursor verstecken (nur Desktop) */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }

  #custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: black;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: transform 0.15s ease-out, width 0.2s, height 0.2s;
  }

  #custom-cursor.active {
    width: 40px;
    height: 40px;
  }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Runder Download-Button */
.animate-spin-slow {
  animation: spinSlow 10s linear infinite;
}