/* logo-tech: the logo as a technical drawing (client tokens only). Thin guides in the foreground
   colour, the selected layer in the accent, the rest stepped back; one meaning beneath. */
.lt{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; --a:var(--c-brand-2); }
.lt-svg{ width:min(96%, 1180px); height:auto; max-height:560px; overflow:visible; color:var(--stage-fg); }
.lt-mark [data-part]{ fill:currentColor; transition:fill .6s cubic-bezier(0.32, 0.72, 0, 1), opacity .6s; }
.lt[data-on="symbol"] .lt-mark [data-part="8"]{ fill:var(--a); }
.lt[data-on="all"] .lt-mark [data-part="8"]{ fill:var(--a); }
.lt line, .lt path, .lt rect, .lt ellipse, .lt circle{ vector-effect:non-scaling-stroke; fill:none; }
.lt-grid{ stroke:color-mix(in srgb, var(--stage-fg) 7%, transparent); stroke-width:1; }
.lt-guide{ stroke:color-mix(in srgb, var(--stage-fg) 55%, transparent); stroke-width:1; }
.lt-slant{ stroke:var(--a); stroke-width:1.5; }
.lt-slant--2{ stroke-width:1; opacity:.7; }
.lt-lead{ stroke:color-mix(in srgb, var(--a) 70%, transparent); stroke-width:1; }
.lt-dim, .lt-arc{ stroke:var(--a); stroke-width:1.25; }
.lt-ring{ stroke:var(--a); stroke-width:1.25; stroke-dasharray:3 3; }
.lt-pin{ fill:var(--a) !important; }
.lt-clear{ stroke:var(--a); stroke-width:1.25; stroke-dasharray:5 4; }
.lt-box{ stroke:color-mix(in srgb, var(--stage-fg) 45%, transparent); stroke-width:1; }
.lt-x{ fill:color-mix(in srgb, var(--a) 14%, transparent) !important; stroke:var(--a); stroke-width:1; }
.lt text{ font-family:var(--c-body); fill:color-mix(in srgb, var(--stage-fg) 72%, transparent); stroke:none; }
.lt-name{ font-size:11px; font-weight:500; }
.lt-val{ font-size:13px; font-weight:700; fill:var(--a) !important; }
.lt-note{ font-size:10px; }
.lt-xl{ font-size:13px; font-weight:700; fill:var(--a) !important; font-style:italic; }

/* layers: the selected one lit, the others stepped back; "all" shows the whole drawing */
.lt-l{ transition:opacity .6s cubic-bezier(0.32, 0.72, 0, 1); }
.lt:not([data-on="all"]) .lt-l[data-layer]{ opacity:.14; }
.lt[data-on="proportions"] .lt-l[data-layer="proportions"], .lt[data-on="angle"] .lt-l[data-layer="angle"],
.lt[data-on="symbol"] .lt-l[data-layer="symbol"], .lt[data-on="clear"] .lt-l[data-layer="clear"],
.lt[data-on="line"] .lt-l[data-layer="line"], .lt[data-on="lane"] .lt-l[data-layer="lane"], .lt[data-on="cross"] .lt-l[data-layer="cross"]{ opacity:1; }
.lt:not([data-on="all"]) .lt-l[data-layer] text{ opacity:0; transition:opacity .3s; }      /* an inactive layer's words step out entirely: nothing overprints */
.lt[data-on="proportions"] .lt-l[data-layer="proportions"] text, .lt[data-on="angle"] .lt-l[data-layer="angle"] text,
.lt[data-on="symbol"] .lt-l[data-layer="symbol"] text, .lt[data-on="clear"] .lt-l[data-layer="clear"] text,
.lt[data-on="line"] .lt-l[data-layer="line"] text, .lt[data-on="lane"] .lt-l[data-layer="lane"] text, .lt[data-on="cross"] .lt-l[data-layer="cross"] text{ opacity:1; }
.lt[data-on="all"] .lt-note{ opacity:0; }          /* the complete drawing keeps to lines and values */
/* minimum size: the drawing steps aside for the size ladder */
.lt-draw, .lt-ladder{ transition:opacity .6s cubic-bezier(0.32, 0.72, 0, 1); }
.lt-ladder{ opacity:0; }
.lt[data-on="min"] .lt-draw{ opacity:0; }
.lt[data-on="min"] .lt-ladder{ opacity:1; }
.lt-ladder [data-part]{ fill:currentColor; }
.lt-ladder [data-part="8"]{ fill:var(--a); }

/* the meaning: one statement at a time */
.lt-copy{ position:relative; width:min(74%, 900px); height:118px; }
.lt-say{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  opacity:0; translate:0 10px; transition:opacity .5s cubic-bezier(0.32, 0.72, 0, 1), translate .7s cubic-bezier(0.32, 0.72, 0, 1); pointer-events:none; }
.lt-say.is-on{ opacity:1; translate:0 0; transition-delay:.12s; }
.lt-h{ margin:0; font:700 34px/1.1 var(--c-display); letter-spacing:-.02em; color:var(--stage-fg); text-wrap:balance; }
.lt-p{ margin:0; max-width:680px; font:500 16px/1.5 var(--c-body); color:color-mix(in srgb, var(--stage-fg) 66%, transparent); text-wrap:pretty; }
@media (prefers-reduced-motion: reduce){ .lt-l, .lt-say, .lt-mark [data-part]{ transition:none; } }

/* the symbol's construction: taller drawing, the main shape traced as one line, the second lane lit */
.lt--symbol .lt-svg{ width:auto; height:500px; max-width:96%; }
.lt-trace{ stroke:var(--a); stroke-width:2.5; stroke-dasharray:1 1; stroke-dashoffset:1; }
.lt[data-on="line"] .lt-trace{ animation:lt-trace 5s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes lt-trace{ 0%{ stroke-dashoffset:1; } 70%, 100%{ stroke-dashoffset:0; } }
.lt:not([data-on="line"]) .lt-trace{ stroke-dashoffset:0; }
.lt-lane{ fill:var(--a) !important; transition:opacity .6s; }
.lt:not([data-on="lane"]):not([data-on="all"]) .lt-lane{ opacity:0; }
.lt--symbol[data-on="all"] .lt-mark [data-part]{ fill:currentColor; }
@media (prefers-reduced-motion: reduce){ .lt[data-on="line"] .lt-trace{ animation:none; stroke-dashoffset:0; } }