/* Cinematic Overlay Styles */ .cinematic-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(29, 161, 242, 0.98); /* Classic Twitter Blue #1DA1F2 */ z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: opacity 0.8s ease-in-out; backdrop-filter: blur(10px); } .cinematic-overlay.active { opacity: 1; } .overlay-content { text-align: center; color: var(--clr-white); } .overlay-logo { font-size: 7rem; color: #ffffff; margin-bottom: 30px; opacity: 0; transform: scale(0.5); transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cinematic-overlay.active .overlay-logo { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 20px rgba(29, 174, 255, 0.6)); } .overlay-title { font-family: 'Play', sans-serif; font-size: 3rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; opacity: 0; transform: translateY(20px); transition: all 0.8s ease 0.4s; color: #ffffff; /* Solid white for max contrast */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .cinematic-overlay.active .overlay-title { opacity: 1; transform: translateY(0); } .overlay-author { font-family: 'Play', sans-serif; font-size: 1rem; font-size: 1rem; color: #ffffff; /* Solid white */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 3px; margin-top: 40px; margin-bottom: 15px; opacity: 0; transition: opacity 1s ease 0.8s; } .cinematic-overlay.active .overlay-author { opacity: 1; } .overlay-names { font-size: 1.5rem; font-weight: 300; opacity: 0; transform: scale(0.9); transition: all 1s ease 1s; } .cinematic-overlay.active .overlay-names { opacity: 1; transform: scale(1); } .overlay-names .separator { color: #ffffff; margin: 0 15px; font-weight: 700; }