/* Homepage only. Artwork and highlights share the raster's exact coordinates,
   including its existing desktop crop and mobile contain treatment. */
[data-hero-motion] .future-pathway-art { --pathway-height: 440px; }

[data-hero-motion] .future-pathway-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

[data-hero-motion] .future-pathway-canvas {
  position: absolute;
  left: 50%;
  top: 18%;
  width: max(100%, calc(var(--pathway-height) * 1672 / 941));
  aspect-ratio: 1672 / 941;
  transform: translate(-50%, -18%);
}

[data-hero-motion] .future-pathway-canvas img,
[data-hero-motion] .hero-pathway-light {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}

[data-hero-motion] .hero-pathway-light { overflow: visible; }
/* Specks share the existing artwork's coordinates; no visible guide strokes. */
.hero-flow-particle { opacity: 0; }
[data-hero-motion]:not([data-motion-ready]) .hero-pathway-light { visibility: hidden; }

/* Live backdrop sampling over the moving artwork caused foreground layers to
   disappear briefly in Chrome. The existing surfaces supply their own color. */
[data-hero-motion] .future-card,
[data-hero-motion] .future-fork-button-secondary {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-motion-control {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 36px;
  margin-top: 14px;
  padding: 7px 9px;
  border: 1px solid #e3d8ff35;
  border-radius: 20px;
  color: #e3dcf2;
  background: #ffffff06;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.hero-motion-control:hover { border-color: #e3d8ff80; background: #ffffff0d; }
.hero-motion-control:focus-visible { outline: 2px solid #8ef5d8; outline-offset: 4px; }
/* Reserve the control row while the image decodes, avoiding a layout shift.
   Visibility keeps the unavailable button out of focus and accessibility. */
.hero-motion-control[hidden] { display: flex; visibility: hidden; }
.hero-motion-control [hidden] { display: none; }

@media (max-width: 1120px) {
  [data-hero-motion] .future-pathway-art { --pathway-height: 330px; }
}

@media (max-width: 820px) {
  [data-hero-motion] .future-pathway-art { --pathway-height: 250px; }
  [data-hero-motion] .future-pathway-viewport { transform: scale(1.08); }
  [data-hero-motion] .future-pathway-canvas {
    top: 12%;
    width: min(100%, calc(var(--pathway-height) * 1672 / 941));
    transform: translate(-50%, -12%);
  }
}

@media print {
  .hero-motion-control, .hero-pathway-light { display: none !important; }
}