/* The PURE TECH mark in pieces (mode_puretech_mark()). Each piece swings about
   the sphere and bobs in place, on two clocks of its own; the negative delays
   start them all mid-movement. The box keeps the artwork's 1000:840 shape. */
.pt-mark {
    position: relative;
    aspect-ratio: 1000 / 840;
}

.pt-mark img {
    position: absolute;
    max-width: none;
    height: auto;
    animation:
        pt-swing var(--pt-t) ease-in-out calc(var(--pt-t) * -0.37) infinite alternate,
        pt-bob var(--pt-b) ease-in-out calc(var(--pt-b) * -0.61) infinite alternate;
}

@keyframes pt-swing {
    from {
        transform: rotate(calc(var(--pt-swing) * -1));
    }

    to {
        transform: rotate(var(--pt-swing));
    }
}

@keyframes pt-bob {
    to {
        translate: var(--pt-bob);
    }
}

/* PURE TITANIUM, PURE WATER, PURE SURFACE as the brochures set them
   (mode_puretech_names()). The fill is reset so the names keep their colours
   inside gradient-clipped lines. */
.pt-name {
    letter-spacing: 0;
    white-space: nowrap;
}

.pt-name b,
.pt-name i {
    /* The theme gives b its own face; the name keeps the one set on it. */
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    -webkit-text-fill-color: currentcolor;
}

.pt-name b {
    color: #11527e;
}

.pt-name b + b {
    color: #1fc0d7;
}

/* Where the name stands as a heading, label or a line of names it takes the
   brochures' heading face, Gotham (MODE's Adobe Fonts kit, mode_puretech_fonts_url()):
   Bold for PURE, Book for the second word. In running text it keeps the page's face. */
.pt-eyebrow .pt-name,
.pt-system-nodes .pt-name,
.pth .pth-items .pt-name,
.pt-hero-blue .pt-name,
.pt-faq .pt-name {
    font-family: "gotham", "Google Sans Flex", sans-serif;
    /* Measured on the brochure's outlined heads against Gotham's own widths:
       -0.016 to -0.02em across PURE, TITANIUM and WATER (Illustrator tracking -20). */
    letter-spacing: -0.02em;
}

/* As a heading or label the name stacks, as on the brochure's columns: PURE in
   bold over the second word in regular weight. In a line of names the second
   word is regular too, including FAQ names; other running text stays bold. */
.pt-eyebrow .pt-name,
.pt-system-nodes .pt-name,
.pth .pth-items .pt-name {
    display: inline-flex;
    flex-direction: column;
    /* Baseline to baseline 0.92em, as the brochure's two lines. */
    line-height: 0.92;
}

.pt-eyebrow .pt-name b + b,
.pt-system-nodes .pt-name b + b,
.pth-items .pt-name b + b,
.pt-hero-blue .pt-name b + b,
.pt-faq .pt-name b + b {
    font-weight: 400;
}

/* On dark ground PURE turns white; the cyan reads as it is. */
.pt-film .pt-name b:first-child,
.pt-segment [aria-selected="true"] .pt-name b {
    color: #fff;
}

.pt-segment [aria-selected="true"] .pt-name b + b {
    color: #bdf0f7;
}

@media (prefers-reduced-motion: reduce) {
    .pt-mark img {
        animation: none;
    }
}