/*
 * The Sulsys mark.
 *
 * Colour is a CSS decision, not a markup one: every piece paints from
 * --sulsys-ink and --sulsys-green, so the same component serves the paper
 * header and the navy masthead. `tone="light"` flips only the ink half to
 * white — the green is left exactly as it is, because the green is the half of
 * the identity that has stayed constant on every surface the company has ever
 * put it on.
 *
 * Size is driven by one custom property, --mark-h, which is the height of the
 * symbol. The wordmark and the gap are fractions of it, so a lockup scales as
 * one object and its internal proportions never drift. That ratio — wordmark
 * cap height a little under half the symbol — is read off the reference, where
 * the blades sit roughly twice the height of the name they land on.
 */

.mark {
  display: block;
  flex: 0 0 auto;
}

.ink {
  fill: var(--sulsys-ink);
}

.accent {
  fill: var(--sulsys-green);
}

.quiet {
  fill: var(--sulsys-quiet);
}

/*
 * V4.1: there is no light application. The mark is #012A81 and #059E3D on
 * every surface, as drawn — where a surface is navy, the surface behind the
 * mark gives way to paper rather than the mark giving way to the surface.
 * `tone="light"` is kept as an accepted value so that nothing breaks, and
 * paints exactly the same colours.
 */
.light {
  --sulsys-ink: var(--mark-blue);
  --sulsys-quiet: var(--sulsys-quiet);
}

/* ---- The pieces --------------------------------------------------------- */

.symbol {
  height: var(--mark-h, 28px);
  /* 882.5 : 350.5 in the shared coordinate space */
  width: calc(var(--mark-h, 28px) * 2.518);
}

.word {
  height: calc(var(--mark-h, 28px) * 0.44);
  /* 1000 : 123.8 */
  width: calc(var(--mark-h, 28px) * 0.44 * 8.078);
}

.tagline {
  height: calc(var(--mark-h, 28px) * 0.2);
  /* 944.4 : 44.5 */
  width: calc(var(--mark-h, 28px) * 0.2 * 21.22);
}

/* ---- Primary logo: symbol beside wordmark ------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark-h, 28px) * 0.2);
  /*
   * The blades sweep down to a point on their right, into the name. Nudging
   * the wordmark up by a hair puts its cap line on that convergence rather
   * than below it, which is the relationship the stacked original has.
   */
}

.logo .word {
  margin-top: calc(var(--mark-h, 28px) * -0.04);
}

/* ---- Stacked lockups: the reference's own arrangement ------------------- */

.lockup {
  /* 1000 : 528.5 — symbol over wordmark over tagline, as drawn. */
  width: var(--lockup-w, 180px);
  height: calc(var(--lockup-w, 180px) / 1.892);
}

.stack {
  /* 1000 : 475 — the same stack without the tagline. */
  width: var(--lockup-w, 180px);
  height: calc(var(--lockup-w, 180px) / 2.105);
}

/* ---- Masthead entrance -------------------------------------------------- */

/*
 * TENSION → IMPACT → RELEASE, and the subject is the mark itself, because the
 * mark already draws what the company does: separate sweeps converging on one
 * point. The blades arrive along their own axis — up and to the left, which is
 * the direction they are drawn travelling — and the name they land on resolves
 * a beat later.
 *
 * Nothing here is on the critical path. The animation is opt-in per surface
 * (`data-animate` on an ancestor), it never touches a text node, and it runs
 * on transform and opacity only, so it cannot reflow the headline beside it.
 * Total elapsed time is 420 ms: the mark has finished before a reader has
 * found the first line.
 */
@media (prefers-reduced-motion: no-preference) {
  /*
   * Pinned explicitly: a percentage translate on an SVG path has to resolve
   * against the viewBox, not against a user-agent default that differs between
   * engines, or the two blades drift apart by a different amount per browser.
   */
  [data-animate="mark"] .blade,
  [data-animate="mark"] .name {
    transform-box: view-box;
    transform-origin: center;
    will-change: transform, opacity;
  }

  [data-animate="mark"] .blade {
    animation: blade-in 360ms var(--ease-out) both;
  }

  [data-animate="mark"] .accent.blade {
    animation-delay: 70ms;
  }

  [data-animate="mark"] .name {
    animation: name-in 260ms var(--ease) 160ms both;
  }

  @keyframes blade-in {
    from {
      opacity: 0;
      transform: translate(-2.5%, -3.5%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

  @keyframes name-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}