/**
 * Subtle entrance motion: fade + slide, optional shimmer accent.
 * Respects prefers-reduced-motion.
 */

@keyframes bell-bg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bell-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bell-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.bell-motion-bg {
  animation: bell-bg-fade 0.55s ease-out forwards;
}

.bell-motion-page {
  animation: bell-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.bell-motion-card {
  position: relative;
  animation: bell-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.bell-motion-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.25) 40%,
    rgba(196, 181, 253, 0.65) 50%,
    rgba(139, 92, 246, 0.25) 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: bell-shimmer 3.2s ease-in-out infinite;
}

/* Frosted / dark panels (admin login) */
.bell-motion-card--dark::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 42%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.12) 58%,
    transparent 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .bell-motion-bg,
  .bell-motion-page,
  .bell-motion-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .bell-motion-card::after {
    animation: none !important;
    opacity: 0.35;
  }
}