/* ============================================================ */
/* Hero — landing block + soft branded backdrop + exit animation */
/* ------------------------------------------------------------ */
/* Lifted from the parent prototype's `view-landing` so the      */
/* standalone demo can show the choreography that Process Steps  */
/* lives inside (hero → exit → process steps → done).            */
/*                                                               */
/* Self-contained: only depends on tokens.css. Drop `hero.css`   */
/* AND `tokens.css` into your prototype to reuse the hero alone, */
/* or use just `process-steps.{css,js}` to lift only the         */
/* animation. README has both recipes.                           */
/* ============================================================ */

/* ------------------------------------------------------------ */
/* Stage — full-viewport canvas that centers the hero.           */
/* The hero sits on a soft purple→blue gradient with three       */
/* radial glows so the brand color reads through the type.       */
/* `position: relative` + `overflow: hidden` clip the glows so   */
/* they don't bleed past the viewport edge.                       */
/* ------------------------------------------------------------ */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--color-surface-card, #fff);
}

.page-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    var(--hero-bg-start) 0%,
    var(--hero-bg-mid)   50%,
    var(--hero-bg-end)   100%
  );
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  pointer-events: none;
}

.glow-1 {
  width: 900px;
  height: 900px;
  right: -200px;
  top: -200px;
  background: radial-gradient(circle, var(--hero-glow-cyan) 0%, transparent 70%);
}

.glow-2 {
  width: 800px;
  height: 800px;
  left: -200px;
  bottom: -250px;
  background: radial-gradient(circle, var(--hero-glow-violet) 0%, transparent 70%);
}

.glow-3 {
  width: 1100px;
  height: 700px;
  left: 30%;
  bottom: -350px;
  background: radial-gradient(circle, var(--hero-glow-blue) 0%, transparent 70%);
  opacity: 0.25;
}

/* ------------------------------------------------------------ */
/* Hero — preview card + title + subtitle + CTA stacked column.  */
/* `z-index: 1` lifts it above .page-bg / .glow.                 */
/* ------------------------------------------------------------ */
.hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 80px;
  gap: 16px;

  /* ---------------------------------------------------------- */
  /* Hero exit — runs BEFORE the view swaps to Process Steps.   */
  /* The whole hero block (preview card + title + subtitle +    */
  /* CTA) lifts up 10% of its own height and fades to 0 as a     */
  /* SINGLE deliberate beat. Uniform exit (NOT staggered) keeps  */
  /* the eye on the title — the focal point — through the        */
  /* transition. DO NOT add per-child stagger here; the parent   */
  /* prototype reverted that and we want this animation to       */
  /* match.                                                       */
  /*                                                              */
  /* Curve mirrors the iOS-style spring-settle used elsewhere    */
  /* (process-steps shipped curves) for refined motion.          */
  /* ---------------------------------------------------------- */
  transition:
    transform 480ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity   480ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
}

.hero.is-leaving {
  transform: translateY(-10%);
  opacity: 0;
  /* Guard against a double-click on Get Started during the exit. */
  pointer-events: none;
}

.hero-title {
  margin: 16px 0 0;
  max-width: 720px;
  font-size: 40px;
  line-height: 50px;
  font-weight: 300;
  color: var(--color-on-surface);
  letter-spacing: -0.2px;
}

.hero-subtitle {
  max-width: 583px;
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--color-on-surface);
}

.btn-brand {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 14px;
  font-weight: 590;
  cursor: pointer;
  box-shadow: var(--shadow-btn-rest);
  transition:
    background-color 120ms ease,
    transform        200ms ease,
    box-shadow       200ms ease;
}
.btn-brand:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.btn-brand:active {
  transform: translateY(0);
}
.btn-brand svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

/* ------------------------------------------------------------ */
/* Preview card — stylized Salesforce-ish search-result mock.    */
/* Pure CSS, no real data. Sits above the hero copy as a visual  */
/* anchor that hints at what Process Steps will produce.         */
/* ------------------------------------------------------------ */
.preview-card {
  width: 480px;
  height: 270px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.11);
  margin-bottom: 24px;
}

.preview-chrome {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border-subtle);
}

.chrome-line {
  display: inline-block;
  width: 40px;
  height: 6px;
  background: var(--color-border);
  border-radius: 1.5px;
}

.chrome-pill {
  margin-left: auto;
  width: 42px;
  height: 10px;
  border-radius: 6px;
  background: var(--color-primary);
}

.preview-body {
  height: calc(100% - 26px);
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-card-inner {
  width: 380px;
  height: 200px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Soft brand-gradient halo behind the inner card. */
.preview-card-inner::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 14px;
  background: radial-gradient(
    circle at 20% 50%,
    #1ab9ff 0%,
    #6b8bff 30%,
    #b76bff 65%,
    #066afe 100%
  );
  filter: blur(12px);
  opacity: 0.45;
  z-index: -1;
}

.preview-line {
  background: var(--color-blue-90);
  border-radius: 4px;
}
.line-md { width: 156px; height: 6px; }
.line-sm { width: 110px; height: 6px; }

.preview-search {
  width: 330px;
  height: 48px;
  border-radius: 100px;
  background: linear-gradient(
    171deg,
    rgba(242, 213, 255, 0.9) 0%,
    rgba(213, 229, 255, 0.9) 50%,
    rgba(242, 213, 255, 0.9) 100%
  );
  display: flex;
  align-items: center;
  padding: 6px;
}

.preview-search-pill {
  width: 100%;
  height: 36px;
  background: #fff;
  border-radius: 89px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.preview-search-pill svg {
  width: 24px;
  height: 24px;
}

.preview-metrics {
  display: flex;
  gap: 8px;
}

.metric {
  width: 68px;
  height: 16px;
  border-radius: 4px;
  background: var(--color-blue-90);
}

/* ------------------------------------------------------------ */
/* View swap — landing vs animation.                             */
/* `.view` is hidden by default; `.view.is-active` shows it.     */
/* The hero exit (.is-leaving) finishes BEFORE we swap views,    */
/* so there's no cross-fade to author here — just hard show/     */
/* hide. Process Steps does its own per-row choreography.        */
/* ------------------------------------------------------------ */
.view {
  position: absolute;
  inset: 0;
  display: none;
}
.view.is-active {
  display: block;
}

/* The animation fills the .view-animation canvas; ProcessSteps  */
/* writes into #process-steps-root which is `position: absolute; */
/* inset: 0` so the rows center vertically inside it.            */
.view-animation {
  background: linear-gradient(
    135deg,
    var(--hero-bg-start) 0%,
    var(--hero-bg-mid)   50%,
    var(--hero-bg-end)   100%
  );
}
.view-animation #process-steps-root {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------ */
/* Replay button — appears bottom-center after the timeline      */
/* completes. Fades in over 240ms so it doesn't slam in.         */
/* Click resets the hero (`.is-leaving` removed → fade back in)  */
/* and re-arms the demo.                                          */
/* ------------------------------------------------------------ */
.replay-btn {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.90);
  color: var(--color-on-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 13px;
  font-weight: 590;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 30, 91, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 240ms ease, transform 200ms ease;
}
.replay-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.replay-btn:hover { transform: translateX(-50%) translateY(-1px); }
.replay-btn:active { transform: translateX(-50%) translateY(0); }
.replay-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}