/* ---------------------------------------------------------------------------
   workflow-hero.css

   Presentation for the hero's static workflow board.

   The board is 850 × 780 in its own units and scales by its viewBox, so it
   needs no breakpoints — it is given a width and it keeps its proportions.
   --------------------------------------------------------------------------- */

.workflow-hero {
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  display: block;
  width: min(112%, 640px);
  margin: 0 0 0 -12%;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;

  /* Reserved before the SVG arrives, so the hero does not jump when it does.
     Same ratio as the board's own viewBox. */
  aspect-ratio: 738 / 668;
}

.hero-section[data-tilt] .hero-visual {
  perspective: 900px;
  perspective-origin: center;
}

@media (max-width: 900px) {
  .workflow-hero {
    width: min(100%, 560px);
    margin-inline: auto;
  }
}

.workflow-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .workflow-hero {
    transform: none;
    transition: none;
  }
}

/* ── The field the hero sits on ────────────────────────────────────────────
   A dark field with the banner system's two-level dot treatment: a quiet
   white structural grid and a denser Action Blue glow anchored at top right.
   ------------------------------------------------------------------------ */
.workflow-field {
  --wf-pitch: 22px;
  --wf-grid: rgba(255, 255, 255, 0.07);

  position: relative;
  isolation: isolate;
  background-color: transparent;
  background-image: radial-gradient(circle, var(--wf-grid) 0.7px, transparent 0.8px);
  background-size: var(--wf-pitch) var(--wf-pitch);
}