Template:TemplateAsset/Detector/styles.css

/*
==================================================
TemplateAsset/Detector CSS
Base size: 200x100 (Scalable via wikitext)
==================================================
*/

.ta-detector-wrapper {
    display: block; /* Changed from table so it strictly obeys inline height */
    position: relative;
    margin: 0 auto;
    overflow: hidden; /* Chops off the unscaled bounding box */
}

.ta-detector-scaler {
    transform-origin: top left;
}

.ta-detector-gauge {
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
    font-family: "Arial Black", "Arial Bold", Impact, sans-serif;
}

/* Static Hardcoded Shapes */
.ta-detector-arc-outer {
    position: absolute;
    bottom: 0; left: 0;
    width: 200px; height: 100px;
    border-radius: 100px 100px 0 0;
    background: #004b87;
}

.ta-detector-arc-inner {
    position: absolute;
    bottom: 0; left: 20px;
    width: 160px; height: 80px;
    border-radius: 80px 80px 0 0;
    overflow: hidden;
}

.ta-detector-arc-left {
    position: absolute;
    bottom: 0; left: 0;
    width: 80px; height: 80px;
    background: #59c918;
}

.ta-detector-arc-right {
    position: absolute;
    bottom: 0; right: 0;
    width: 80px; height: 80px;
    background: #e81e1e;
}

.ta-detector-cutout {
    position: absolute;
    bottom: 0; left: 65px;
    width: 70px; height: 35px;
    border-radius: 35px 35px 0 0;
    background: #ffffff;
}

/* Radial Text Anchors */
.ta-detector-text-anchor {
    position: absolute;
    bottom: 0; left: 100px;
    width: 0; height: 0;
}

.ta-detector-anchor-left { transform: rotate(-45deg); }
.ta-detector-anchor-right { transform: rotate(45deg); }

.ta-detector-text {
    position: absolute;
    bottom: 50px; left: -60px;
    width: 120px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pivot & Needle Mechanics */
.ta-detector-pivot-wrapper {
    position: absolute;
    bottom: 0; left: 100px;
    width: 0; height: 0;
    z-index: 10;
}

.ta-detector-pivot {
    position: absolute;
    left: -14px; bottom: -14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #000000;
}

.ta-detector-swing,
.ta-detector-jitter {
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 0;
}

.ta-detector-needle {
    position: absolute;
    left: -3px; bottom: 0;
    width: 6px; height: 75px;
    background: #000000;
    border-radius: 3px;
}

/* Slower Animations */
@keyframes ta-swing-left {
    0%   { transform: rotate(0deg); }
    60%  { transform: rotate(-75deg); }
    75%  { transform: rotate(-55deg); }
    85%  { transform: rotate(-62deg); }
    100% { transform: rotate(-60deg); }
}

@keyframes ta-swing-right {
    0%   { transform: rotate(0deg); }
    60%  { transform: rotate(75deg); }
    75%  { transform: rotate(55deg); }
    85%  { transform: rotate(62deg); }
    100% { transform: rotate(60deg); }
}

@keyframes ta-swing-center {
    0%   { transform: rotate(-30deg); }
    60%  { transform: rotate(10deg); }
    80%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes ta-jitter {
    0%   { transform: rotate(-1.5deg); }
    100% { transform: rotate(1.5deg); }
}

/* Pan Duration extended to 2.5s */
.ta-detector-swing-left { animation: ta-swing-left 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ta-detector-swing-right { animation: ta-swing-right 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ta-detector-swing-center { animation: ta-swing-center 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* Fast ping-pong jitter */
.ta-detector-jitter { animation: ta-jitter 0.08s infinite alternate ease-in-out; }