/* The header's logo on the Zedstar page turns over like a card: the Zynolabs logo on its face, the Zedstar lockup ("by
   Zynolabs" under the wordmark) on its back (assets/zedstar/logo-flip.js builds the faces inside the header's link and
   turns them). The lockup is drawn as large as the header allows, so its "by Zynolabs" can be read: on a wide screen it
   rises above the Zynolabs logo's box into the bar's top margin, its foot on the logo's foot; on a phone it takes the
   width up to the search field, less a clear gap, centred on the logo. The link's own box does not change, so nothing
   in the header moves; its target is widened to cover the lockup. Over a light header the navy lockup takes the white
   one's place, as the Zynolabs logo's dark version does (systems-page.css, whose rules for the link's pictures apply
   to the back's two pictures as well).
   Each face holds only its pictures. The shade a face takes as it turns, the light the lockup catches and the light
   that runs across it are layers of their own laid over it and turned with it: a picture turning in 3D with layers
   inside it is drawn through an in-between picture at a lower resolution, and went soft for the whole turn. */
.bar__mark { --zs-h: 48px; --zs-y: calc(100% - var(--zs-h) + .5px); --zs-w: calc(var(--zs-h) * 4.41063); }
@media (max-width: 1023px) { .bar__mark { --zs-h: 40px; } }
@media (max-width: 760px) { .bar__mark { --zs-h: min(40px, (33vw - 40px) * .226725); } }
@media (max-width: 540px) { .bar__mark { --zs-h: calc((33vw - 32px) * .226725); --zs-y: calc(50% - var(--zs-h) / 2); } }

.bar__mark.zs-flip { isolation: isolate; }
.bar__mark.zs-flip::before { content: ""; position: absolute; left: 0; top: min(0px, var(--zs-y)); width: max(100%, var(--zs-w));
  height: calc(max(100%, var(--zs-y) + var(--zs-h)) - min(0px, var(--zs-y))); }
.zs-face, .zs-veil { display: block; pointer-events: none; transform-origin: 50% 50%; }
.zs-front { position: relative; }
.zs-front-shade { position: absolute; inset: 0; }
.zs-back, .zs-back-shade, .zs-back-gleam, .zs-lit { position: absolute; left: 0; top: var(--zs-y); width: var(--zs-w); height: var(--zs-h);
  transform-origin: var(--zs-o, 50% 50%); }
.zs-art { position: relative; display: block; width: 100%; aspect-ratio: 1826 / 414; }
.zs-flip[data-face="zyno"] :is(.zs-back, .zs-lit), .zs-flip[data-face="zed"] .zs-front { opacity: 0; }

/* the shade a face takes as it turns away from the light, and the light the lockup catches as it comes round: each cut
   to its face's letters by that face's picture */
.zs-front-shade, .zs-back-shade, .zs-back-gleam { opacity: 0; }
.zs-tint { position: absolute; inset: 0; background: #04060a;
  -webkit-mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; }
.zs-front-shade .zs-tint { -webkit-mask-image: url(/brand/zynolabs-logo-v2-white.png); mask-image: url(/brand/zynolabs-logo-v2-white.png); }
.zs-back-gleam .zs-tint { background: #fff; }

/* the light that runs across the chrome as the lockup settles: a band leaning with the letters (their stems lean 11
   degrees), bright in the middle with darker shoulders the way a reflection in chrome is, moved through a window cut to
   the letters, "by Zynolabs" with them */
.zs-sheen { position: absolute; inset: 0; opacity: 0;
  -webkit-mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; }
.zs-sheen i { position: absolute; top: -14%; bottom: -14%; left: 0; width: 36%; transform: translateX(-100%);
  background: linear-gradient(101deg, rgba(16, 22, 32, 0) 4%, rgba(16, 22, 32, .26) 33%, rgba(255, 255, 255, .7) 45%, #fff 50%, rgba(255, 255, 255, .7) 55%, rgba(16, 22, 32, .26) 67%, rgba(16, 22, 32, 0) 96%); }
/* the red slash catching it: the slash alone (its four corners, measured in the lockup) burning a hotter red as the
   light crosses it, and a red glow round it that dies away after */
.zs-slash { position: absolute; inset: 0; opacity: 0; clip-path: polygon(18.45% 5.32%, 24.2% 5.32%, 19.65% 26.06%, 13.95% 26.06%);
  background: linear-gradient(101deg, #ff2a1c 13%, #ff5a3c 18.5%, #ff2a1c 24%);
  -webkit-mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; mask: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; }
.zs-bloom { position: absolute; left: 19.1%; top: 15.65%; width: 27%; aspect-ratio: 2.4; translate: -50% -50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 64, 44, .72), rgba(255, 52, 36, .22) 50%, rgba(255, 52, 36, 0)); }

/* without motion the page opens on Zedstar: shown here from the first paint, before the script has built the faces */
@media (prefers-reduced-motion: reduce) {
  .bar__mark.bar__mark:not(.zs-flip) img { opacity: 0; }
  .bar__mark:not(.zs-flip)::after { content: ""; position: absolute; left: 0; top: var(--zs-y); width: var(--zs-w); height: var(--zs-h);
    background: url(zedstar-lockup-white.webp) 0 0 / 100% 100% no-repeat; }
  .is-light .bar__mark:not(.zs-flip)::after { background-image: url(zedstar-lockup-navy.webp); }
}