Template:DecryptText/styles.css: Difference between revisions

/* Template:DecryptText/styles.css
   Left-to-Right sweeping Matrix/Hacker decrypt effect */

.dtxt-scene {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    cursor: default;
}

/* The real text defines the box size, but starts hidden via clip-path */
.dtxt-real {
    display: inline-block;
    visibility: hidden;
    clip-path: inset(0 100% 0 0); /* 100% cut from the right side */
}

/* The mask overlays absolutely and crops the glitch text */
.dtxt-mask {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: inherit;
    clip-path: inset(0 0 0 0); /* Fully visible initially */
}

/* The string of gibberish that rapidly jerks left and right */
.dtxt-scroller {
    display: inline-block;
    white-space: nowrap;
    animation: dtxt-matrix 0.5s steps(1) infinite;
}

/* =========================================
   STATE 1: STAY DECRYPTED (Default)
   Uses a 9999s delay to permanently "stick"
   ========================================= */
.dtxt-stay .dtxt-real {
    transition: clip-path 0s 9999s, visibility 0s 9999s;
}
.dtxt-stay:hover .dtxt-real {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s linear, visibility 0s;
}

.dtxt-stay .dtxt-mask {
    transition: clip-path 0s 9999s, opacity 0s 9999s;
}
.dtxt-stay:hover .dtxt-mask {
    clip-path: inset(0 0 0 100%); /* Hides from left to right */
    opacity: 0;
    transition: clip-path 1.2s linear, opacity 0s 1.2s;
}

/* =========================================
   STATE 2: REVERT ON MOUSE LEAVE
   ========================================= */
.dtxt-revert .dtxt-real {
    transition: clip-path 0.5s linear, visibility 0s 0.5s;
}
.dtxt-revert:hover .dtxt-real {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.2s linear, visibility 0s;
}

.dtxt-revert .dtxt-mask {
    transition: clip-path 0.5s linear, opacity 0s;
}
.dtxt-revert:hover .dtxt-mask {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
    transition: clip-path 1.2s linear, opacity 0s 1.2s;
}

/* The rapid "character mutation" via translation */
@keyframes dtxt-matrix {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(-2ch); }
    20%  { transform: translateX(-5ch); }
    30%  { transform: translateX(-1ch); }
    40%  { transform: translateX(-6ch); }
    50%  { transform: translateX(-3ch); }
    60%  { transform: translateX(-8ch); }
    70%  { transform: translateX(-4ch); }
    80%  { transform: translateX(-7ch); }
    90%  { transform: translateX(-2ch); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dtxt-scroller { animation: none !important; }
    .dtxt-stay:hover .dtxt-real, .dtxt-stay:hover .dtxt-mask,
    .dtxt-revert:hover .dtxt-real, .dtxt-revert:hover .dtxt-mask {
        transition-duration: 0s !important;
    }
}