User:LordSkorne7/sandbox/styles.css

/* RANDOM FADE IN AND OUT */
.random-fade {
  animation: randomFade 6s infinite alternate;
}

@keyframes randomFade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 0.5; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* SLOW SHIFT LEFT AND RIGHT */
.slow-shift {
  display: inline-block;
  animation: slowShift 12s infinite alternate ease-in-out;
}

@keyframes slowShift {
  0% { transform: translateX(0px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}

/* SLOW DRAG DOWN */
.slow-drag-down {
  display: inline-block;
  animation: slowDragDown 10s infinite alternate ease-in-out;
}

@keyframes slowDragDown {
  0% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(20px); }
}

/* CONTINUOUS DRAG DOWN */
.continuous-drag-down {
  display: inline-block;
  animation: continuousDragDown 20s linear infinite;
}

@keyframes continuousDragDown {
  0% { transform: translateY(0px); }
  100% { transform: translateY(300px); }
}

/* BACKSPACE DELETE (TEXT DELETES ITSELF) */
.backspace-delete {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: backspaceDelete 4s steps(20) infinite alternate;
  border-right: 2px solid #EBAE21;
}

@keyframes backspaceDelete {
  from { width: 100%; }
  to { width: 0%; }
}

/* SLOW GROWING TEXT */
.slow-grow {
  display: inline-block;
  animation: slowGrow 8s infinite alternate ease-in-out;
}

@keyframes slowGrow {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* SHATTER TEXT EFFECT */
.shatter-text {
  display: inline-block;
  animation: shatterText 3s infinite ease-in-out;
  letter-spacing: 0.1em;
}

@keyframes shatterText {
  0% {
    transform: none;
    opacity: 1;
  }
  25% {
    transform: translate(-5px, -10px) rotate(-10deg);
    opacity: 0.8;
  }
  50% {
    transform: translate(10px, 5px) rotate(10deg);
    opacity: 0.6;
  }
  75% {
    transform: translate(-7px, 7px) rotate(-15deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(5px, -5px) rotate(15deg);
    opacity: 0.2;
  }
}

/* FALLING TEXT - LEFT SIDE */
.falling-text {
  display: inline-block;
  position: absolute;
  left: 5%;
  animation: falling 6s infinite ease-in-out;
}

@keyframes falling {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(30px); opacity: 0.7; }
  100% { transform: translateY(60px); opacity: 0.4; }
}

/* RISING TEXT - RIGHT SIDE */
.rising-text {
  display: inline-block;
  position: absolute;
  right: 5%;
  animation: rising 6s infinite ease-in-out;
}

@keyframes rising {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-30px); opacity: 0.7; }
  100% { transform: translateY(-60px); opacity: 0.4; }
}

.typewriter-line {
  font-family: 'Cinzel', serif;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #ffffff;
  width: 0;
  display: block;
}

/* Shared keyframes for typing animation */
@keyframes lineTyping {
  from { width: 0; }
  to { width: 100%; }
}

.blinking-cursor {
  animation: blink-cursor 0.75s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: #ffffff; }
}
.analog-static {
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
  position: relative;
  filter: brightness(1.1) contrast(1.2);
}

.analog-static::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: scanlines 2s linear infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

/* SLOW VANISH OVER 5 SECONDS */
.slow-vanish {
  animation: slowVanish 5s forwards ease-in-out;
}

@keyframes slowVanish {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}