/* ============================================ SmartB Academy - Animations (v3 GSAP) ============================================ */ /* Scroll reveal - GSAP sets initial state via JS. CSS just provides the no-JS / GSAP-fail fallback. */ .reveal { visibility: visible; } /* If GSAP loaded, it adds .gsap-ready to and controls opacity/transform. If GSAP fails after 2s, .no-gsap is added and reveals stay visible. */ html.no-gsap .reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; } html.no-gsap .curtain { display: none; } html.no-gsap .tilt-glow { display: none; } /* Card hover lift */ .card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-hover); } /* Link arrow */ .arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--blue); } .arrow-link svg { width: 16px; height: 16px; transition: transform 0.2s; } .arrow-link:hover svg { transform: translateX(3px); } /* === SCROLL PROGRESS BAR === */ .scroll-progress { position: fixed; top: 64px; left: 0; width: 100%; height: 3px; z-index: 999; background: transparent; pointer-events: none; } .scroll-progress-fill { height: 100%; width: 0; background: var(--grad); border-radius: 0 2px 2px 0; } @media (min-width: 768px) { .scroll-progress { top: 72px; } } /* === MARQUEE (credentials strip) === */ .marquee { overflow: hidden; width: 100%; } .marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; } .marquee-item { display: inline-flex; align-items: center; gap: 16px; padding: 0 24px; white-space: nowrap; } .marquee-logo { height: 36px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: filter 0.3s ease; } .marquee-logo:hover { filter: grayscale(0%) opacity(1); } .marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; } @media (min-width: 768px) { .marquee-item { padding: 0 32px; } .marquee-logo { height: 44px; } } /* === 3D TILT GLOW (course cards) === */ .tilt-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .course-card:hover .tilt-glow { opacity: 1; } /* === CURTAIN REVEAL === */ .curtain-wrap { position: relative; overflow: hidden; } .curtain { position: absolute; inset: 0; background: var(--grad); z-index: 2; transform-origin: right center; pointer-events: none; border-radius: inherit; } /* === HERO / CTA BLOBS === */ .hero-blobs, .cta-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; } .blob--blue { width: 220px; height: 220px; background: rgba(100, 180, 255, 0.3); top: 15%; left: 10%; } .blob--purple { width: 200px; height: 200px; background: rgba(200, 120, 255, 0.25); bottom: 10%; right: 15%; } @media (min-width: 768px) { .blob--blue { width: 300px; height: 300px; } .blob--purple { width: 260px; height: 260px; } } /* === FILM GRAIN === */ .grain-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9998; mix-blend-mode: soft-light; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .card-lift { transition: none; } .card-lift:hover { transform: none; } .scroll-progress { display: none; } .marquee-track { animation: none !important; } .hero { animation: none !important; background-size: 100% 100% !important; } #hero-particles { display: none; } .grain-overlay { display: none; } .blob { display: none; } .curtain { display: none; } .tilt-glow { display: none; } html { scroll-behavior: auto; } }