/* Shared splash styles — used by index.html (pre-bootstrap) and app-splash-overlay. */

.splash-overlay {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-color: #633190;
  color: #ffffff;
}

.splash-brand {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

.splash-bell-stage {
  position: relative;
  width: 10rem;
  height: 10rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.splash-bell {
  position: relative;
  transform-origin: top center;
  animation: splash-bell-toll 4.2s ease-in-out infinite;
}

.splash-bell svg {
  display: block;
  width: 8.5rem;
  height: 8.5rem;
  filter: drop-shadow(0 0.35rem 0.75rem rgba(0, 0, 0, 0.2));
}

.splash-clapper {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.425rem;
  border-radius: 50%;
  background-color: #f0e6f8;
  transform-origin: top center;
  animation: splash-clapper-swing 4.2s ease-in-out infinite;
}

@keyframes splash-bell-toll {
  0% { transform: rotate(0deg); }
  4% { transform: rotate(15deg); }
  8% { transform: rotate(-10deg); }
  12% { transform: rotate(7deg); }
  16% { transform: rotate(-4deg); }
  20% { transform: rotate(2deg); }
  24% { transform: rotate(0deg); }
  28% { transform: rotate(-15deg); }
  32% { transform: rotate(10deg); }
  36% { transform: rotate(-7deg); }
  40% { transform: rotate(4deg); }
  44% { transform: rotate(-2deg); }
  48% { transform: rotate(0deg); }
  52% { transform: rotate(15deg); }
  56% { transform: rotate(-10deg); }
  60% { transform: rotate(7deg); }
  64% { transform: rotate(-4deg); }
  68% { transform: rotate(2deg); }
  72% { transform: rotate(0deg); }
  76% { transform: rotate(-15deg); }
  80% { transform: rotate(10deg); }
  84% { transform: rotate(-7deg); }
  88% { transform: rotate(4deg); }
  92% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes splash-clapper-swing {
  0% { transform: rotate(0deg); }
  4% { transform: rotate(-22deg); }
  8% { transform: rotate(16deg); }
  12% { transform: rotate(-11deg); }
  16% { transform: rotate(6deg); }
  20% { transform: rotate(-3deg); }
  24% { transform: rotate(0deg); }
  28% { transform: rotate(22deg); }
  32% { transform: rotate(-16deg); }
  36% { transform: rotate(11deg); }
  40% { transform: rotate(-6deg); }
  44% { transform: rotate(3deg); }
  48% { transform: rotate(0deg); }
  52% { transform: rotate(-22deg); }
  56% { transform: rotate(16deg); }
  60% { transform: rotate(-11deg); }
  64% { transform: rotate(6deg); }
  68% { transform: rotate(-3deg); }
  72% { transform: rotate(0deg); }
  76% { transform: rotate(22deg); }
  80% { transform: rotate(-16deg); }
  84% { transform: rotate(11deg); }
  88% { transform: rotate(-6deg); }
  92% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-bell,
  .splash-clapper {
    animation: none;
  }
}