/* ============================================================ PersonalStudy — Landing Page UX Enhancements (Priority 2) Scroll animations · Counter animations · Card interactions Add in landing.php : ============================================================ */ /* ============================================================ SCROLL-REVEAL ANIMATIONS Elements fade/slide in when they enter the viewport. Applied via .reveal class + JS IntersectionObserver. ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-left.revealed { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-right.revealed { opacity: 1; transform: translateX(0); } /* Staggered children — add .reveal-stagger to parent */ .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-stagger.revealed > * { opacity: 1; transform: translateY(0); } .reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.15s; } .reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.25s; } .reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.35s; } .reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.45s; } .reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.55s; } /* ============================================================ HERO SECTION ENHANCEMENTS Typing effect, floating elements, parallax tilt ============================================================ */ /* Animated gradient text shimmer */ @keyframes gradientShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .text-gradient-animated { background: linear-gradient(135deg, #6C63FF, #FF6584, #00C9A7, #6C63FF); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShimmer 4s ease infinite; } /* Hero entry animation */ @keyframes heroSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .ps-hero-title { animation: heroSlideUp 0.8s ease forwards; } .ps-hero-subtitle { animation: heroSlideUp 0.8s 0.15s ease forwards; opacity: 0; } .ps-hero-cta { animation: heroSlideUp 0.8s 0.3s ease forwards; opacity: 0; } .ps-hero-stats { animation: heroSlideUp 0.8s 0.45s ease forwards; opacity: 0; } /* Hero stat counter animation container */ .stat-number[data-count] { display: inline-block; } @keyframes countPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .stat-number.counting { animation: countPulse 0.3s ease; } /* ============================================================ FEATURE CARDS — Enhanced hover interactions ============================================================ */ .feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(108, 99, 255, 0.12); } .feature-card .feature-icon { transition: transform 0.3s var(--fun-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)); } .feature-card:hover .feature-icon { transform: scale(1.15) rotate(-5deg); } /* ============================================================ COURSE CARDS — Lift, glow, and badge pulse ============================================================ */ .course-card { transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; position: relative; } .course-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(108, 99, 255, 0.03), transparent); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .course-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 48px rgba(108, 99, 255, 0.12); } .course-card:hover::before { opacity: 1; } .course-card .course-cta i { transition: transform 0.3s ease; } .course-card:hover .course-cta i { transform: translateX(5px); } /* Badge pulse on hover */ .course-badge { transition: transform 0.3s ease; } .course-card:hover .course-badge { animation: badgePulse 1s ease infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ============================================================ STEP CARDS (How It Works) — Number pop ============================================================ */ .step-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .step-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); } .step-card .step-number { transition: transform 0.3s var(--fun-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)), background 0.3s ease; } .step-card:hover .step-number { transform: scale(1.2); background: var(--primary, #6C63FF); color: white; } /* ============================================================ MOBILE ENHANCEMENTS ============================================================ */ @media (max-width: 767.98px) { /* Reduce animation distances on mobile */ .reveal { transform: translateY(20px); } .reveal-left { transform: translateX(-20px); } .reveal-right { transform: translateX(20px); } /* Touch-friendly course cards */ .course-card:active { transform: scale(0.98); } /* Compact feature cards */ .feature-card { text-align: left; display: flex; gap: 16px; align-items: flex-start; } .feature-card .feature-icon { flex-shrink: 0; } } /* ============================================================ REDUCED MOTION — Respect user preference ============================================================ */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-stagger > * { opacity: 1; transform: none; transition: none; } .ps-hero-title, .ps-hero-subtitle, .ps-hero-cta, .ps-hero-stats { animation: none; opacity: 1; } .text-gradient-animated { animation: none; } }