/*
 * fusion: page-scoped rules for the product group (/scope-forge/ and
 * /ironidp/). Owned by IVW-024. Linked from every product page as
 * /styles/pages-product.css immediately after /styles/variant.css, so a
 * rule here wins over variant.css without !important. IVW-023 created
 * this file empty and wired the link; IVW-024 appended page-scoped rules
 * here and never edited variant.css.
 *
 * Empty since IVW-027 coherence round 2: every rule the product pages
 * needed is shared in effect and lives in variant.css (round 1 moved the
 * seam, header air, example-group steps, card grids and strong link;
 * round 2 moved the ticket body as .fu-card__body--md). The file stays,
 * with this comment only, because both product pages link it (section 4
 * of the README) and tools/check.sh reads every linked stylesheet. A
 * later product-page rule that is specific to these two pages goes
 * here. IVW-053 added the Scope-Forge page header's figure rules below.
 */

/* -----------------------------------------------------------------------
 * The Scope-Forge page header (IVW-053): the compiler's passes. The
 * founder's pick from the IVW-044 concepts, reworked to show passes, not
 * a policy. Markup generated by assets/sf-passes.py into the header of
 * scope-forge/index.html; every rule below is scoped to .sfp-hero. Wide
 * drawing (horizontal thread) from 64rem, where the column is its full
 * 992px and the drawing's smallest text is 13.3px; the phone drawing
 * (vertical thread) below, sized so the header fits the first iPhone
 * screen. Grey is the thread the policy travels; between two passes the
 * thread carries the policy as that pass leaves it; orange is what has
 * been checked.
 * --------------------------------------------------------------------- */

.sfp-hero .sfp-line {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: 600;
  color: var(--fg);
  max-width: 60ch;
}

.sfp-hero .fu-lead + .sfp-line {
  margin-top: var(--space-4);
}

.sfp-hero > .container > .sfp-figure {
  margin-top: var(--space-6);
}

.sfp-hero .sfp-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sfp-hero .sfp-svg--wide {
  display: none;
}

/* The phone drawing ends its last label ("low-power field equipment",
 * anchored to the drawing's right edge by the generator) flush with the
 * column, so on a phone it touched the gutter (IVW-059 bug 8, from the
 * round-three buyer critic). One --space-4 of padding on the right side
 * draws the figure 16px narrower and keeps the label that step inside
 * the column; the left label stays on the column edge with the title. */
.sfp-hero .sfp-svg--phone {
  max-width: 26rem;
  padding-inline-end: var(--space-4);
}

@media (min-width: 64rem) {
  .sfp-hero > .container > .sfp-figure {
    margin-top: var(--space-12);
  }

  .sfp-hero .sfp-svg--wide {
    display: block;
  }

  .sfp-hero .sfp-svg--phone {
    display: none;
  }
}

.sfp-hero .sfp-svg text {
  font-family: var(--font-mono);
}

.sfp-hero .sfp-label {
  fill: var(--fg);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.sfp-hero .sfp-sub,
.sfp-hero .sfp-end {
  fill: var(--muted);
}

.sfp-hero .sfp-thread,
.sfp-hero .sfp-lane {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}

.sfp-hero .sfp-out {
  stroke: var(--brand);
  stroke-width: 4;
}

.sfp-hero .sfp-node {
  fill: var(--bg-0);
  stroke: var(--fg);
  stroke-width: 2;
}

.sfp-hero .sfp-load--raw {
  fill: var(--bg-0);
  stroke: var(--muted);
  stroke-width: 1.5;
}

.sfp-hero .sfp-load--grey {
  fill: var(--muted);
}

.sfp-hero .sfp-load--hot,
.sfp-hero .sfp-bar {
  fill: var(--brand);
}

.sfp-hero .sfp-node,
.sfp-hero .sfp-load,
.sfp-hero .sfp-bar {
  transform-box: fill-box;
  transform-origin: center;
}

/* The construction, once, on the fusion hero-reveal hook. The figure is
 * item 4 and rises with fu-rise; then the thread is followed pass by
 * pass: a pass lands, the thread draws out of it, and the form it leaves
 * slides in from the pass (loose squares; aligned grey; checked orange;
 * two left; one bar); at native code the thread turns orange, splits into
 * five lanes, the bar lands on each, and the two ends of the range are
 * named. About three seconds; nothing loops; nothing moves after it
 * lands. Longhands only, so no shorthand resets a delay. With no script
 * the drawing is simply there; reduced motion holds the end state. */
.sfp-figure {
  --sfp-u: calc(var(--duration-fast) / 3);
}

@keyframes sfp-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes sfp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sfp-land {
  0% { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sfp-flow-x {
  0% { opacity: 0; transform: translateX(-24px); }
  70% { opacity: 1; transform: translateX(1px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes sfp-flow-y {
  0% { opacity: 0; transform: translateY(-14px); }
  70% { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-thread,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-lane {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-pass,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-node,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-load,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-bar,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed .sfp-end {
  opacity: 0;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-thread,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-lane {
  animation-name: sfp-draw;
  animation-duration: calc(var(--sfp-u) * 5);
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-end {
  animation-name: sfp-fade;
  animation-duration: calc(var(--sfp-u) * 6);
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: both;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-bar {
  animation-name: sfp-land;
  animation-duration: calc(var(--sfp-u) * 8);
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: both;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-svg--wide .sfp-load,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-svg--phone .sfp-load {
  animation-duration: calc(var(--sfp-u) * 9);
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: both;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-svg--wide .sfp-load {
  animation-name: sfp-flow-x;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-svg--phone .sfp-load {
  animation-name: sfp-flow-y;
}

.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-lane {
  animation-duration: calc(var(--sfp-u) * 8);
}

/* Delays in units of a third of --duration-fast (40ms) from the reveal;
 * the figure's own rise starts at 9 and ends at 21. Pass n lands at
 * 18 + 7(n - 1); its thread draws one unit later; its form slides in
 * three units after that. */
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--1,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--1 { animation-delay: calc(var(--sfp-u) * 18); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-seg--1 { animation-delay: calc(var(--sfp-u) * 19); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-load--1 { animation-delay: calc(var(--sfp-u) * 20); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--2,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--2 { animation-delay: calc(var(--sfp-u) * 25); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-seg--2 { animation-delay: calc(var(--sfp-u) * 26); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-load--2 { animation-delay: calc(var(--sfp-u) * 27); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--3,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--3 { animation-delay: calc(var(--sfp-u) * 32); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-seg--3 { animation-delay: calc(var(--sfp-u) * 33); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-load--3 { animation-delay: calc(var(--sfp-u) * 34); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--4,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--4 { animation-delay: calc(var(--sfp-u) * 39); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-seg--4 { animation-delay: calc(var(--sfp-u) * 40); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-load--4 { animation-delay: calc(var(--sfp-u) * 41); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--5,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--5 { animation-delay: calc(var(--sfp-u) * 46); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-seg--5 { animation-delay: calc(var(--sfp-u) * 47); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-load--5 { animation-delay: calc(var(--sfp-u) * 48); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-node--6,
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-pass--6 { animation-delay: calc(var(--sfp-u) * 53); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-out { animation-delay: calc(var(--sfp-u) * 54); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-lane { animation-delay: calc(var(--sfp-u) * 58); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-bar { animation-delay: calc(var(--sfp-u) * 64); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-end--1 { animation-delay: calc(var(--sfp-u) * 66); }
.sfp-hero [data-motion="hero-reveal"].is-motion-armed.is-revealed .sfp-end--2 { animation-delay: calc(var(--sfp-u) * 68); }

@media (prefers-reduced-motion: reduce) {
  .sfp-hero .sfp-thread,
  .sfp-hero .sfp-lane,
  .sfp-hero .sfp-pass,
  .sfp-hero .sfp-node,
  .sfp-hero .sfp-load,
  .sfp-hero .sfp-bar,
  .sfp-hero .sfp-end {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}