.syu-clock {
font-size: clamp(64px, 10vw, 160px);
font-weight: 300;
line-height: 1;
}
.syu-text {
overflow: hidden;
min-height: 2em; height: auto; margin-top: .5em;
transition: min-height .25s ease;
}
.syu-text-inner {
line-height: 1.2;
white-space: normal;
transition: transform .25s ease, opacity .25s ease;
}
.syu-text-inner.out {
transform: translateY(-100%);
opacity: 0;
} .syu-el-wrap .syu-wrapper { width: 100%; } .syu-colon{
opacity: 1;
animation: syuBlinkFade var(--syu-blink-speed, 1000ms) ease-in-out infinite;
}
@keyframes syuBlinkFade{
0%   { opacity: 0; }
25%  { opacity: 1; }
50%  { opacity: 1; }
75%  { opacity: 0; }
100% { opacity: 0; }
} .syu-el-wrap.syu-blink-hard .syu-colon{
animation-name: syuBlinkHard;
animation-timing-function: steps(1, end);
}
@keyframes syuBlinkHard{
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
} .syu-el-wrap.syu-blink-off .syu-colon{
animation: none;
opacity: 1;
}