/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* Scroll-reveal animations */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="scale-in"].is-visible {
  opacity: 1;
  transform: scale(1);
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Lawzo AI section */
.lawzo-ai-bg {
  background: linear-gradient(135deg, #312e81 0%, #3730a3 40%, #1e293b 100%);
}

/* Floating glow animations for AI section */
@keyframes floatGlow1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -18px) scale(1.1); }
}

@keyframes floatGlow2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 12px) scale(1.08); }
}

@keyframes floatGlow3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, 15px) scale(1.05); }
}

.ai-glow-1 { animation: floatGlow1 6s ease-in-out infinite; }
.ai-glow-2 { animation: floatGlow2 8s ease-in-out infinite; }
.ai-glow-3 { animation: floatGlow3 7s ease-in-out infinite; }

/* ── AI lawyer match ─────────────────────────────────────────────────────── */

/* Skeleton cards hold the exact geometry of the real lawyer cards, so results
   land without the layout jumping. */
@keyframes lzShimmer {
  100% { transform: translateX(100%); }
}

.lz-skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e2e8f0; /* slate-200 */
}

.lz-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: lzShimmer 1.5s infinite;
}

/* Pipeline steps: pending steps recede, the running one is lit, finished ones
   settle back. State is driven by ai_match_controller. */
.lz-step {
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

.lz-step.is-active { opacity: 1; }
.lz-step.is-done   { opacity: 0.6; }

.lz-step__dot {
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.lz-step.is-active .lz-step__dot {
  background-color: #34d399; /* emerald-400 — the app's accent, on the dark panel */
  transform: scale(1.35);
}

.lz-step.is-done .lz-step__dot {
  background-color: #34d399;
}

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

.lz-rise { animation: lzRise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .lz-skeleton::after,
  .lz-rise,
  .ai-glow-1,
  .ai-glow-2,
  .ai-glow-3 {
    animation: none;
  }

  .lz-step,
  .lz-step__dot {
    transition: none;
  }
}

/* ── AI match CTA (lawyer listing) ───────────────────────────────────────── */

/* Slate base like every other primary action in the app; the emerald accents
   in the markup are what mark it as the AI entry point. Flat, not gradient —
   the app uses gradients almost nowhere. */
.lz-ai-cta {
  background-color: #0f172a; /* slate-900 */
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease,
              background-color 0.2s ease;
}

.lz-ai-cta:hover {
  background-color: #1e293b; /* slate-800, matching the other primary buttons */
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

.lz-ai-cta:active { transform: translateY(0); }

/* A slow sheen sweep — long pause between passes so it draws the eye on a
   listing page without becoming a distraction while people read results. */
.lz-ai-cta__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-160%);
  animation: lzSheen 5s ease-in-out infinite;
}

@keyframes lzSheen {
  0%, 60% { transform: translateX(-160%); }
  100%    { transform: translateX(320%); }
}

@keyframes lzTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.lz-spark {
  transform-origin: center;
  animation: lzTwinkle 2.4s ease-in-out infinite;
}

.lz-spark--delayed { animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .lz-ai-cta__sheen,
  .lz-spark {
    animation: none;
  }

  .lz-ai-cta,
  .lz-ai-cta:hover {
    transition: none;
    transform: none;
  }
}

/* ── Legal AI Chat Markdown & Document Action Buttons ─────────────────────── */

.legal-content {
  color: #334155; /* slate-700 */
}

.legal-content p {
  margin-bottom: 0.625rem;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul {
  list-style-type: disc;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  margin-bottom: 0.625rem;
}

.legal-content ol {
  list-style-type: decimal;
  margin-left: 1.25rem;
  margin-top: 0.375rem;
  margin-bottom: 0.625rem;
}

.legal-content li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

.legal-content strong {
  font-weight: 600;
  color: #0f172a; /* slate-900 */
}

.legal-content a {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.legal-content a:hover {
  color: #0369a1;
}

/* Document Template links rendered as prominent action buttons */
.legal-content a[href*="/legal-documents"],
.prose-support a[href*="/legal-documents"] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.65rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25;
  background-color: #ecfdf5; /* emerald-50 */
  color: #065f46; /* emerald-800 */
  border: 1px solid #a7f3d0; /* emerald-200 */
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(16, 185, 129, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  vertical-align: middle;
  cursor: pointer;
}

.legal-content a[href*="/legal-documents"]:hover,
.prose-support a[href*="/legal-documents"]:hover {
  background-color: #d1fae5; /* emerald-100 */
  border-color: #34d399; /* emerald-400 */
  color: #047857; /* emerald-700 */
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.18), 0 2px 4px -2px rgba(16, 185, 129, 0.1);
}

.legal-content a[href*="/legal-documents"]:active,
.prose-support a[href*="/legal-documents"]:active {
  transform: translateY(0);
}

.legal-content a[href*="/legal-documents"]::before,
.prose-support a[href*="/legal-documents"]::before {
  content: "📄";
  font-size: 0.8125rem;
  line-height: 1;
}

.legal-content a[href*="/legal-documents"]::after,
.prose-support a[href*="/legal-documents"]::after {
  content: "↗";
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 0.125rem;
}

@import "./legal_documents.css";