/**
 * Professional split-block landing illustrations: glass, semantic mock UI.
 * Tokens from .landing-main (landing-sections.css).
 */
.landing-illu-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 26.5rem;
  margin-inline: auto;
  border-radius: var(--radius-xl, 1.25rem);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 58%, transparent);
  border: 1px solid var(--landing-glass-border, rgba(238, 238, 238, 0.1));
  border-top-color: transparent;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--landing-text, #eee) 6%, transparent),
    0 12px 40px color-mix(in srgb, #000 30%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
}

/* Gradient top accent for illustration shells */
.landing-illu-scene::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 1.5rem);
  height: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--landing-text, #eeeeee) 8%, transparent) 16%,
    color-mix(in srgb, var(--landing-text, #eeeeee) 20%, transparent) 50%,
    color-mix(in srgb, var(--landing-text, #eeeeee) 8%, transparent) 84%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .landing-block-split .landing-illu-scene {
    margin-inline: 0;
  }

  .landing-block-split .md\:justify-self-end .landing-illu-scene {
    margin-inline-start: auto;
  }
}

.landing-illu-scene__body {
  position: relative;
  z-index: 1;
  padding: var(--spacing-xl, 1.25rem) var(--spacing-2xl, 1.5rem) var(--spacing-2xl, 1.5rem);
}

.landing-illu-scene__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-end: var(--spacing-md, 0.75rem);
  padding: 0.2rem 0.55rem;
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--landing-text-muted, #bbb) 92%, transparent);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 12%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 40%, transparent);
}

.landing-illu-scene__title {
  margin: 0 0 var(--spacing-lg, 1rem);
  font-size: var(--font-size-md, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: -0.02em;
  color: var(--landing-text, #eee);
}

/* —— Financial Mirror snapshot —— */
.landing-illu-mirror__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md, 0.75rem);
  margin-block-end: var(--spacing-lg, 1rem);
}

.landing-illu-pill {
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--landing-accent, #d4d4d4) 35%, transparent);
  color: var(--landing-text, #eee);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 14%, transparent);
}

.landing-illu-pill--muted {
  border-color: color-mix(in srgb, var(--landing-text, #eee) 14%, transparent);
  color: var(--landing-text-muted, #bbb);
  background: color-mix(in srgb, var(--landing-text, #eee) 6%, transparent);
}

/* "Watch" etc. — no orange, landing neutral tones only */
.landing-illu-pill--warn {
  border-color: color-mix(in srgb, var(--landing-text, #eee) 22%, transparent);
  background: color-mix(in srgb, var(--landing-text, #eee) 8%, var(--landing-canvas, #020203));
  color: color-mix(in srgb, var(--landing-text, #eee) 72%, transparent);
}

.landing-illu-swap-target {
  transition:
    opacity 0.28s ease,
    filter 0.28s ease;
}

.landing-illu-swap-target.landing-illu-swap--out {
  opacity: 0;
  filter: blur(4px);
}

.landing-illu-swap-target.landing-illu-swap--in {
  opacity: 1;
  filter: blur(0);
}

.landing-illu-mirror__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm, 0.5rem);
  margin-block-end: var(--spacing-lg, 1rem);
}

.landing-illu-metric {
  padding: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 10%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 50%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--landing-text, #eee) 5%, transparent);
}

.landing-illu-metric__label {
  display: block;
  margin-block-end: 0.2rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #bbb);
}

.landing-illu-metric__value {
  font-size: var(--font-size-lg, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: -0.02em;
  color: var(--landing-text, #eee);
}

.landing-illu-mirror__periods {
  display: flex;
  gap: 0.35rem;
  margin-block-start: var(--spacing-md, 0.75rem);
}

.landing-illu-period {
  flex: 1;
  padding: 0.35rem 0;
  font-size: 0.625rem;
  font-weight: 500;
  text-align: center;
  color: var(--landing-text-muted, #bbb);
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid transparent;
}

.landing-illu-period.is-active {
  color: var(--landing-text, #eee);
  border-color: color-mix(in srgb, var(--landing-accent, #d4d4d4) 40%, transparent);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 10%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .landing-illu-scene.is-in-view {
    animation: landing-illu-scene-float 7s ease-in-out infinite;
  }

  .landing-illu-scene.is-in-view .landing-illu-pill {
    animation: landing-illu-pill-glow 3.2s ease-in-out infinite;
  }

  .landing-illu-scene.is-in-view .landing-illu-metric {
    animation: landing-illu-rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .landing-illu-scene.is-in-view .landing-illu-metric:nth-child(1) {
    animation-delay: 0.04s;
  }

  .landing-illu-scene.is-in-view .landing-illu-metric:nth-child(2) {
    animation-delay: 0.1s;
  }

  .landing-illu-scene.is-in-view .landing-illu-metric:nth-child(3) {
    animation-delay: 0.16s;
  }

  .landing-illu-scene.is-in-view .landing-illu-metric:nth-child(4) {
    animation-delay: 0.22s;
  }
}

@keyframes landing-illu-scene-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes landing-illu-pill-glow {
  0%,
  100% {
    box-shadow: 0 0 0 color-mix(in srgb, var(--landing-accent, #d4d4d4) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 14px color-mix(in srgb, var(--landing-accent, #d4d4d4) 28%, transparent);
  }
}

@keyframes landing-illu-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* —— Nucleus workspace mock —— */
.landing-illu-scene--wide {
  max-width: 25rem;
}

.landing-illu-workspace {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--spacing-sm, 0.5rem);
  min-height: 15.5rem;
}

.landing-illu-workspace__nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--spacing-sm, 0.5rem);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 8%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 65%, transparent);
}

.landing-illu-nav-item {
  padding: 0.28rem 0.35rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--landing-text-muted, #bbb);
  border-radius: 0.35rem;
}

.landing-illu-nav-item.is-active {
  color: var(--landing-text, #eee);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 12%, transparent);
}

.landing-illu-workspace__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
  min-width: 0;
}

.landing-illu-board {
  padding: var(--spacing-sm, 0.5rem);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 8%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 45%, transparent);
}

.landing-illu-board__title {
  margin: 0 0 0.35rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--landing-text-muted, #bbb);
}

.landing-illu-board__weeks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem;
}

.landing-illu-week {
  height: 1.1rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--landing-text, #eee) 8%, transparent);
}

.landing-illu-week.is-filled {
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 22%, transparent);
}

.landing-illu-week.is-pulse {
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 38%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--landing-accent, #d4d4d4) 25%, transparent);
}

.landing-illu-analysis-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
}

.landing-illu-analysis-stack .snapshot-analysis-inner {
  padding: var(--spacing-lg, 1rem) !important;
  border-radius: var(--radius-lg, 1rem) !important;
}

.landing-illu-analysis-stack .snapshot-data,
.landing-illu-analysis-stack .snapshot-analysis {
  font-size: 0.6875rem;
  line-height: 1.45;
}

/* —— Assistant flow —— */
.landing-illu-flow {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
}

.landing-illu-flow__canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1fr);
  gap: var(--spacing-sm, 0.5rem);
  align-items: center;
}

.landing-illu-flow__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.landing-illu-flow__path {
  fill: none;
  stroke: color-mix(in srgb, var(--landing-text, #eee) 42%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.4;
}

.landing-illu-flow__path.is-active {
  opacity: 0.85;
  stroke: color-mix(in srgb, var(--landing-text, #eee) 62%, transparent);
}

.landing-illu-flow__path--out {
  stroke: color-mix(in srgb, var(--landing-accent, #d4d4d4) 48%, transparent);
  opacity: 0.45;
}

.landing-illu-flow__path--out.is-active {
  opacity: 0.9;
  stroke: color-mix(in srgb, var(--landing-accent, #d4d4d4) 68%, transparent);
}

.landing-illu-flow__col,
.landing-illu-flow__hub {
  position: relative;
  z-index: 1;
}

.landing-illu-flow__col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.landing-illu-snap-row {
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 10%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 55%, transparent);
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.landing-illu-snap-row.is-active {
  border-color: color-mix(in srgb, var(--landing-accent, #d4d4d4) 42%, transparent);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--landing-accent, #d4d4d4) 18%, transparent);
}

.landing-illu-snap-row strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--landing-text, #eee);
}

.landing-illu-snap-row span {
  font-size: 0.5625rem;
  color: var(--landing-text-muted, #bbb);
}

.landing-illu-flow__hub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--landing-accent, #d4d4d4) 28%, transparent);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 10%, transparent);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--landing-text, #eee);
  box-shadow: 0 0 0 color-mix(in srgb, var(--landing-accent, #d4d4d4) 0%, transparent);
}

.landing-illu-chat {
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 12%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 40%, transparent);
}

.landing-illu-chat__preview {
  margin: 0 0 0.4rem;
  font-size: 0.5625rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--landing-text, #eee) 78%, transparent);
}

.landing-illu-chat__line {
  height: 0.35rem;
  margin-block-end: 0.3rem;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--landing-text, #eee) 14%, transparent);
  transform-origin: left center;
  transform: scaleX(0.35);
  opacity: 0.45;
}

.landing-illu-chat__line:last-child {
  margin-block-end: 0;
  width: 72%;
}

.landing-illu-insight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 10%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 50%, transparent);
  opacity: 0.35;
  transform: translate3d(6px, 0, 0);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    border-color 0.4s ease,
    background 0.4s ease;
}

.landing-illu-insight.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.landing-illu-insight.is-active {
  border-color: color-mix(in srgb, var(--landing-accent, #d4d4d4) 38%, transparent);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 8%, transparent);
}

.landing-illu-insight__label {
  font-size: 0.5625rem;
  color: var(--landing-text-muted, #bbb);
}

.landing-illu-insight__value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--landing-text, #eee);
}

.landing-illu-insight__dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--landing-accent, #d4d4d4);
  box-shadow: 0 0 8px color-mix(in srgb, var(--landing-accent, #d4d4d4) 55%, transparent);
  opacity: 0.4;
  transition: opacity 0.35s ease;
}

.landing-illu-insight.is-active .landing-illu-insight__dot {
  opacity: 1;
}

.landing-illu-flow__caption {
  grid-column: 1 / -1;
  margin: var(--spacing-sm, 0.5rem) 0 0;
  font-size: 0.5625rem;
  text-align: center;
  color: var(--landing-text-muted, #bbb);
}

@media (prefers-reduced-motion: no-preference) {
  .landing-illu-scene.is-in-view .landing-illu-flow__path {
    animation: landing-illu-dash 2.2s linear infinite;
  }

  .landing-illu-scene.is-in-view .landing-illu-flow__hub {
    animation: landing-illu-hub-pulse 2.6s ease-in-out infinite;
  }

  .landing-illu-scene.is-in-view .landing-illu-snap-row {
    animation: landing-illu-rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .landing-illu-flow__col--snaps .landing-illu-snap-row:nth-child(1) {
    animation-delay: 0.05s;
  }

  .landing-illu-flow__col--snaps .landing-illu-snap-row:nth-child(2) {
    animation-delay: 0.12s;
  }

  .landing-illu-flow__col--snaps .landing-illu-snap-row:nth-child(3) {
    animation-delay: 0.19s;
  }

  .landing-illu-scene.is-in-view .landing-illu-chat__line:nth-child(1) {
    animation: landing-illu-chat-line 2.8s ease-in-out infinite;
  }

  .landing-illu-scene.is-in-view .landing-illu-chat__line:nth-child(2) {
    animation: landing-illu-chat-line 2.8s ease-in-out infinite 0.35s;
  }

  .landing-illu-scene.is-in-view .landing-illu-chat__line:nth-child(3) {
    animation: landing-illu-chat-line 2.8s ease-in-out infinite 0.7s;
  }
}

@keyframes landing-illu-dash {
  to {
    stroke-dashoffset: -18;
  }
}

@keyframes landing-illu-hub-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 color-mix(in srgb, var(--landing-accent, #d4d4d4) 0%, transparent);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 18px color-mix(in srgb, var(--landing-accent, #d4d4d4) 32%, transparent);
  }
}

@keyframes landing-illu-chat-line {
  0%,
  100% {
    transform: scaleX(0.4);
    opacity: 0.4;
  }

  45%,
  55% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Calculator scene: same padding and width as Mirror / Assistant */
.landing-illu-calc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.landing-illu-calc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block: 0 var(--spacing-md, 0.75rem);
}

.landing-illu-calc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.125rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.5rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--landing-text-muted, #bbb) 88%, transparent);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--landing-text, #eee) 14%, transparent);
  background: color-mix(in srgb, var(--landing-canvas, #020203) 55%, transparent);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.landing-illu-calc-chip.is-active {
  color: var(--landing-text, #eee);
  border-color: color-mix(in srgb, var(--landing-accent, #d4d4d4) 45%, transparent);
  background: color-mix(in srgb, var(--landing-accent, #d4d4d4) 14%, transparent);
}

.landing-illu-scene--calc .calculator-animation {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.landing-illu-scene--calc .landing-illu-surface {
  fill: color-mix(in srgb, var(--landing-canvas, #020203) 70%, #eeeeee 24%);
  fill-opacity: 0.22;
  stroke: color-mix(in srgb, var(--landing-text, #eee) 36%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition:
    fill-opacity 0.35s ease,
    stroke-color 0.35s ease;
}

/* Legacy containers → unified scene */
.snapshot-animation-container:not(.landing-illu-scene) {
  max-width: 26.5rem;
}

.ai-analysis-animation-container.landing-illu-scene,
.calculator-animation-container.landing-illu-scene {
  padding: 0 !important;
}

.ai-analysis-animation-container .landing-illu-scene__body {
  padding-block: var(--spacing-lg, 1rem);
}

@media (max-width: 420px) {
  .landing-illu-flow__canvas {
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 0.75rem);
  }

  .landing-illu-flow__hub {
    margin-inline: auto;
  }

  .landing-illu-flow__caption {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-illu-scene,
  .landing-illu-scene.is-in-view {
    animation: none !important;
    transform: none !important;
  }

  .landing-illu-scene *,
  .landing-illu-scene.is-in-view *,
  .calculator-animation * {
    animation: none !important;
  }

  .landing-illu-swap-target {
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .landing-illu-insight {
    opacity: 1;
    transform: none;
  }

  .landing-illu-chat__line {
    transform: scaleX(1);
    opacity: 1;
  }
}