Add animated rainbow gradient to Outer Limits easter egg text
Opening narration cycles through a 9-stop gradient (red → amber → yellow → green → teal → blue → violet → pink → red) at 6s per loop. Closing narration stays teal for visual hierarchy.
This commit is contained in:
parent
29fc250c73
commit
80a01a7326
@ -381,10 +381,25 @@
|
|||||||
font-family: 'Georgia', 'Times New Roman', serif;
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--scope-teal);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 0 0 8px var(--scope-teal-glow);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
/* Animated rainbow gradient text */
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#ff6b6b, #ffb347, #ffd93d, #a3ff6b,
|
||||||
|
#2dd4bf, #6bb5ff, #c084fc, #ff6b9d, #ff6b6b
|
||||||
|
);
|
||||||
|
background-size: 300% 100%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
animation: scope-rainbow 6s linear infinite;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scope-rainbow {
|
||||||
|
0% { background-position: 0% center; }
|
||||||
|
100% { background-position: 300% center; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Closing narration + plug — fades in after typewriter finishes */
|
/* Closing narration + plug — fades in after typewriter finishes */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user