.about-mosaic__tile { opacity: 0; transform: translateY(1.5rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease; }
.about-mosaic.is-visible .about-mosaic__tile { opacity: 1; transform: none; }

.about-mosaic__caption { font-size: .875rem; line-height: 1.25rem; }
.about-mosaic__link i { transition: transform 250ms ease; }
.about-mosaic__link:hover i { transform: translateX(.25rem); }

.about-mosaic__area { aspect-ratio: 5 / 2; cursor: crosshair; touch-action: pan-y; }
.about-mosaic__area svg, .about-mosaic__mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-mosaic__area text { font-size: 12px; font-weight: 700; }
.about-mosaic__mini { height: 4.5rem; }

.about-mosaic__draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.about-mosaic__fade { opacity: 0; transition: opacity 900ms ease 900ms; }
.about-mosaic__col { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 900ms cubic-bezier(.2, .8, .2, 1); }
.about-mosaic__seg { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms cubic-bezier(.2, .8, .2, 1); }
.about-mosaic__arc { transition: stroke-dashoffset 1500ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.about-mosaic__needle { transition: transform 1500ms cubic-bezier(.3, 1.3, .4, 1) 300ms; }
.about-mosaic__pulse { transform-box: fill-box; transform-origin: center; animation: about-mosaic-pulse 2.2s ease-out infinite; }
.about-mosaic__cursor { opacity: 0; transition: opacity 200ms ease; }
.about-mosaic__area.is-hover .about-mosaic__cursor { opacity: 1; }

.is-drawn .about-mosaic__draw { stroke-dashoffset: 0; }
.is-drawn .about-mosaic__fade { opacity: 1; }
.is-drawn .about-mosaic__col, .is-drawn .about-mosaic__seg { transform: none; }

@keyframes about-mosaic-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .about-mosaic__tile, .about-mosaic__draw, .about-mosaic__fade, .about-mosaic__col, .about-mosaic__seg, .about-mosaic__arc, .about-mosaic__needle { transition: none; }
    .about-mosaic__tile { opacity: 1; transform: none; }
    .about-mosaic__pulse { animation: none; opacity: 0; }
}

.about-mosaic__tip, .about-mosaic__dot { opacity: 0; pointer-events: none; transition: opacity 200ms ease; white-space: nowrap; }
.about-mosaic__dot { width: 1rem; height: 1rem; }
.about-mosaic__area.is-hover .about-mosaic__tip, .about-mosaic__area.is-hover .about-mosaic__dot { opacity: 1; }

.ethic-scatter__dots {
    background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

.ethic-scatter__item {
    transition: transform 300ms ease;
}

.ethic-scatter__item:nth-child(1) { transform: translateY(0.5rem) rotate(-1deg); }
.ethic-scatter__item:nth-child(2) { transform: translateY(-0.75rem) rotate(1.5deg); }
.ethic-scatter__item:nth-child(3) { transform: translateY(1rem) rotate(-0.5deg); }
.ethic-scatter__item:nth-child(4) { transform: translateY(-0.5rem) rotate(1deg); }

.ethic-scatter__item:hover {
    transform: scale(1.05);
}

/* values datatable v18 - grid layout only, no colors */
.values-datatable__row {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .values-datatable__row {
        grid-template-columns: 3rem 10rem 1fr 5rem;
        column-gap: 1.5rem;
        row-gap: 0;
    }
}

.values-datatable__num {
    grid-column: 1;
}

.values-datatable__title {
    grid-column: 2;
    margin: 0;
}

.values-datatable__desc {
    grid-column: 1 / -1;
    margin: 0;
    min-width: 0;
}

.values-datatable__rank {
    grid-column: 1 / -1;
    justify-self: start;
}

@media (min-width: 640px) {
    .values-datatable__desc {
        grid-column: 3;
    }

    .values-datatable__rank {
        grid-column: 4;
        justify-self: end;
    }
}

.orbit-avatar-ring__portrait {
    width: 8rem;
    height: 8rem;
}

.orbit-avatar-ring__beacon {
    width: 1.5rem;
    height: 1.5rem;
}