/* Full-screen splash animation (static/splash-screen.js), shared by the
   "Próximamente" page and showcase mode (templates/base.html). */
.splash-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; background: #0a0a0a; opacity: 1;
  transition: opacity 600ms ease-out;
}
.splash-overlay.splash-fading { opacity: 0; }

@keyframes splash-note-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--note-angle)) translateY(0) rotate(0deg) scale(0.4);
  }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--note-angle))
      translateY(calc(var(--note-distance) * -1)) rotate(var(--note-rotate)) scale(1.1);
  }
}
.splash-note {
  position: absolute; left: 50%; top: 50%; opacity: 0; color: #fff;
  animation: splash-note-burst 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform, opacity;
}

@keyframes splash-logo-reveal {
  0% { opacity: 0; transform: scale(0.6); filter: invert(1) blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: invert(1) blur(0); }
}
.splash-logo {
  width: 128px; opacity: 0;
  animation: splash-logo-reveal 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards;
}
@media (min-width: 768px) { .splash-logo { width: 160px; } }

@media (prefers-reduced-motion: reduce) {
  .splash-note { animation-duration: 0.01s; }
  .splash-logo { animation-delay: 0s; animation-duration: 0.3s; }
}