/* ==========================================================================
   CONSTRUCTION SEQUENCE (Screen 00)
   Drives the exact supplied symbol SVG's three paths from independent
   offset positions into their real, unaltered final coordinates.
   No path geometry is redrawn — only `transform` moves each group.
   ========================================================================== */

.construction-symbol {
  overflow: visible;
}

.construction-symbol .construction-point {
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.construction-symbol.is-point-visible .construction-point {
  opacity: 1;
}

.construction-symbol [data-piece] {
  transform-box: view-box;
  transition: transform var(--motion-standard) var(--ease-standard);
}

/* Independent starting offsets — large enough to read as clearly separate
   pieces, small enough to travel quickly. Values are in the symbol's own
   2250-unit viewBox space. */
.construction-symbol[data-stage="start"] [data-piece="top-left"] {
  transform: translate(-360px, -360px) scale(0.92);
  opacity: 0;
}
.construction-symbol[data-stage="start"] [data-piece="top-right"] {
  transform: translate(360px, -360px) scale(0.92);
  opacity: 0;
}
.construction-symbol[data-stage="start"] [data-piece="bottom-left"] {
  transform: translate(-360px, 360px) scale(0.92);
  opacity: 0;
}

.construction-symbol[data-stage="start"] [data-piece] {
  transition: none;
}

.construction-symbol[data-stage="travel"] [data-piece] {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: transform 700ms var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
}

/* Returning-visit + reduced-motion: no travel, pieces are simply present. */
.construction-symbol[data-stage="settled"] [data-piece] {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: none;
}

/* The whole symbol scales/translates down into its Screen 01 header
   position as the final beat of the opening sequence. */
.screen-opening__symbol-wrap {
  transition: transform var(--motion-standard) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
}
.screen-opening.is-settling .screen-opening__symbol-wrap {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .construction-symbol [data-piece],
  .screen-opening__symbol-wrap {
    transition: none !important;
  }
}