/* AstroSankofa Animations v3 - 20260403-FRESH */ /* Initial hidden state — only applied when animation engine is active. The .js-animations-ready class is added to by animations.js. This ensures content is ALWAYS visible if JS hasn't run or for dynamic content. */ .js-animations-ready [data-animate]:not(.is-visible) { opacity: 0; } [data-animate].is-visible { opacity: 1; } [data-animate] img { opacity: 1 !important; } [data-animate].is-visible img { opacity: 1; } .hero__content[data-animate] { opacity: 1; } /* Scanline sweep — top to bottom, slow 20s */ @keyframes scan { 0% { top: -5%; opacity: 0; } 8% { top: 5%; opacity: 1; } 92% { top: 95%; opacity: 1; } 100% { top: 105%; opacity: 0; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 10px rgba(0,231,255,0.2), 0 0 20px rgba(0,231,255,0.1); } 50% { box-shadow: 0 0 20px rgba(0,231,255,0.4), 0 0 40px rgba(0,231,255,0.2); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes holoShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @media (prefers-reduced-motion: no-preference) { [data-animate="fade-in"].is-visible { animation: fadeIn 600ms ease forwards; } [data-animate="slide-up"].is-visible { animation: slideInUp 600ms ease forwards; } [data-animate="slide-left"].is-visible { animation: slideInLeft 600ms ease forwards; } [data-animate="true"].is-visible, [data-animate=""].is-visible { animation: fadeIn 600ms ease forwards; } [data-animate-stagger] > *:nth-child(1) { animation-delay: 0ms; } [data-animate-stagger] > *:nth-child(2) { animation-delay: 100ms; } [data-animate-stagger] > *:nth-child(3) { animation-delay: 200ms; } [data-animate-stagger] > *:nth-child(4) { animation-delay: 300ms; } [data-animate-stagger] > *:nth-child(5) { animation-delay: 400ms; } [data-animate-stagger] > *:nth-child(6) { animation-delay: 500ms; } .holographic-btn, .contact__submit-btn, .scholarship__submit-btn, .nav__donate-btn, .home__instagram-link, .footer__donate-btn { transition: transform 300ms ease, box-shadow 300ms ease; } .contact__submit-btn:hover, .scholarship__submit-btn:hover, .nav__donate-btn:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0,231,255,0.4), 0 0 40px rgba(148,0,255,0.2); } .nav__link { transition: color 200ms ease, text-shadow 200ms ease; position: relative; } .nav__link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--holo-blue-solid), var(--holo-pink-solid)); transition: width 250ms ease, left 250ms ease; box-shadow: 0 0 8px rgba(0,231,255,0.3); } .nav__link:hover::after { width: 80%; left: 10%; } .project-card, .program-card, .workshop-card, .team-card, .artist-card, .home__pillar, .holographic-card { transition: transform 300ms ease, box-shadow 300ms ease; } .project-card:hover, .program-card:hover, .workshop-card:hover, .team-card:hover, .artist-card:hover { transform: translateY(-6px); box-shadow: 0 0 20px rgba(0,231,255,0.15), 0 0 40px rgba(255,0,231,0.1), 0 8px 32px rgba(31,38,135,0.37); } .home__pillar:hover { transform: translateY(-4px); box-shadow: 0 0 15px rgba(0,231,255,0.15), 0 8px 32px rgba(31,38,135,0.37); } .project-card__image, .program-card__image, .workshop-card__image, .team-card__photo, .artist-card__photo { transition: transform 500ms ease; } .project-card:hover .project-card__image, .program-card:hover .program-card__image, .workshop-card:hover .workshop-card__image, .team-card:hover .team-card__photo, .artist-card:hover .artist-card__photo { transform: scale(1.05); } .nav__hamburger-line { transition: transform 300ms ease, opacity 300ms ease; } .contact__field-input, .scholarship__field-input, .holographic-input { transition: border-color 250ms ease, box-shadow 250ms ease; } .contact__field-input:focus, .scholarship__field-input:focus, .holographic-input:focus { box-shadow: 0 0 0 3px rgba(0,231,255,0.15), 0 0 20px rgba(0,231,255,0.1); } .faq__question-icon { transition: transform 300ms ease; } .about__subnav-link, .team__subnav-link, .projects__subnav-link { transition: color 250ms ease, border-color 250ms ease; } .footer__social-icon-btn { transition: all 300ms ease; } } @media (prefers-reduced-motion: reduce) { [data-animate].is-visible { opacity: 1; transition: none; animation: none; } .scanline::after { animation: none; } .holo-loader__spinner { animation: none; } .holographic-card::before, .holographic-btn::before, .project-card::before, .program-card::before, .workshop-card::before, .artist-card::before, .home__pillar::before { display: none; } }