/*
 * Metal text effect (v2 / chromatic-dark) - shared, standalone.
 *
 * Pair with frontend/js/metal-text.js. Mark any element with .mtx-metal and
 * the script wraps it in the layers below; nothing here is global - every
 * selector is scoped to the classes the script creates.
 */

.mtx-root {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    background: transparent;
    vertical-align: baseline;
}

.mtx-content {
    position: relative;
    z-index: 5;
    white-space: nowrap;
}

.mtx-shader,
.mtx-rim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mtx-shader {
    z-index: 6;
}

.mtx-rim {
    z-index: 8;
}