@import "_reset.css";

#intro-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 1.5s ease, backdrop-filter 1.5s ease, background 2.5s ease-out;}

body.intro-done #intro-overlay {
  opacity: 0;
  pointer-events: none;
}

#intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Intro-Name mit gleichen Styles wie brand-pill + schwarz */
.intro-pill {
  color: #000;
  pointer-events: none;
  font-weight: 600;
  font-size: 16px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .15rem 0.9rem;

  animation-name: blink;
  animation-duration: 1.0s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes pulseFade {
  0%   { opacity: 0; transform: scale(1); }
  25%  { opacity: 1; transform: scale(1.04); }
  50%  { opacity: 0; transform: scale(0.98); }
  75%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1); }
}

.intro-pill {
  animation: pulseFade 2.0s ease-in-out forwards;
  font-family: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  pointer-events: none;
}


/* Wenn Intro vorbei: Overlay ausblenden */
body.intro-done #intro-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Sichtbarkeit des restlichen Inhalts */
body:not(.intro-done) .stage,
body:not(.intro-done) .pill-anchor,
body:not(.intro-done) .hotspot-layer {
  visibility: hidden;
  opacity: 0;
}

body.intro-done .stage,
body.intro-done .pill-anchor,
body.intro-done .hotspot-layer {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.5s  ease-out 0.3s;
}

/* Bild fade-in vorbereiten */
#deskImage {
  opacity: 0;
  transition: opacity 1.0s ease-in;
}
body.intro-done #deskImage {
  opacity: 1;
}