/* TRANSICIÓN DE PÁGINA CON ÁGUILA VOLADORA */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.transition-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

.transition-eagle-wrap {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 110%;
  left: -10%;
  transform: translate(-50%, -50%) rotate(35deg);
  filter: drop-shadow(0 0 30px rgba(255, 45, 45, 0.7));
}

.transition-overlay.animating-out .transition-eagle-wrap {
  animation: flyOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.transition-overlay.animating-in .transition-eagle-wrap {
  animation: flyIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.transition-eagle {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: glide 1.2s ease-in-out infinite;
}

@keyframes flyOut {
  0% {
    top: 110%;
    left: -10%;
    transform: translate(-50%, -50%) scale(0.6) rotate(35deg);
  }

  40% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.4) rotate(15deg);
  }

  100% {
    top: -15%;
    left: 115%;
    transform: translate(-50%, -50%) scale(2.2) rotate(-10deg);
  }
}

@keyframes flyIn {
  0% {
    top: 110%;
    left: -10%;
    transform: translate(-50%, -50%) scale(2.2) rotate(35deg);
  }

  50% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
  }

  100% {
    top: -15%;
    left: 115%;
    transform: translate(-50%, -50%) scale(0.4) rotate(-10deg);
  }
}

@keyframes glide {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(-4deg);
  }
}

/* TRANSICIÓN DIFUSA DE ENTRADA (DESDE PRESENT.HTML) */
html.transitioning-in body {
  animation: unblurFadeIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  pointer-events: none; /* Evitar clics durante la animación */
}

@keyframes unblurFadeIn {
  0% {
    filter: blur(25px) brightness(0.6);
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    filter: blur(0) brightness(1);
    opacity: 1;
    transform: scale(1);
  }
}