.cyber-quotes-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #262626;
    border-radius: 15px;
    padding: 40px 20px;
    box-shadow: 0 0 30px rgba(255, 83, 49, 0.3);
    overflow: hidden;
}

.cyber-quotes-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #FF5331, #262626, #FF5331, #262626);
    background-size: 400% 400%;
    animation: borderGlow 3s ease-in-out infinite;
    border-radius: 15px;
    z-index: -1;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.quote-slide {
    display: none;
    text-align: center;
    color: #FFFFFF;
    animation-duration: 3s; // Increased from 2s
    animation-fill-mode: both;
}

.quote-slide.active {
    display: block;
}

.quote-content {
    position: relative;
    z-index: 2;
}

.quote-text {
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0 0 30px 0;
    padding: 0;
    font-style: italic;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 83, 49, 0.5);
}

.quote-text::before,
.quote-text::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 2px;
    background: #FF5331;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #FF5331;
}

.quote-text::after {
    top: auto;
    bottom: -15px;
}

.quote-author-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.quote-image,
.quote-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #FF5331;
    box-shadow: 0 0 15px rgba(255, 83, 49, 0.4);
}

.quote-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    font-size: 30px;
    color: #FF5331;
}

.quote-author {
    font-size: 1.1rem;
    color: #FF5331;
    font-weight: bold;
    font-style: normal;
    text-shadow: 0 0 5px rgba(255, 83, 49, 0.3);
}

/* Glitch Effects */
.glitch-1 { animation: glitch1 2s ease-in-out; }
.glitch-2 { animation: glitch2 2s ease-in-out; }
.glitch-3 { animation: glitch3 2s ease-in-out; }
.glitch-4 { animation: glitch4 2s ease-in-out; }
.glitch-5 { animation: glitch5 2s ease-in-out; }
.glitch-6 { animation: glitch6 2s ease-in-out; }
.glitch-7 { animation: glitch7 2s ease-in-out; }
.glitch-8 { animation: glitch8 2s ease-in-out; }
.glitch-9 { animation: glitch9 2s ease-in-out; }
.glitch-10 { animation: glitch10 2s ease-in-out; }
.glitch-11 { animation: glitch11 2s ease-in-out; }
.glitch-12 { animation: glitch12 2s ease-in-out; }
.glitch-13 { animation: glitch13 2s ease-in-out; }
.glitch-14 { animation: glitch14 2s ease-in-out; }
.glitch-15 { animation: glitch15 2s ease-in-out; }
.glitch-16 { animation: glitch16 2s ease-in-out; }
.glitch-17 { animation: glitch17 2s ease-in-out; }
.glitch-18 { animation: glitch18 2s ease-in-out; }
.glitch-19 { animation: glitch19 2s ease-in-out; }
.glitch-20 { animation: glitch20 2s ease-in-out; }
.glitch-21 { animation: glitch21 2s ease-in-out; }
.glitch-22 { animation: glitch22 2s ease-in-out; }
.glitch-23 { animation: glitch23 2s ease-in-out; }
.glitch-24 { animation: glitch24 2s ease-in-out; }
.glitch-25 { animation: glitch25 2s ease-in-out; }
.glitch-26 { animation: glitch26 2s ease-in-out; }
.glitch-27 { animation: glitch27 2s ease-in-out; }
.glitch-28 { animation: glitch28 2s ease-in-out; }
.glitch-29 { animation: glitch29 2s ease-in-out; }
.glitch-30 { animation: glitch30 2s ease-in-out; }
.glitch-31 { animation: glitch31 2s ease-in-out; }
.glitch-32 { animation: glitch32 2s ease-in-out; }
.glitch-33 { animation: glitch33 2s ease-in-out; }
.glitch-34 { animation: glitch34 2s ease-in-out; }
.glitch-35 { animation: glitch35 2s ease-in-out; }
.glitch-36 { animation: glitch36 2s ease-in-out; }
.glitch-37 { animation: glitch37 2s ease-in-out; }
.glitch-38 { animation: glitch38 2s ease-in-out; }
.glitch-39 { animation: glitch39 2s ease-in-out; }
.glitch-40 { animation: glitch40 2s ease-in-out; }
.glitch-41 { animation: glitch41 2s ease-in-out; }
.glitch-42 { animation: glitch42 2s ease-in-out; }
.glitch-43 { animation: glitch43 2s ease-in-out; }
.glitch-44 { animation: glitch44 2s ease-in-out; }
.glitch-45 { animation: glitch45 2s ease-in-out; }
.glitch-46 { animation: glitch46 2s ease-in-out; }
.glitch-47 { animation: glitch47 2s ease-in-out; }
.glitch-48 { animation: glitch48 2s ease-in-out; }
.glitch-49 { animation: glitch49 2s ease-in-out; }
.glitch-50 { animation: glitch50 2s ease-in-out; }

/* Glitch Keyframes */
@keyframes glitch1 {
    0%, 100% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; transform: translateX(-2px); filter: hue-rotate(90deg); }
    20% { transform: translateX(2px); filter: hue-rotate(180deg); }
    30% { transform: translateX(-1px); filter: hue-rotate(270deg); }
    40% { transform: translateX(1px); filter: hue-rotate(0deg); }
    50% { opacity: 1; transform: translateX(0); }
}

@keyframes glitch2 {
    0%, 100% { opacity: 0; transform: scale(1); }
    15% { opacity: 1; transform: scale(1.05); filter: contrast(150%); }
    30% { transform: scale(0.95); filter: contrast(50%); }
    45% { transform: scale(1.02); filter: contrast(200%); }
    60% { opacity: 1; transform: scale(1); }
}

@keyframes glitch3 {
    0%, 100% { opacity: 0; transform: rotateX(0deg); }
    20% { opacity: 1; transform: rotateX(10deg); filter: blur(1px); }
    40% { transform: rotateX(-5deg); filter: blur(0px); }
    60% { transform: rotateX(3deg); filter: blur(0.5px); }
    80% { opacity: 1; transform: rotateX(0deg); }
}

@keyframes glitch4 {
    0%, 100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
    25% { opacity: 1; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%); }
    50% { clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 80%); }
    75% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

@keyframes glitch5 {
    0%, 100% { opacity: 0; transform: skewX(0deg); }
    30% { opacity: 1; transform: skewX(5deg); filter: saturate(200%); }
    60% { transform: skewX(-3deg); filter: saturate(50%); }
    90% { opacity: 1; transform: skewX(0deg); }
}

@keyframes glitch6 {
    0%, 100% { opacity: 0; text-shadow: 0 0 5px #FF5331; }
    20% { opacity: 1; text-shadow: -2px 0 #00ffff, 2px 0 #ff00ff; }
    40% { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; }
    60% { text-shadow: 0 -2px #00ffff, 0 2px #ff00ff; }
    80% { opacity: 1; text-shadow: 0 0 5px #FF5331; }
}

@keyframes glitch7 {
    0%, 100% { opacity: 0; transform: translateY(0); }
    25% { opacity: 1; transform: translateY(-3px); filter: invert(20%); }
    50% { transform: translateY(2px); filter: invert(0%); }
    75% { transform: translateY(-1px); filter: invert(10%); }
}

@keyframes glitch8 {
    0%, 100% { opacity: 0; letter-spacing: 0; }
    30% { opacity: 1; letter-spacing: 3px; filter: brightness(150%); }
    60% { letter-spacing: -1px; filter: brightness(80%); }
    90% { opacity: 1; letter-spacing: 0; }
}

@keyframes glitch9 {
    0%, 100% { opacity: 0; transform: perspective(400px) rotateY(0deg); }
    25% { opacity: 1; transform: perspective(400px) rotateY(10deg); }
    50% { transform: perspective(400px) rotateY(-5deg); }
    75% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

@keyframes glitch10 {
    0%, 100% { opacity: 0; background-position: 0% 0%; }
    20% { opacity: 1; background: linear-gradient(45deg, transparent 30%, rgba(255,83,49,0.1) 50%, transparent 70%); }
    40% { background: linear-gradient(-45deg, transparent 30%, rgba(0,255,255,0.1) 50%, transparent 70%); }
    60% { background: linear-gradient(90deg, transparent 30%, rgba(255,0,255,0.1) 50%, transparent 70%); }
    80% { opacity: 1; background: none; }
}

@keyframes glitch11 {
    0%, 100% { opacity: 0; transform: matrix(1,0,0,1,0,0); }
    25% { opacity: 1; transform: matrix(1,0.1,0,1,0,0); }
    50% { transform: matrix(1,-0.1,0,1,0,0); }
    75% { opacity: 1; transform: matrix(1,0,0,1,0,0); }
}

@keyframes glitch12 {
    0%, 100% { opacity: 0; box-shadow: 0 0 0 rgba(255,83,49,0); }
    30% { opacity: 1; box-shadow: 0 0 20px rgba(255,83,49,0.5), inset 0 0 20px rgba(0,255,255,0.2); }
    60% { box-shadow: 0 0 30px rgba(0,255,255,0.5), inset 0 0 30px rgba(255,83,49,0.2); }
    90% { opacity: 1; box-shadow: 0 0 0 rgba(255,83,49,0); }
}

@keyframes glitch13 {
    0%, 100% { opacity: 0; transform: translateZ(0); }
    20% { opacity: 1; transform: translateZ(10px); filter: drop-shadow(2px 2px 0 #FF5331); }
    40% { transform: translateZ(-5px); filter: drop-shadow(-1px -1px 0 #00ffff); }
    60% { transform: translateZ(3px); filter: drop-shadow(1px 1px 0 #ff00ff); }
    80% { opacity: 1; transform: translateZ(0); }
}

@keyframes glitch14 {
    0%, 100% { opacity: 0; border: none; }
    25% { opacity: 1; border: 2px solid #FF5331; border-style: dashed; }
    50% { border: 1px solid #00ffff; border-style: dotted; }
    75% { border: 3px solid #ff00ff; border-style: solid; }
}

@keyframes glitch15 {
    0%, 100% { opacity: 0; word-spacing: 0; }
    30% { opacity: 1; word-spacing: 10px; filter: sepia(50%); }
    60% { word-spacing: -5px; filter: sepia(0%); }
    90% { opacity: 1; word-spacing: 0; }
}

@keyframes glitch16 {
    0%, 100% { opacity: 0; transform: rotateZ(0deg); }
    25% { opacity: 1; transform: rotateZ(2deg); filter: grayscale(50%); }
    50% { transform: rotateZ(-1deg); filter: grayscale(0%); }
    75% { opacity: 1; transform: rotateZ(0deg); }
}

@keyframes glitch17 {
    0%, 100% { opacity: 0; background: transparent; }
    20% { opacity: 1; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,83,49,0.1) 2px, rgba(255,83,49,0.1) 4px); }
    40% { background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,255,255,0.1) 2px, rgba(0,255,255,0.1) 4px); }
    60% { background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,0,255,0.1) 2px, rgba(255,0,255,0.1) 4px); }
    80% { opacity: 1; background: transparent; }
}

@keyframes glitch18 {
    0%, 100% { opacity: 0; transform: scaleX(1); }
    30% { opacity: 1; transform: scaleX(1.1); filter: hue-rotate(45deg); }
    60% { transform: scaleX(0.9); filter: hue-rotate(-45deg); }
    90% { opacity: 1; transform: scaleX(1); }
}

@keyframes glitch19 {
    0%, 100% { opacity: 0; clip-path: inset(0); }
    25% { opacity: 1; clip-path: inset(10px 0 0 0); }
    50% { clip-path: inset(0 10px 0 0); }
    75% { clip-path: inset(0 0 10px 0); }
}

@keyframes glitch20 {
    0%, 100% { opacity: 0; transform: translate3d(0,0,0); }
    20% { opacity: 1; transform: translate3d(-2px, 1px, 0); filter: contrast(120%); }
    40% { transform: translate3d(1px, -2px, 0); filter: contrast(80%); }
    60% { transform: translate3d(2px, 1px, 0); filter: contrast(150%); }
    80% { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes glitch21 {
    0%, 100% { opacity: 0; outline: none; }
    30% { opacity: 1; outline: 2px solid #FF5331; outline-offset: 5px; }
    60% { outline: 1px dashed #00ffff; outline-offset: -2px; }
    90% { opacity: 1; outline: none; }
}

@keyframes glitch22 {
    0%, 100% { opacity: 0; transform: skewY(0deg); }
    25% { opacity: 1; transform: skewY(3deg); filter: brightness(120%); }
    50% { transform: skewY(-2deg); filter: brightness(80%); }
    75% { opacity: 1; transform: skewY(0deg); }
}

@keyframes glitch23 {
    0%, 100% { opacity: 0; text-decoration: none; }
    30% { opacity: 1; text-decoration: underline wavy #FF5331; }
    60% { text-decoration: overline double #00ffff; }
    90% { opacity: 1; text-decoration: none; }
}

@keyframes glitch24 {
    0%, 100% { opacity: 0; transform: perspective(200px) rotateX(0deg); }
    25% { opacity: 1; transform: perspective(200px) rotateX(15deg); }
    50% { transform: perspective(200px) rotateX(-10deg); }
    75% { opacity: 1; transform: perspective(200px) rotateX(0deg); }
}

@keyframes glitch25 {
    0%, 100% { opacity: 0; filter: none; }
    20% { opacity: 1; filter: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3C/svg%3E#noise"); }
    40% { filter: blur(1px) brightness(150%); }
    60% { filter: contrast(200%) saturate(50%); }
    80% { opacity: 1; filter: none; }
}

@keyframes glitch26 {
    0%, 100% { opacity: 0; transform: rotateY(0deg) rotateX(0deg); }
    25% { opacity: 1; transform: rotateY(5deg) rotateX(2deg); }
    50% { transform: rotateY(-3deg) rotateX(-1deg); }
    75% { opacity: 1; transform: rotateY(0deg) rotateX(0deg); }
}

@keyframes glitch27 {
    0%, 100% { opacity: 0; background-size: 100% 100%; }
    30% { opacity: 1; background: radial-gradient(circle, rgba(255,83,49,0.1) 30%, transparent 70%); }
    60% { background: radial-gradient(ellipse, rgba(0,255,255,0.1) 20%, transparent 80%); }
    90% { opacity: 1; background: none; }
}

@keyframes glitch28 {
    0%, 100% { opacity: 0; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); }
    25% { opacity: 1; transform: matrix3d(1,0.1,0,0,0,1,0,0,0,0,1,0,0,0,0,1); }
    50% { transform: matrix3d(1,-0.05,0,0,0,1,0,0,0,0,1,0,0,0,0,1); }
    75% { opacity: 1; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); }
}

@keyframes glitch29 {
    0%, 100% { opacity: 0; mask: none; }
    30% { opacity: 1; mask: linear-gradient(45deg, black 30%, transparent 50%, black 70%); }
    60% { mask: linear-gradient(-45deg, black 20%, transparent 60%, black 80%); }
    90% { opacity: 1; mask: none; }
}

@keyframes glitch30 {
    0%, 100% { opacity: 0; transform: translateX(0) translateY(0); }
    20% { opacity: 1; transform: translateX(-1px) translateY(1px); filter: hue-rotate(30deg); }
    40% { transform: translateX(2px) translateY(-1px); filter: hue-rotate(60deg); }
    60% { transform: translateX(-2px) translateY(2px); filter: hue-rotate(90deg); }
    80% { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes glitch31 {
    0%, 100% { opacity: 0; border-radius: 15px; }
    25% { opacity: 1; border-radius: 0px 15px 0px 15px; }
    50% { border-radius: 15px 0px 15px 0px; }
    75% { opacity: 1; border-radius: 15px; }
}

@keyframes glitch32 {
    0%, 100% { opacity: 0; transform: scaleY(1); }
    30% { opacity: 1; transform: scaleY(1.05); filter: contrast(130%); }
    60% { transform: scaleY(0.95); filter: contrast(70%); }
    90% { opacity: 1; transform: scaleY(1); }
}

@keyframes glitch33 {
    0%, 100% { opacity: 0; text-shadow: none; }
    25% { opacity: 1; text-shadow: 1px 0 0 #FF5331, -1px 0 0 #00ffff; }
    50% { text-shadow: 0 1px 0 #ff00ff, 0 -1px 0 #ffff00; }
    75% { opacity: 1; text-shadow: none; }
}

@keyframes glitch34 {
    0%, 100% { opacity: 0; transform: perspective(300px) rotateY(0deg) rotateX(0deg); }
    33% { opacity: 1; transform: perspective(300px) rotateY(10deg) rotateX(5deg); }
    66% { transform: perspective(300px) rotateY(-5deg) rotateX(-3deg); }
}

@keyframes glitch35 {
    0%, 100% { opacity: 0; background-blend-mode: normal; }
    30% { opacity: 1; background: #FF5331; background-blend-mode: difference; }
    60% { background: #00ffff; background-blend-mode: multiply; }
    90% { opacity: 1; background: transparent; }
}

@keyframes glitch36 {
    0%, 100% { opacity: 0; transform: rotateZ(0deg) scale(1); }
    25% { opacity: 1; transform: rotateZ(1deg) scale(1.02); }
    50% { transform: rotateZ(-0.5deg) scale(0.98); }
    75% { opacity: 1; transform: rotateZ(0deg) scale(1); }
}

@keyframes glitch37 {
    0%, 100% { opacity: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
    25% { opacity: 1; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%); }
    75% { opacity: 1; clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 5% 100%); }
}

@keyframes glitch38 {
    0%, 100% { opacity: 0; filter: none; }
    20% { opacity: 1; filter: saturate(200%) hue-rotate(45deg); }
    40% { filter: saturate(50%) hue-rotate(90deg); }
    60% { filter: saturate(300%) hue-rotate(180deg); }
    80% { opacity: 1; filter: none; }
}

@keyframes glitch39 {
    0%, 100% { opacity: 0; transform: translateZ(0) rotateX(0deg); }
    30% { opacity: 1; transform: translateZ(5px) rotateX(5deg); }
    60% { transform: translateZ(-3px) rotateX(-3deg); }
    90% { opacity: 1; transform: translateZ(0) rotateX(0deg); }
}

@keyframes glitch40 {
    0%, 100% { opacity: 0; box-shadow: none; }
    25% { opacity: 1; box-shadow: 0 0 0 2px #FF5331, 0 0 0 4px #00ffff; }
    50% { box-shadow: 0 0 0 1px #ff00ff, 0 0 0 3px #ffff00; }
    75% { opacity: 1; box-shadow: none; }
}

@keyframes glitch41 {
    0%, 100% { opacity: 0; transform: skew(0deg, 0deg); }
    25% { opacity: 1; transform: skew(2deg, 1deg); }
    50% { transform: skew(-1deg, -2deg); }
    75% { opacity: 1; transform: skew(0deg, 0deg); }
}

@keyframes glitch42 {
    0%, 100% { opacity: 0; background-position: 0% 0%; }
    30% { opacity: 1; background: conic-gradient(from 0deg, rgba(255,83,49,0.1), transparent, rgba(0,255,255,0.1)); }
    60% { background: conic-gradient(from 180deg, rgba(255,0,255,0.1), transparent, rgba(255,255,0,0.1)); }
    90% { opacity: 1; background: none; }
}

@keyframes glitch43 {
    0%, 100% { opacity: 0; transform: perspective(400px) rotateY(0deg) translateZ(0); }
    25% { opacity: 1; transform: perspective(400px) rotateY(8deg) translateZ(10px); }
    50% { transform: perspective(400px) rotateY(-4deg) translateZ(-5px); }
    75% { opacity: 1; transform: perspective(400px) rotateY(0deg) translateZ(0); }
}

@keyframes glitch44 {
    0%, 100% { opacity: 0; letter-spacing: normal; word-spacing: normal; }
    30% { opacity: 1; letter-spacing: 2px; word-spacing: 5px; }
    60% { letter-spacing: -1px; word-spacing: -2px; }
    90% { opacity: 1; letter-spacing: normal; word-spacing: normal; }
}

@keyframes glitch45 {
    0%, 100% { opacity: 0; filter: none; }
    20% { opacity: 1; filter: drop-shadow(2px 0 0 #FF5331) drop-shadow(-2px 0 0 #00ffff); }
    40% { filter: drop-shadow(0 2px 0 #ff00ff) drop-shadow(0 -2px 0 #ffff00); }
    60% { filter: drop-shadow(1px 1px 0 #FF5331) drop-shadow(-1px -1px 0 #00ffff); }
    80% { opacity: 1; filter: none; }
}

@keyframes glitch46 {
    0%, 100% { opacity: 0; transform: matrix(1,0,0,1,0,0); }
    25% { opacity: 1; transform: matrix(1.02,0.01,0,1,0,0); }
    50% { transform: matrix(0.98,-0.01,0,1,0,0); }
    75% { opacity: 1; transform: matrix(1,0,0,1,0,0); }
}

@keyframes glitch47 {
    0%, 100% { opacity: 0; border: none; outline: none; }
    30% { opacity: 1; border: 1px solid rgba(255,83,49,0.5); outline: 1px dashed rgba(0,255,255,0.5); }
    60% { border: 2px dotted rgba(255,0,255,0.5); outline: 2px solid rgba(255,255,0,0.3); }
    90% { opacity: 1; border: none; outline: none; }
}

@keyframes glitch48 {
    0%, 100% { opacity: 0; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25% { opacity: 1; transform: rotateX(3deg) rotateY(2deg) rotateZ(1deg); }
    50% { transform: rotateX(-2deg) rotateY(-1deg) rotateZ(-0.5deg); }
    75% { opacity: 1; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

@keyframes glitch49 {
    0%, 100% { opacity: 0; background: transparent; }
    25% { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(255,83,49,0.1) 0deg, transparent 45deg, rgba(0,255,255,0.1) 90deg, transparent 135deg); }
    50% { background: repeating-conic-gradient(from 180deg, rgba(255,0,255,0.1) 0deg, transparent 30deg, rgba(255,255,0,0.1) 60deg, transparent 90deg); }
    75% { opacity: 1; background: transparent; }
}

@keyframes glitch50 {
    0%, 100% { opacity: 0; transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
    20% { opacity: 1; transform: translateX(-1px) translateY(1px) scale(1.01) rotate(0.5deg); }
    40% { transform: translateX(1px) translateY(-1px) scale(0.99) rotate(-0.5deg); }
    60% { transform: translateX(-0.5px) translateY(0.5px) scale(1.005) rotate(0.2deg); }
    80% { opacity: 1; transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
}

/* Additional Cyberpunk Effects */
.glitch-51 { animation: scanlines 3s ease-in-out; }
.glitch-52 { animation: digitalNoise 3s ease-in-out; }
.glitch-53 { animation: hologram 3s ease-in-out; }
.glitch-54 { animation: codeRain 3s ease-in-out; }
.glitch-55 { animation: surveillance 3s ease-in-out; }
.glitch-56 { animation: dataStream 3s ease-in-out; }
.glitch-57 { animation: cyborgVision 3s ease-in-out; }
.glitch-58 { animation: matrixLoad 3s ease-in-out; }
.glitch-59 { animation: neuralNetwork 3s ease-in-out; }
.glitch-60 { animation: quantumFlux 3s ease-in-out; }
.glitch-61 { animation: hackingTerminal 3s ease-in-out; }
.glitch-62 { animation: futureGrid 3s ease-in-out; }
.glitch-63 { animation: biometricScan 3s ease-in-out; }
.glitch-64 { animation: systemBoot 3s ease-in-out; }
.glitch-65 { animation: aiAnalysis 3s ease-in-out; }
.glitch-66 { animation: cybernetic 3s ease-in-out; }
.glitch-67 { animation: virtualReality 3s ease-in-out; }
.glitch-68 { animation: nanobots 3s ease-in-out; }
.glitch-69 { animation: timeWarp 3s ease-in-out; }
.glitch-70 { animation: digitization 3s ease-in-out; }

@keyframes scanlines {
    0%, 100% { opacity: 0; }
    10% { opacity: 1; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,83,49,0.1) 2px, rgba(255,83,49,0.1) 4px); }
    20% { background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,255,0.1) 3px, rgba(0,255,255,0.1) 6px); }
    30% { background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 2px); }
    50% { opacity: 1; background: none; }
}

@keyframes digitalNoise {
    0%, 100% { opacity: 0; filter: none; }
    15% { opacity: 1; filter: contrast(150%) brightness(80%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"); }
    30% { filter: contrast(200%) brightness(120%); }
    45% { filter: contrast(80%) brightness(90%); }
    60% { opacity: 1; filter: none; background: none; }
}

@keyframes hologram {
    0%, 100% { opacity: 0; }
    20% { opacity: 0.7; background: linear-gradient(45deg, rgba(0,255,255,0.1) 0%, transparent 25%, rgba(255,83,49,0.1) 50%, transparent 75%, rgba(0,255,255,0.1) 100%); transform: translateZ(10px); }
    40% { opacity: 0.9; background: linear-gradient(-45deg, rgba(255,0,255,0.1) 0%, transparent 25%, rgba(255,255,0,0.1) 50%, transparent 75%, rgba(255,0,255,0.1) 100%); }
    60% { opacity: 0.8; background: linear-gradient(90deg, rgba(0,255,255,0.1) 0%, transparent 50%, rgba(255,83,49,0.1) 100%); }
    80% { opacity: 1; background: none; transform: translateZ(0); }
}

@keyframes codeRain {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; }
    50% { background: repeating-linear-gradient(90deg, transparent 0px, rgba(0,255,0,0.1) 1px, transparent 2px, transparent 10px); }
    75% { text-shadow: 0 0 5px #FF5331, 0 0 10px #FF5331; background: none; }
}

@keyframes surveillance {
    0%, 100% { opacity: 0; }
    15% { opacity: 1; box-shadow: inset 0 0 0 2px #ff0000, 0 0 20px rgba(255,0,0,0.3); }
    30% { box-shadow: inset 0 0 0 1px #ff0000, 0 0 10px rgba(255,0,0,0.5); background: radial-gradient(circle at 50% 50%, rgba(255,0,0,0.1) 0%, transparent 70%); }
    45% { box-shadow: inset 0 0 0 3px #ff0000, 0 0 30px rgba(255,0,0,0.2); }
    60% { opacity: 1; box-shadow: none; background: none; }
}

@keyframes dataStream {
    0%, 100% { opacity: 0; }
    20% { opacity: 1; background: linear-gradient(to right, rgba(255,83,49,0.1) 0%, rgba(0,255,255,0.1) 25%, rgba(255,0,255,0.1) 50%, rgba(255,255,0,0.1) 75%, rgba(255,83,49,0.1) 100%); background-size: 200% 100%; animation: streamFlow 1s linear infinite; }
    40% { background-position: -200% 0; }
    60% { background-position: 200% 0; }
    80% { opacity: 1; background: none; }
}

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

@keyframes cyborgVision {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; border: 2px solid #00ffff; border-radius: 50% 10px 50% 10px; box-shadow: 0 0 0 4px rgba(0,255,255,0.2), inset 0 0 20px rgba(0,255,255,0.1); }
    50% { border-radius: 10px 50% 10px 50%; border-color: #ff00ff; box-shadow: 0 0 0 4px rgba(255,0,255,0.2), inset 0 0 20px rgba(255,0,255,0.1); }
    75% { border-radius: 50% 50% 50% 50%; border-color: #ffff00; box-shadow: 0 0 0 4px rgba(255,255,0,0.2), inset 0 0 20px rgba(255,255,0,0.1); }
}

@keyframes matrixLoad {
    0%, 100% { opacity: 0; }
    20% { opacity: 1; background: repeating-linear-gradient(0deg, transparent 0px, rgba(0,255,0,0.1) 1px, transparent 2px, transparent 8px); }
    40% { background: repeating-linear-gradient(45deg, transparent 0px, rgba(0,255,0,0.1) 1px, transparent 2px, transparent 8px); transform: skewX(5deg); }
    60% { background: repeating-linear-gradient(90deg, transparent 0px, rgba(0,255,0,0.1) 1px, transparent 2px, transparent 8px); transform: skewX(-5deg); }
    80% { opacity: 1; background: none; transform: skewX(0deg); }
}

@keyframes neuralNetwork {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; background: radial-gradient(circle at 20% 20%, rgba(255,83,49,0.2) 2px, transparent 2px), radial-gradient(circle at 80% 80%, rgba(0,255,255,0.2) 2px, transparent 2px), radial-gradient(circle at 40% 60%, rgba(255,0,255,0.2) 2px, transparent 2px); background-size: 40px 40px; }
    50% { background-position: 10px 10px, 30px 30px, 20px 40px; }
    75% { background-position: 20px 20px, 10px 10px, 30px 20px; }
}

@keyframes quantumFlux {
    0%, 100% { opacity: 0; transform: scale(1); }
    20% { opacity: 1; transform: scale(1.02); filter: hue-rotate(120deg) saturate(150%); }
    40% { transform: scale(0.98); filter: hue-rotate(240deg) saturate(200%); }
    60% { transform: scale(1.01); filter: hue-rotate(360deg) saturate(100%); }
    80% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes hackingTerminal {
    0%, 100% { opacity: 0; }
    15% { opacity: 1; background: #000000; color: #00ff00; font-family: 'Courier New', monospace; }
    30% { background: #001100; text-shadow: 0 0 5px #00ff00; }
    45% { background: #000000; color: #ffffff; }
    60% { background: #262626; color: #FFFFFF; font-family: inherit; text-shadow: none; }
    80% { opacity: 1; }
}

@keyframes futureGrid {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; background: linear-gradient(0deg, transparent 24%, rgba(255,83,49,0.1) 25%, rgba(255,83,49,0.1) 26%, transparent 27%, transparent 74%, rgba(255,83,49,0.1) 75%, rgba(255,83,49,0.1) 76%, transparent 77%), linear-gradient(90deg, transparent 24%, rgba(0,255,255,0.1) 25%, rgba(0,255,255,0.1) 26%, transparent 27%, transparent 74%, rgba(0,255,255,0.1) 75%, rgba(0,255,255,0.1) 76%, transparent 77%); background-size: 50px 50px; }
    50% { background-position: 25px 25px; }
    75% { background-position: 0px 0px; background-size: 30px 30px; }
}

@keyframes biometricScan {
    0%, 100% { opacity: 0; }
    20% { opacity: 1; box-shadow: 0 -50px 0 -48px #ff0000, 0 -40px 0 -38px #ff3300, 0 -30px 0 -28px #ff6600, 0 -20px 0 -18px #ff9900, 0 -10px 0 -8px #ffcc00; }
    40% { box-shadow: 0 0px 0 -48px #ff0000, 0 10px 0 -38px #ff3300, 0 20px 0 -28px #ff6600, 0 30px 0 -18px #ff9900, 0 40px 0 -8px #ffcc00; }
    60% { box-shadow: 0 50px 0 -48px #ff0000, 0 60px 0 -38px #ff3300, 0 70px 0 -28px #ff6600, 0 80px 0 -18px #ff9900, 0 90px 0 -8px #ffcc00; }
    80% { opacity: 1; box-shadow: none; }
}

@keyframes systemBoot {
    0%, 100% { opacity: 0; }
    10% { opacity: 1; background: #000000; color: #00ff00; }
    20% { content: "SYSTEM INITIALIZING..."; }
    30% { content: "LOADING QUOTES..."; }
    40% { content: "CYBERPUNK MODE ACTIVE"; }
    50% { background: #001100; }
    60% { background: #262626; color: #FFFFFF; }
    80% { opacity: 1; }
}

@keyframes aiAnalysis {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; border: 1px dashed #00ffff; }
    35% { border: 2px solid #ff00ff; transform: scale(1.02); }
    45% { border: 1px dotted #ffff00; transform: scale(0.98); }
    55% { border: 3px double #ff0000; transform: scale(1.01); }
    65% { border: 1px solid #00ff00; transform: scale(0.99); }
    75% { border: 2px ridge #ffffff; transform: scale(1); }
    85% { opacity: 1; border: none; }
}

@keyframes cybernetic {
    0%, 100% { opacity: 0; }
    20% { opacity: 1; background: conic-gradient(from 0deg at 50% 50%, #ff000080 0deg, transparent 60deg, #00ff0080 120deg, transparent 180deg, #0000ff80 240deg, transparent 300deg); }
    40% { background: conic-gradient(from 120deg at 50% 50%, #ff000080 0deg, transparent 60deg, #00ff0080 120deg, transparent 180deg, #0000ff80 240deg, transparent 300deg); }
    60% { background: conic-gradient(from 240deg at 50% 50%, #ff000080 0deg, transparent 60deg, #00ff0080 120deg, transparent 180deg, #0000ff80 240deg, transparent 300deg); }
    80% { opacity: 1; background: none; }
}

@keyframes virtualReality {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; transform: perspective(500px) rotateX(15deg) rotateY(15deg); filter: blur(1px); }
    50% { transform: perspective(500px) rotateX(-10deg) rotateY(-10deg); filter: blur(0px); }
    75% { transform: perspective(500px) rotateX(5deg) rotateY(5deg); filter: blur(0.5px); }
}

@keyframes nanobots {
    0%, 100% { opacity: 0; }
    25% { opacity: 1; background: radial-gradient(circle at 10% 20%, #ff533180 1px, transparent 1px), radial-gradient(circle at 80% 80%, #00ffff80 1px, transparent 1px), radial-gradient(circle at 40% 40%, #ff00ff80 1px, transparent 1px), radial-gradient(circle at 60% 10%, #ffff0080 1px, transparent 1px); background-size: 20px 20px; }
    50% { background-position: 5px 5px, 15px 15px, 10px 25px, 25px 5px; }
    75% { background-position: 10px 10px, 5px 5px, 20px 15px, 15px 25px; }
}

@keyframes timeWarp {
    0%, 100% { opacity: 0; }
    20% { opacity: 1; transform: perspective(400px) rotateY(20deg) rotateX(10deg) scale(1.1); filter: hue-rotate(90deg); }
    40% { transform: perspective(400px) rotateY(-15deg) rotateX(-5deg) scale(0.9); filter: hue-rotate(180deg); }
    60% { transform: perspective(400px) rotateY(10deg) rotateX(5deg) scale(1.05); filter: hue-rotate(270deg); }
    80% { opacity: 1; transform: perspective(400px) rotateY(0deg) rotateX(0deg) scale(1); filter: none; }
}

@keyframes digitization {
    0%, 100% { opacity: 0; }
    15% { opacity: 1; clip-path: polygon(0% 0%, 10% 0%, 10% 10%, 20% 10%, 20% 20%, 30% 20%, 30% 30%, 40% 30%, 40% 40%, 50% 40%, 50% 50%, 60% 50%, 60% 60%, 70% 60%, 70% 70%, 80% 70%, 80% 80%, 90% 80%, 90% 90%, 100% 90%, 100% 100%, 0% 100%); }
    30% { clip-path: polygon(0% 0%, 20% 0%, 20% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 80% 60%, 80% 80%, 100% 80%, 100% 100%, 0% 100%); }
    45% { clip-path: polygon(0% 0%, 25% 0%, 25% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 75%, 100% 75%, 100% 100%, 0% 100%); }
    60% { clip-path: polygon(0% 0%, 33% 0%, 33% 33%, 66% 33%, 66% 66%, 100% 66%, 100% 100%, 0% 100%); }
    75% { clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%); }
    90% { opacity: 1; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cyber-quotes-container {
        margin: 10px;
        padding: 30px 15px;
    }
    
    .quote-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    .quote-author-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .quote-image,
    .quote-avatar {
        width: 50px;
        height: 50px;
    }
    
    .quote-avatar {
        font-size: 24px;
    }
    
    .quote-author {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .cyber-quotes-container {
        padding: 20px 10px;
    }
    
    .quote-text {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .quote-image,
    .quote-avatar {
        width: 40px;
        height: 40px;
    }
    
    .quote-avatar {
        font-size: 20px;
    }
    
    .quote-author {
        font-size: 0.9rem;
    }
}