/* ========================================== ULTIMATE GALAXY ORBIT + HOLOGRAPHIC POP-OUT (Responsive, Smooth, 15s Loop, Clickable UI) ========================================== */ /* Main container: Fixed exact size */ #wc-logo-animate { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px !important; height: 50px !important; overflow: visible !important; text-decoration: none; transform-style: preserve-3d; perspective: 800px; } /* --- 1. THE MAIN LOGO (Blink, Zoom & Highlight) --- */ #wc-logo-animate img { position: relative; width: 100% !important; height: 100% !important; object-fit: contain; z-index: 5; /* 15 seconds total loop (Faster and smoother) */ animation: main-logo-action 15s ease-in-out infinite; will-change: transform, opacity, filter; } /* --- 2. THE GALAXY RING (3D Orbit) --- */ #wc-logo-animate::before { content: ""; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; /* Shifted slightly right to avoid left screen cut-off */ margin-left: -70px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); z-index: 1; pointer-events: none; background-image: url('https://cdn.savemyexams.com/logo/sme-logo-3line.svg'), url('https://yrjournal.org/images/Logo.PNG'), url('https://upload.wikimedia.org/wikipedia/commons/5/52/Domainme.png'); background-size: 40px auto, 35px auto, 40px auto; background-repeat: no-repeat; background-position: 50% 0%, 93% 75%, 7% 75%; animation: galaxy-orbit-spin 15s ease-in-out infinite; will-change: transform, opacity; } /* --- 3. THE HOLOGRAPHIC POP-OUT & TEXT --- */ #wc-logo-animate::after { content: ""; position: absolute; top: 90px; left: 55%; /* Shifted right for better balance */ width: 250px; height: 60px; z-index: 10; pointer-events: none; background-size: auto 35px; background-position: center top; background-repeat: no-repeat; display: flex; align-items: flex-end; justify-content: center; font-family: sans-serif; font-size: 13px; font-weight: 900; white-space: nowrap; padding-bottom: 2px; text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #000; color: #ffffff; animation: holographic-popout 15s ease-in-out infinite; will-change: transform, opacity, content, background-image; } /* ========================================== MOBILE RESPONSIVENESS FIXES ========================================== */ @media (max-width: 768px) { #wc-logo-animate::before { width: 150px; height: 150px; margin-top: -75px; margin-left: -20px; /* Pushed significantly right on mobile */ background-size: 30px auto, 25px auto, 30px auto; } #wc-logo-animate::after { top: 75px; left: 65%; /* Pushed right */ width: 180px; font-size: 10.5px; background-size: auto 25px; } } /* ========================================== ANIMATION TIMELINES (15-Second Master Loop) ========================================== */ /* 1. Orbit Spin */ @keyframes galaxy-orbit-spin { 0%, 16% { opacity: 1; transform: rotateX(70deg) rotateZ(180deg); } 16%, 24% { opacity: 1; transform: rotateX(70deg) rotateZ(60deg); } 24%, 40% { opacity: 1; transform: rotateX(70deg) rotateZ(60deg); } 40%, 48% { opacity: 1; transform: rotateX(70deg) rotateZ(-60deg); } 48%, 64% { opacity: 1; transform: rotateX(70deg) rotateZ(-60deg); } 64%, 72% { opacity: 1; transform: rotateX(70deg) rotateZ(-180deg); } 73%, 98% { opacity: 0; transform: rotateX(70deg) rotateZ(-180deg); } 99%, 100% { opacity: 0; transform: rotateX(70deg) rotateZ(180deg); } } /* 2. Holographic Pop-Out & Text (With Pointer Events for clicking) */ @keyframes holographic-popout { /* Sponsor 1 */ 0%, 2% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "Your Academic Solution."; background-image: url('https://cdn.savemyexams.com/logo/sme-logo-3line.svg'); } 4%, 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); content: "Your Academic Solution."; background-image: url('https://cdn.savemyexams.com/logo/sme-logo-3line.svg'); filter: drop-shadow(0 0 10px rgba(255,255,255,0.6)); pointer-events: auto; cursor: pointer; } 16% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "Your Academic Solution."; background-image: url('https://cdn.savemyexams.com/logo/sme-logo-3line.svg'); } 17%, 23% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: ""; background-image: none; pointer-events: none; } /* Sponsor 2 */ 24%, 26% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "IARCO's Power House."; background-image: url('https://yrjournal.org/images/Logo.PNG'); } 28%, 38% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); content: "IARCO's Power House."; background-image: url('https://yrjournal.org/images/Logo.PNG'); filter: drop-shadow(0 0 10px rgba(255,255,255,0.6)); pointer-events: auto; cursor: pointer; } 40% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "IARCO's Power House."; background-image: url('https://yrjournal.org/images/Logo.PNG'); } 41%, 47% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: ""; background-image: none; pointer-events: none; } /* Sponsor 3 */ 48%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "Your Online Presence Solution."; background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/52/Domainme.png'); } 52%, 62% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); content: "Your Online Presence Solution."; background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/52/Domainme.png'); filter: drop-shadow(0 0 10px rgba(255,255,255,0.6)); pointer-events: auto; cursor: pointer; } 64% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: "Your Online Presence Solution."; background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/52/Domainme.png'); } 65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); content: ""; background-image: none; pointer-events: none; } } /* 3. Main Logo */ @keyframes main-logo-action { 0%, 68% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); } 70% { opacity: 0; transform: scale(1); } 72% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); } 74% { opacity: 0; } 76% { opacity: 1; } 78% { transform: scale(1); } 88% { transform: scale(1.3); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); } 96%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); } }