@keyframes phone-slide { 0% { transform: translateY(0); } 30% { transform: translateY(0); } /* Hold image 1 */ 33% { transform: translateY(-33.3333%); } /* Slide to image 2 */ 63% { transform: translateY(-33.3333%); } /* Hold image 2 */ 66% { transform: translateY(-66.6666%); } /* Slide to image 3 */ 96% { transform: translateY(-66.6666%); } /* Hold image 3 */ 100% { transform: translateY(0); } /* Loop back */ } /* 2. Keyframes for the Central Sun/Logo */ @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(107, 39, 196, 0.7); } 50% { box-shadow: 0 0 30px rgba(107, 39, 196, 1); } } @keyframes shimmer { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } /* 3. Keyframes for the Orbital Planets (Orbit + Centering adjustment) */ /* R=120px (Slow) */ @keyframes orbit-120 { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(120px); } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(120px); } } /* R=180px (Medium) */ @keyframes orbit-180 { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(180px); } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(180px); } } /* R=240px (Fast) */ @keyframes orbit-240 { 0% { transform: translate(-50%, -50%) rotate(0deg) translateX(240px); } 100% { transform: translate(-50%, -50%) rotate(360deg) translateX(240px); } } /* Animation for the staggered feature cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeInUp { animation: fadeInUp 0.6s forwards; opacity: 0; /* Hide initially */ } /* Base styles for Light Mode */ body { background-color: #ffffff; /* White Background */ color: #1f2937; /* Dark Text */ transition: background-color 0.3s, color 0.3s; /* Smooth transition */ overflow-x: hidden; } /* Dark Mode overrides applied when the 'dark' class is present on */ .dark body { background-color: #111827; /* Dark Background */ color: #e0f2f1; /* Light Text */ } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.3s; } .stagger-3 { animation-delay: 0.5s; } .stagger-4 { animation-delay: 0.7s; } .stagger-5 { animation-delay: 0.9s; } .stagger-6 { animation-delay: 1.1s; } /* Custom glow for the button */ .cta-button { transition: all 0.3s ease; box-shadow: 0 0 10px rgba(107, 39, 196, 0.5); } .cta-button:hover { box-shadow: 0 0 20px rgba(107, 39, 196, 0.8), 0 0 40px rgba(107, 39, 196, 0.3); transform: translateY(-2px); } /* SVG Icon styles */ .icon { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } /* Phone mockup specific styles */ /* .phone-mockup { width: 280px; height: 580px; background-color: #000; border-radius: 40px; padding: 12px; box-shadow: 0px 0px 0px 10px #333, 0px 0px 0px 12px #666, 0px 20px 50px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } */ /* Speaker/notch */ /* .phone-mockup:before { content: ""; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 80px; height: 12px; background-color: #333; border-radius: 8px; z-index: 10; } .phone-screen { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; position: relative; } */ /* Crucial update: Height is 300% to stack 3 screens vertically */ .screenshot-container { width: 100%; height: 300%; position: absolute; top: 0; left: 0; animation: phone-slide 9s infinite ease-in-out; } .screenshot-container img { /* Each image is 1/3 of the container height (100% of screen height) */ width: 100%; height: 33.3333%; object-fit: cover; display: block; } /* --- ORBITAL GALAXY STYLES --- */ .orbital-galaxy-container { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; margin-top: 5rem; } .pledge-logo-sun { /* width: 87px; height: 80px; */ border-radius: 100%; /* background-color: #6b27c4; */ /* pledge-accent */ display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; color: white; position: absolute; /* Fixed: Added glow pulse and shimmer animations */ /* animation: glow-pulse 3s ease-in-out infinite, shimmer 3s infinite; */ z-index: 2; } .ott-planet { position: absolute; /* CRITICAL FIX: The keyframe now includes this centering translate */ top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */ z-index: 1; } .ott-planet img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ADDED: Dark mode specific border color for visibility */ .dark .line-1 { /* Sets the border color to a faint white when 'dark' class is present */ border-color: rgba(255, 255, 255, 0.1); } /* Specific logo colors */ /* .ott-netflix { background-color: #e50914; } */ /* .ott-spotify { background-color: #1db954; } .ott-disney { background-color: #113ccf; } .ott-hulu { background-color: #1ce783; } .ott-apple-tv { background-color: #000000; } */ .ott-prime { background-color: #ffffff; } /* Orbit Positioning/Animation Application (using explicit keyframe names) */ /* Planet 1 & 2 (Slow Orbit, Radius 120px) */ .planet-1 { animation: orbit-120 20s linear infinite; } .planet-2 { animation: orbit-120 20s linear infinite; animation-delay: -10s; } /* Planet 3 & 4 (Medium Orbit, Radius 180px) */ .planet-3 { animation: orbit-180 30s linear infinite; animation-delay: -5s; } .planet-4 { animation: orbit-180 30s linear infinite; animation-delay: -20s; } /* Planet 5 & 6 (Fast Orbit, Radius 240px) */ .planet-5 { animation: orbit-240 40s linear infinite; animation-delay: -15s; } .planet-6 { animation: orbit-240 40s linear infinite; animation-delay: -35s; } .line-1{ position: absolute; width: 500px; height: 500px; /* border: 1px solid rgba(107, 39, 196, 0.2); */ border: 2px solid rgba(107, 39, 196, 0.4); border-radius: 50%; /* border-style: dotted; */ animation: shimmer 3s infinite; }