/* ══════════════════════════════════════════════════════════════════════
   UNIVERSAL MOTION DESIGN — Task #1049541
   Site-wide motion system that auto-animates structural patterns.
   Works on ALL pages. Complements page-specific animations.css files.
   GPU-only (transform + opacity). Respects prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────── */

@keyframes umFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes umFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes umSlideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes umSlideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes umScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes umPopIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes umCtaPulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes umShimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes umCountGlow {
  0%   { text-shadow: 0 0 0 transparent; }
  50%  { text-shadow: 0 0 8px rgba(37,99,235,0.3); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* ── 1. Universal Scroll Reveal ───────────────────────────────────── */
/* Elements tagged by universal-motion.js get base hidden state,
   then .um-visible triggers the reveal. */

.um-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.um-reveal.um-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left variant */
.um-reveal-left {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.um-reveal-left.um-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in variant */
.um-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.um-reveal-scale.um-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── 2. Hero Entrance Animation ───────────────────────────────────── */
/* Applied to hero child elements for staggered page-entry animation */

.um-hero-anim {
  animation: umFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Stagger delays set via inline style (JS applies --um-delay) */
.um-hero-anim[style*="--um-delay"] {
  animation-delay: var(--um-delay);
}

/* ── 3. Card Hover Lift ───────────────────────────────────────────── */
/* All cards get a subtle lift + shadow on hover */

.um-card-hover {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.um-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}
.um-card-hover:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition-duration: 0.08s;
}

/* ── 4. CTA Pulse Glow ───────────────────────────────────────────── */
/* Adds a subtle pulse glow to primary CTAs via ::after pseudo-element */

.um-cta-pulse {
  position: relative;
  overflow: visible;
}
.um-cta-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 16px 3px rgba(37,99,235,0.3);
  opacity: 0;
  animation: umCtaPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* ── 5. Badge Pop-in ──────────────────────────────────────────────── */
.um-badge-pop {
  animation: umPopIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── 6. Stagger Delay Classes ─────────────────────────────────────── */
/* Used by JS for grid children stagger */
.um-sd-1  { transition-delay: 60ms; }
.um-sd-2  { transition-delay: 120ms; }
.um-sd-3  { transition-delay: 180ms; }
.um-sd-4  { transition-delay: 240ms; }
.um-sd-5  { transition-delay: 300ms; }
.um-sd-6  { transition-delay: 360ms; }
.um-sd-7  { transition-delay: 420ms; }
.um-sd-8  { transition-delay: 480ms; }
.um-sd-9  { transition-delay: 540ms; }
.um-sd-10 { transition-delay: 600ms; }
.um-sd-11 { transition-delay: 660ms; }
.um-sd-12 { transition-delay: 720ms; }

/* ── 7. Accordion Open/Close Transition ───────────────────────────── */
.um-accordion-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* ── 8. Image Reveal ──────────────────────────────────────────────── */
.um-img-reveal {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.um-img-reveal.um-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── 9. Counter Glow (post count-up) ─────────────────────────────── */
.um-count-done {
  animation: umCountGlow 0.8s ease;
}

/* ── 10. Section Divider Line Draw ────────────────────────────────── */
.um-line-draw {
  width: 0;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.um-line-draw.um-visible {
  width: 100%;
}

/* ── 11. Table Row Stagger ────────────────────────────────────────── */
.um-table-row {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.um-table-row.um-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 12. Smooth Focus Ring for Interactive Elements ────────────────── */
.um-focus-ring:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  transition: outline-offset 0.15s ease;
}

/* ── 13. Skeleton Loading Shimmer ─────────────────────────────────── */
.um-skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: umShimmer 1.5s ease infinite;
  border-radius: 8px;
}

/* ── 14. Link Underline Slide ─────────────────────────────────────── */
/* Applied to content links that benefit from animated underlines */
.um-link-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s ease;
}
.um-link-underline:hover {
  background-size: 100% 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — Kill all motion for accessibility
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .um-reveal,
  .um-reveal-left,
  .um-reveal-scale,
  .um-img-reveal,
  .um-table-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .um-hero-anim,
  .um-badge-pop,
  .um-count-done {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .um-cta-pulse::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .um-card-hover {
    transition: none !important;
  }
  .um-card-hover:hover {
    transform: none !important;
  }
  .um-skeleton {
    animation: none !important;
  }
  .um-line-draw {
    width: 100% !important;
    transition: none !important;
  }
  .um-link-underline {
    background-size: 100% 1px !important;
    transition: none !important;
  }
  .um-sd-1, .um-sd-2, .um-sd-3, .um-sd-4, .um-sd-5, .um-sd-6,
  .um-sd-7, .um-sd-8, .um-sd-9, .um-sd-10, .um-sd-11, .um-sd-12 {
    transition-delay: 0ms !important;
  }
}