/* Explain: App-specific layout utilities for diagonal cuts and topographic patterns. - */
/* Speed cuts + topographic background patterns */

.diag-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4.5vw));
}

.diag-top {
    clip-path: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%);
}

.diag-both {
    clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
}

.topo {
    position: relative;
    isolation: isolate;
}

.topo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(circle at 12% 22%, transparent 0 26px, currentColor 26px 27px),
        repeating-radial-gradient(circle at 82% 78%, transparent 0 34px, currentColor 34px 35px);
    opacity: 0.07;
}

.topo-dark::before {
    color: #ffffff;
    opacity: 0.09;
}

.topo-light::before {
    color: #1A1A1A;
    opacity: 0.08;
}

.speed-stripes {
    background-image: repeating-linear-gradient(
        115deg,
        var(--neon-color) 0 10px,
        transparent 10px 26px
    );
}