/* OutliyrUX — Shared micro-interaction styles
 * Load before app-specific CSS. ~1kb gzipped. */

:root {
  --ux-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ux-ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ux-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ── Shared Keyframes ── */
@keyframes ux-fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ux-slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-40px); }
}

@keyframes ux-slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

@keyframes ux-slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ux-slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ux-pillPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes ux-drawCheck {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

@keyframes ux-drawCircle {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes ux-confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  70% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(85vh) translateX(var(--x)) rotate(var(--r)) scale(0.4);
  }
}

@keyframes ux-glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 165, 255, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(61, 165, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 165, 255, 0); }
}

/* ── Staggered entrance ── */
[data-ux-stagger] > * {
  animation: ux-fadeInUp 0.35s var(--ux-ease-spring) both;
}
[data-ux-stagger] > *:nth-child(1) { animation-delay: 0ms; }
[data-ux-stagger] > *:nth-child(2) { animation-delay: 50ms; }
[data-ux-stagger] > *:nth-child(3) { animation-delay: 100ms; }
[data-ux-stagger] > *:nth-child(4) { animation-delay: 150ms; }
[data-ux-stagger] > *:nth-child(5) { animation-delay: 200ms; }
[data-ux-stagger] > *:nth-child(6) { animation-delay: 250ms; }
[data-ux-stagger] > *:nth-child(7) { animation-delay: 300ms; }
[data-ux-stagger] > *:nth-child(8) { animation-delay: 350ms; }
[data-ux-stagger] > *:nth-child(9) { animation-delay: 400ms; }
[data-ux-stagger] > *:nth-child(10) { animation-delay: 450ms; }
[data-ux-stagger] > *:nth-child(n+11) { animation-delay: 500ms; }

/* ── Celebrate overlay ── */
.ux-celebrate-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ux-check-circle {
  width: 72px;
  height: 72px;
}

.ux-check-circle .circle {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ux-drawCircle 0.5s var(--ux-ease-snap) forwards;
}

.ux-check-circle .check {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: ux-drawCheck 0.3s var(--ux-ease-snap) 0.35s forwards;
}

.ux-celebrate-msg {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 8px;
  opacity: 0;
  animation: ux-fadeInUp 0.35s var(--ux-ease-spring) 0.55s forwards;
  text-align: center;
}

/* ── Confetti ── */
.ux-confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.ux-confetti-particle {
  position: absolute;
  top: -8px;
  width: 8px;
  height: 5px;
  border-radius: 2px;
  animation: ux-confettiFall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

/* ── Glow border ── */
.ux-glow {
  animation: ux-glowPulse 0.6s ease-out;
}

/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-ux-stagger] > *,
  .ux-check-circle .circle,
  .ux-check-circle .check,
  .ux-celebrate-msg,
  .ux-confetti-particle,
  .ux-glow {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}