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;
}

.dtxt-real {
    display: inline-block;
    visibility: hidden;
    clip-path: inset(0 100% 0 0); 
}

.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); 
}

.dtxt-scroller {
    display: inline-block;
    white-space: nowrap;
    animation: dtxt-matrix 0.5s steps(1) infinite;
}

/* =========================================
   STATE 1: STAY DECRYPTED (Default)
   ========================================= */
.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 0.7s 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%);
    opacity: 0;
    transition: clip-path 0.7s linear, opacity 0s 0.7s;
}

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

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

/* =========================================
   STATE 3: ON LOAD (Auto-Decrypt)
   ========================================= */
.dtxt-load .dtxt-real {
    animation: dtxt-reveal 1.2s linear 0.5s forwards;
}
.dtxt-load .dtxt-mask {
    animation: dtxt-hide 1.2s linear 0.5s forwards;
}

@keyframes dtxt-reveal {
    0%   { visibility: visible; clip-path: inset(0 100% 0 0); }
    100% { visibility: visible; clip-path: inset(0 0 0 0); }
}
@keyframes dtxt-hide {
    0%   { clip-path: inset(0 0 0 0); opacity: 1; }
    99%  { clip-path: inset(0 0 0 100%); opacity: 1; }
    100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}

/* Character mutation 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,
    .dtxt-load .dtxt-real, .dtxt-load .dtxt-mask {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}