/* ============================================================
   LOADING SCREEN
   ============================================================ */

#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Phase 3: Loader fades out nach der Logo-Animation */
  animation: loader-fadeout 0.6s ease forwards;
  animation-delay: 2.6s;
}

#loader.hidden {
  pointer-events: none;
}

/* ---- Logo-Wrapper: der "unsichtbare Block" aus Figma ---- */
.loader__reveal {
  overflow: hidden;          /* Das ist die Maske */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ---- Logo-Inhalt schiebt sich nach oben rein ---- */
.loader__content {
  /* Phase 1: startet komplett unterhalb der Maske */
  transform: translateY(110%);
  /* Phase 2: fährt nach oben rein */
  animation: logo-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.5s;
}

/* Volles Logo — SVG ist bereits weiß, passt auf schwarzem Hintergrund */
.loader__fulllogo {
  width: 220px;
  height: auto;
  display: block;
}

/* ---- Keyframes ---- */
@keyframes logo-reveal {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

@keyframes loader-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}