/* REPABLIP V8 — solo animación visual. No controla theme/status/safe-area. */
#appFrame.rep-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#intro.rep-invirtiendo::before {
  animation: repIrisClaro 720ms cubic-bezier(.18,.78,.20,1) forwards;
}

#intro.rep-invirtiendo .db-wrap {
  animation: repAlejarLogo 720ms cubic-bezier(.20,.78,.22,1) forwards;
}

#intro.rep-invirtiendo .db-white {
  animation: repLogoBlancoSale 720ms ease forwards;
}

#intro.rep-invirtiendo .db-black {
  animation: repLogoNegroEntra 720ms ease forwards;
}

#intro.rep-saliendo {
  opacity: 0;
  transition: opacity 170ms ease;
  pointer-events: none;
}

@keyframes repAlejarLogo {
  0%, 18% { transform: scale(1); }
  48% { transform: scale(.84); }
  100% { transform: scale(.90); }
}
@keyframes repLogoBlancoSale {
  0%, 31% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes repLogoNegroEntra {
  0%, 31% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes repIrisClaro {
  0%, 20% { transform: translate(-50%,-50%) scale(0); }
  100% { transform: translate(-50%,-50%) scale(32); }
}

@media (prefers-reduced-motion: reduce) {
  #intro.rep-invirtiendo::before,
  #intro.rep-invirtiendo .db-wrap,
  #intro.rep-invirtiendo .db-white,
  #intro.rep-invirtiendo .db-black { animation-duration: 1ms; }
  #intro.rep-saliendo { transition-duration: 1ms; }
}