/* Landing hero: the step-by-step product scene. landing-hero.js moves data-step;
   without JavaScript the card stays on the final step. */
[data-landing-hero] {
  --landing-hero-step: 4000ms;
}

.landing-hero-stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.landing-hero-stages > [data-stage] {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

/* Transitions start after the script swaps the no-JS final step for the first one. */
[data-landing-hero].is-ready .landing-hero-stages > [data-stage] {
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

[data-landing-hero] [data-landing-hero-caption] {
  display: none;
}

[data-landing-hero][data-step="1"] [data-stage="1"],
[data-landing-hero][data-step="2"] [data-stage="2"],
[data-landing-hero][data-step="3"] [data-stage="3"],
[data-landing-hero][data-step="4"] [data-stage="4"],
[data-landing-hero][data-step="5"] [data-stage="5"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

[data-landing-hero].is-ready[data-step="1"] [data-stage="1"],
[data-landing-hero].is-ready[data-step="2"] [data-stage="2"],
[data-landing-hero].is-ready[data-step="3"] [data-stage="3"],
[data-landing-hero].is-ready[data-step="4"] [data-stage="4"],
[data-landing-hero].is-ready[data-step="5"] [data-stage="5"] {
  transition-delay: 0s;
}

[data-landing-hero][data-step="1"] [data-landing-hero-caption="1"],
[data-landing-hero][data-step="2"] [data-landing-hero-caption="2"],
[data-landing-hero][data-step="3"] [data-landing-hero-caption="3"],
[data-landing-hero][data-step="4"] [data-landing-hero-caption="4"],
[data-landing-hero][data-step="5"] [data-landing-hero-caption="5"] {
  display: block;
  animation: landing-hero-rise 0.4s ease both;
}

/* Live indicator in the card header */
.landing-hero-live {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--primary);
  animation: landing-hero-pulse 1.6s ease-in-out infinite;
}

/* Step indicator: the active bar fills during the step and earlier steps stay full. */
.landing-hero-dot__fill {
  transform: scaleX(0);
  transform-origin: left center;
}

.landing-hero-dot:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

[data-landing-hero][data-step="1"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
[data-landing-hero][data-step="2"] [data-landing-hero-dot="2"] .landing-hero-dot__fill,
[data-landing-hero][data-step="3"] [data-landing-hero-dot="3"] .landing-hero-dot__fill,
[data-landing-hero][data-step="4"] [data-landing-hero-dot="4"] .landing-hero-dot__fill,
[data-landing-hero][data-step="5"] [data-landing-hero-dot="5"] .landing-hero-dot__fill {
  animation: landing-hero-fill var(--landing-hero-step) linear forwards;
}

[data-landing-hero][data-step="2"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
[data-landing-hero][data-step="3"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
[data-landing-hero][data-step="3"] [data-landing-hero-dot="2"] .landing-hero-dot__fill,
[data-landing-hero][data-step="4"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
[data-landing-hero][data-step="4"] [data-landing-hero-dot="2"] .landing-hero-dot__fill,
[data-landing-hero][data-step="4"] [data-landing-hero-dot="3"] .landing-hero-dot__fill,
[data-landing-hero][data-step="5"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
[data-landing-hero][data-step="5"] [data-landing-hero-dot="2"] .landing-hero-dot__fill,
[data-landing-hero][data-step="5"] [data-landing-hero-dot="3"] .landing-hero-dot__fill,
[data-landing-hero][data-step="5"] [data-landing-hero-dot="4"] .landing-hero-dot__fill {
  transform: scaleX(1);
}

/* Step 1: sources arrive and become an organized case */
.landing-hero-chip,
.landing-hero-pop,
.landing-hero-card,
.landing-hero-worker,
.landing-hero-toast,
.landing-hero-stamp,
.landing-hero-done {
  opacity: 0;
}

[data-step="1"] [data-stage="1"] .landing-hero-chip {
  animation: landing-hero-rise 0.5s ease forwards;
}

[data-step="1"] [data-stage="1"] .landing-hero-chip:nth-child(2) { animation-delay: 0.2s; }
[data-step="1"] [data-stage="1"] .landing-hero-chip:nth-child(3) { animation-delay: 0.4s; }
[data-step="1"] [data-stage="1"] .landing-hero-chip:nth-child(4) { animation-delay: 0.6s; }
[data-step="1"] [data-stage="1"] .landing-hero-chip:nth-child(5) { animation-delay: 0.8s; }

[data-step="1"] [data-stage="1"] .landing-hero-arrow {
  animation: landing-hero-bob 1s ease-in-out 1s infinite;
}

[data-step="1"] [data-stage="1"] .landing-hero-pop {
  animation: landing-hero-pop 0.5s ease 1.6s forwards;
}

/* Step 2: personal data turns into redaction blocks */
.landing-hero-pii {
  border-radius: 4px;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-step="2"] [data-stage="2"] .landing-hero-pii {
  animation: landing-hero-redact 0.5s ease 0.6s forwards;
}

[data-step="2"] [data-stage="2"] .landing-hero-pii:nth-of-type(2) { animation-delay: 1.1s; }
[data-step="2"] [data-stage="2"] .landing-hero-pii:nth-of-type(3) { animation-delay: 1.6s; }

[data-step="2"] [data-stage="2"] .landing-hero-pop {
  animation: landing-hero-pop 0.5s ease 2.2s forwards;
}

/* Step 3: specialists work in parallel */
.landing-hero-bar__fill {
  transform: scaleX(0);
  transform-origin: left center;
}

[data-step="3"] [data-stage="3"] .landing-hero-worker {
  animation: landing-hero-rise 0.4s ease forwards;
}

[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(2) { animation-delay: 0.15s; }
[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(3) { animation-delay: 0.3s; }

[data-step="3"] [data-stage="3"] .landing-hero-bar__fill {
  animation: landing-hero-fill 1.4s ease-out 0.4s forwards;
}

[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(2) .landing-hero-bar__fill { animation-duration: 1.9s; }
[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(3) .landing-hero-bar__fill { animation-duration: 2.4s; }

[data-step="3"] [data-stage="3"] .landing-hero-done {
  animation: landing-hero-pop 0.35s ease 1.8s forwards;
}

[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(2) .landing-hero-done { animation-delay: 2.3s; }
[data-step="3"] [data-stage="3"] .landing-hero-worker:nth-child(3) .landing-hero-done { animation-delay: 2.8s; }

/* Step 4: deliverables */
[data-step="4"] [data-stage="4"] .landing-hero-card {
  animation: landing-hero-pop 0.5s ease 0.2s forwards;
}

[data-step="4"] [data-stage="4"] .landing-hero-card:nth-child(2) { animation-delay: 0.6s; }
[data-step="4"] [data-stage="4"] .landing-hero-card:nth-child(3) { animation-delay: 1s; }

/* Step 5: lawyer approval and client notification */
[data-step="5"] [data-stage="5"] .landing-hero-stamp {
  animation: landing-hero-stamp 0.45s ease 0.4s forwards;
}

[data-step="5"] [data-stage="5"] .landing-hero-toast {
  animation: landing-hero-rise 0.5s ease 1.3s forwards;
}

/* Pausing holds the step progress; entrance animations still finish so the step stays readable. */
[data-landing-hero].is-paused .landing-hero-dot__fill {
  animation-play-state: paused;
}

@keyframes landing-hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes landing-hero-pop {
  0% { opacity: 0; transform: scale(0.85); }
  70% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}

@keyframes landing-hero-stamp {
  0% { opacity: 0; transform: scale(1.6) rotate(-8deg); }
  100% { opacity: 1; transform: rotate(-4deg); }
}

@keyframes landing-hero-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes landing-hero-redact {
  to {
    color: transparent;
    background-color: var(--foreground);
  }
}

@keyframes landing-hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes landing-hero-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Reduced motion: no automatic steps (see landing-hero.js) and every step shows its final state. */
@media (prefers-reduced-motion: reduce) {
  [data-landing-hero] *,
  [data-landing-hero] *::before,
  [data-landing-hero] *::after {
    animation: none !important;
    transition: none !important;
  }

  .landing-hero-chip,
  .landing-hero-pop,
  .landing-hero-card,
  .landing-hero-worker,
  .landing-hero-toast,
  .landing-hero-done {
    opacity: 1;
  }

  .landing-hero-stamp {
    opacity: 1;
    transform: rotate(-4deg);
  }

  .landing-hero-bar__fill,
  [data-landing-hero][data-step="1"] [data-landing-hero-dot="1"] .landing-hero-dot__fill,
  [data-landing-hero][data-step="2"] [data-landing-hero-dot="2"] .landing-hero-dot__fill,
  [data-landing-hero][data-step="3"] [data-landing-hero-dot="3"] .landing-hero-dot__fill,
  [data-landing-hero][data-step="4"] [data-landing-hero-dot="4"] .landing-hero-dot__fill,
  [data-landing-hero][data-step="5"] [data-landing-hero-dot="5"] .landing-hero-dot__fill {
    transform: scaleX(1);
  }

  .landing-hero-pii {
    color: transparent;
    background-color: var(--foreground);
  }
}