/* ========================================================= GRAPHIADDA GLOBAL ANIMATION SHEET ========================================================= */ /* ========================================================= BASE TRANSITIONS ========================================================= */ a, button, input, textarea, select, .card, .course-card, .language-card, .quick-card, .value-card, .nav-link { transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= FADE IN ========================================================= */ .fade-in { animation: fadeIn 0.65s ease both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ========================================================= FADE UP ========================================================= */ .fade-up { animation: fadeUp 0.65s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= FADE DOWN ========================================================= */ .fade-down { animation: fadeDown 0.65s ease both; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= SCALE IN ========================================================= */ .scale-in { animation: scaleIn 0.5s ease both; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } /* ========================================================= SLIDE LEFT ========================================================= */ .slide-left { animation: slideLeft 0.65s ease both; } @keyframes slideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================= SLIDE RIGHT ========================================================= */ .slide-right { animation: slideRight 0.65s ease both; } @keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================= FLOAT ========================================================= */ .float { animation: floating 4s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ========================================================= GENTLE FLOAT ========================================================= */ .float-gentle { animation: gentleFloat 6s ease-in-out infinite; } @keyframes gentleFloat { 0%, 100% { transform: translate3d( 0, 0, 0 ); } 50% { transform: translate3d( 0, -5px, 0 ); } } /* ========================================================= PULSE ========================================================= */ .pulse { animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.035); opacity: .9; } } /* ========================================================= GLOW PULSE ========================================================= */ .glow-pulse { animation: glowPulse 2.8s ease-in-out infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 rgba( 109, 93, 252, 0 ); } 50% { box-shadow: 0 0 28px rgba( 109, 93, 252, .16 ); } } /* ========================================================= ROTATE ========================================================= */ .rotate { animation: rotate 1.2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= LOADING SPINNER ========================================================= */ .loading-spinner { width: 22px; height: 22px; border: 3px solid rgba( 255, 255, 255, .10 ); border-top-color: #9b8dff; border-radius: 50%; animation: spinner .8s linear infinite; } @keyframes spinner { to { transform: rotate( 360deg ); } } /* ========================================================= SHIMMER ========================================================= */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, .07 ), transparent ); transform: skewX(-18deg); animation: shimmer 2.4s ease-in-out infinite; pointer-events: none; } @keyframes shimmer { 0% { left: -120%; } 55% { left: 120%; } 100% { left: 120%; } } /* ========================================================= BUTTON HOVER ========================================================= */ .hover-lift:hover { transform: translateY(-3px); } .hover-scale:hover { transform: scale(1.02); } .hover-glow:hover { box-shadow: 0 14px 35px rgba( 109, 93, 252, .14 ); } /* ========================================================= CARD HOVER ========================================================= */ .card-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .card-hover:hover { transform: translateY(-4px); border-color: rgba( 127, 112, 255, .22 ); box-shadow: 0 20px 45px rgba( 0, 0, 0, .18 ); } /* ========================================================= LANGUAGE CARD HOVER ========================================================= */ .language-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .language-card:hover { transform: translateY(-3px); } /* ========================================================= COURSE CARD HOVER ========================================================= */ .course-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .course-card:hover { transform: translateY(-4px); } /* ========================================================= NAV LINK UNDERLINE ========================================================= */ .nav-underline { position: relative; } .nav-underline::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 1px; background: currentColor; transform: translateX(-50%); transition: width .2s ease; } .nav-underline:hover::after, .nav-underline.active::after { width: 70%; } /* ========================================================= TEXT REVEAL ========================================================= */ .reveal-text { animation: revealText .8s ease both; } @keyframes revealText { from { opacity: 0; letter-spacing: .08em; transform: translateY(8px); } to { opacity: 1; letter-spacing: normal; transform: translateY(0); } } /* ========================================================= HERO ORB ANIMATION ========================================================= */ .hero-orb { animation: heroOrb 8s ease-in-out infinite; } @keyframes heroOrb { 0%, 100% { transform: translate3d( 0, 0, 0 ) scale(1); } 33% { transform: translate3d( 18px, -12px, 0 ) scale(1.04); } 66% { transform: translate3d( -15px, 14px, 0 ) scale(.98); } } /* ========================================================= STAGGERED ANIMATION HELPERS ========================================================= */ .delay-1 { animation-delay: .08s; } .delay-2 { animation-delay: .16s; } .delay-3 { animation-delay: .24s; } .delay-4 { animation-delay: .32s; } .delay-5 { animation-delay: .40s; } .delay-6 { animation-delay: .48s; } /* ========================================================= PAGE ENTRY ========================================================= */ .page-entry { animation: pageEntry .7s cubic-bezier( .22, 1, .36, 1 ) both; } @keyframes pageEntry { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= SUCCESS POP ========================================================= */ .success-pop { animation: successPop .45s ease both; } @keyframes successPop { 0% { opacity: 0; transform: scale(.92); } 70% { opacity: 1; transform: scale(1.03); } 100% { transform: scale(1); } } /* ========================================================= ERROR SHAKE ========================================================= */ .error-shake { animation: errorShake .4s ease; } @keyframes errorShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } /* ========================================================= FOCUS ANIMATION ========================================================= */ .input-focus { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .input-focus:focus { transform: translateY(-1px); } /* ========================================================= SLOW BACKGROUND MOTION ========================================================= */ .background-drift { animation: backgroundDrift 14s ease-in-out infinite; } @keyframes backgroundDrift { 0%, 100% { transform: translate3d( 0, 0, 0 ); } 50% { transform: translate3d( 10px, -15px, 0 ); } } /* ========================================================= SCROLL REVEAL SUPPORT ========================================================= */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================= REDUCED MOTION ========================================================= */ @media ( prefers-reduced-motion: reduce ) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ========================================================= MOBILE OPTIMIZATION ========================================================= */ @media (max-width: 700px) { .hover-lift:hover, .hover-scale:hover, .card-hover:hover, .language-card:hover, .course-card:hover { transform: translateY(-2px); } } /* ========================================================= ANIMATION UTILITY ========================================================= */ .animate-on-load { animation: fadeUp .65s ease both; } .animate-on-load:nth-child(1) { animation-delay: .05s; } .animate-on-load:nth-child(2) { animation-delay: .10s; } .animate-on-load:nth-child(3) { animation-delay: .15s; } .animate-on-load:nth-child(4) { animation-delay: .20s; } .animate-on-load:nth-child(5) { animation-delay: .25s; } .animate-on-load:nth-child(6) { animation-delay: .30s; } .animate-on-load:nth-child(7) { animation-delay: .35s; } .animate-on-load:nth-child(8) { animation-delay: .40s; }