/* TJI Tape Measure Motion Graphic Matrix */

.trust-anim-container {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
}

.tape-side {
    display: flex;
    align-items: center;
    height: 100%;
}

.tape-left {
    animation: tape-slide-left 60s infinite ease-in-out;
}

.tape-right {
    animation: tape-slide-right 60s infinite ease-in-out;
}

.tape-rule-line {
    height: 8px;
    background: #f1c40f; /* Construction Yellow */
    border-top: 1px solid #111;
    border-bottom: 2px solid #111;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(0,0,0,0.8) 5px, rgba(0,0,0,0.8) 6px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tape-left .tape-rule-line { flex-grow: 1; margin-left: -5px; margin-right: 15px; }
.tape-right .tape-rule-line { flex-grow: 1; margin-right: -5px; margin-left: 15px; }

.tape-icon {
    font-size: 1.6rem;
    color: #4cd137; /* Glowing Green */
    filter: drop-shadow(0 0 10px #4cd137) drop-shadow(0 0 20px #4cd137);
    z-index: 2;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 2px;
    flex-shrink: 0;
}

.trust-text {
    flex-shrink: 0;
    white-space: nowrap;
    animation: text-pulse-glow 60s infinite ease-in-out;
}

@keyframes tape-slide-left {
    0%, 2% { max-width: 0; opacity: 0; flex-grow: 0; }
    3% { max-width: 0; opacity: 1; flex-grow: 1; }
    10%, 15% { max-width: 600px; opacity: 1; flex-grow: 1000; } /* Tape extracts out, pushing right */
    18% { max-width: 0; opacity: 1; flex-grow: 1; } /* Tape retracts back */
    20%, 65% { max-width: 0; opacity: 0; flex-grow: 0; } /* Disappears during right cycle */

    66% { max-width: 0; opacity: 0; flex-grow: 0; }
    68% { max-width: 0; opacity: 1; flex-grow: 1; }
    75%, 95% { max-width: 300px; opacity: 1; flex-grow: 1; } /* Symmetrical double extract */
    98% { max-width: 0; opacity: 1; flex-grow: 1; }
    100% { max-width: 0; opacity: 0; flex-grow: 0; }
}

@keyframes tape-slide-right {
    0%, 35% { max-width: 0; opacity: 0; flex-grow: 0; overflow: hidden; }
    
    36% { max-width: 0; opacity: 1; flex-grow: 1; overflow: visible; }
    43%, 48% { max-width: 600px; opacity: 1; flex-grow: 1000; overflow: visible; } /* Tape extracts pushing left */
    51% { max-width: 0; opacity: 1; flex-grow: 1; overflow: visible; }
    53%, 65% { max-width: 0; opacity: 0; flex-grow: 0; overflow: hidden; }

    66% { max-width: 0; opacity: 0; flex-grow: 0; overflow: hidden; }
    68% { max-width: 0; opacity: 1; flex-grow: 1; overflow: visible; }
    75%, 95% { max-width: 300px; opacity: 1; flex-grow: 1; overflow: visible; }
    98% { max-width: 0; opacity: 1; flex-grow: 1; overflow: visible; }
    100% { max-width: 0; opacity: 0; flex-grow: 0; overflow: hidden; }
}

@keyframes text-pulse-glow {
    0%, 68% {
        color: inherit;
        text-shadow: none;
        transform: scale(1);
    }
    75%, 91% {
        color: #4cd137;
        text-shadow: 0 0 15px rgba(76, 209, 55, 0.8), 0 0 30px rgba(76, 209, 55, 0.5);
        transform: scale(1.05);
    }
    96%, 100% {
        color: inherit;
        text-shadow: none;
        transform: scale(1);
    }
}