/* ============================================================ Uzair Hassan — ANIMATIONS LAYER Add after style.css in ============================================================ */ /* ────────────────────────────────────────────── 1. CUSTOM CURSOR GLOW ────────────────────────────────────────────── */ .cursor-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform .1s, background .3s, width .3s, height .3s; mix-blend-mode: difference; } .cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(252, 163, 17, .5); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: transform .18s ease, width .35s ease, height .35s ease, border-color .35s ease, opacity .35s ease; } body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width: 56px; height: 56px; border-color: var(--accent); opacity: .7; } /* ────────────────────────────────────────────── 2. CANVAS PARTICLE LAYER (hero) ────────────────────────────────────────────── */ #particleCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ────────────────────────────────────────────── 3. TYPEWRITER CURSOR ON HERO HEADLINE ────────────────────────────────────────────── */ .typewriter-cursor { display: inline-block; width: 3px; height: 1em; background: var(--accent); margin-left: 4px; vertical-align: middle; border-radius: 2px; animation: blink .75s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ────────────────────────────────────────────── 4. STAGGER REVEAL — clip-path wipe ────────────────────────────────────────────── */ .reveal { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.77, 0, .18, 1); } .reveal.visible { clip-path: inset(0 0% 0 0); } /* ────────────────────────────────────────────── 5. COUNTER NUMBER ANIMATION ────────────────────────────────────────────── */ .count-num { display: inline-block; transition: transform .1s; } /* ────────────────────────────────────────────── 6. SHIMMER / SKELETON on tech badges (idle) ────────────────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .tech-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(252, 163, 17, .08) 50%, transparent 100%); background-size: 400px 100%; animation: shimmer 2.4s ease infinite; border-radius: inherit; pointer-events: none; } .tech-badge { position: relative; overflow: hidden; } /* ────────────────────────────────────────────── 7. MAGNETIC BUTTON EFFECT (JS-driven, via inline style) ────────────────────────────────────────────── */ .btn { will-change: transform; } /* ────────────────────────────────────────────── 8. GRADIENT BORDER GLOW ON CARDS (why-card, service-item) ────────────────────────────────────────────── */ .why-card, .process-step, .blog-card { position: relative; isolation: isolate; } .why-card::before, .blog-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from var(--glow-angle, 0deg), transparent 0%, var(--accent) 20%, transparent 40%); opacity: 0; z-index: -1; transition: opacity .4s; } .why-card:hover::before, .blog-card:hover::before { opacity: 1; animation: spin-border 3s linear infinite; } @keyframes spin-border { to { --glow-angle: 360deg; } } @property --glow-angle { syntax: ''; inherits: false; initial-value: 0deg; } /* ────────────────────────────────────────────── 9. HERO HEADLINE — word-by-word pop-in ────────────────────────────────────────────── */ .hero-word { display: inline-block; opacity: 0; transform: translateY(24px) rotate(2deg); transition: opacity .5s ease, transform .5s ease; } .hero-word.popped { opacity: 1; transform: translateY(0) rotate(0deg); } /* ────────────────────────────────────────────── 10. SCROLL PROGRESS BAR ────────────────────────────────────────────── */ #scrollBar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), #ff7a00); z-index: 9999; transition: width .1s linear; border-radius: 0 2px 2px 0; } /* ────────────────────────────────────────────── 11. SECTION ENTRY — slide-in from left / right ────────────────────────────────────────────── */ .slide-left { opacity: 0; transform: translateX(-60px); transition: opacity .8s ease, transform .8s ease; } .slide-right { opacity: 0; transform: translateX(60px); transition: opacity .8s ease, transform .8s ease; } .slide-left.visible, .slide-right.visible { opacity: 1; transform: translateX(0); } /* ────────────────────────────────────────────── 12. GLITCH TEXT on logo hover ────────────────────────────────────────────── */ .logo:hover .logo-text { animation: glitch .4s steps(2) forwards; } @keyframes glitch { 0% { clip-path: inset(0 0 80% 0); transform: translate(-4px, 0); color: var(--accent); } 20% { clip-path: inset(50% 0 30% 0); transform: translate(4px, 0); } 40% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 0); color: var(--text); } 60% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 0); } 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); } } /* ────────────────────────────────────────────── 13. FLOATING ORB / AURORA BACKGROUND LAYERS ────────────────────────────────────────────── */ .aurora { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: drift 12s ease-in-out infinite alternate; } .aurora-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(252, 163, 17, .12), transparent 65%); top: -120px; right: 5%; animation-delay: 0s; } .aurora-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(252, 80, 17, .08), transparent 65%); bottom: 5%; left: 2%; animation-delay: -4s; } .aurora-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(252, 163, 17, .07), transparent 65%); top: 40%; left: 40%; animation-delay: -8s; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 20px) scale(1.1); } } /* ────────────────────────────────────────────── 14. TILT CARD (JS-driven — applied via inline transform) ────────────────────────────────────────────── */ .tilt { transform-style: preserve-3d; transition: transform .1s ease; will-change: transform; } /* ────────────────────────────────────────────── 15. HERO STATS — pop-scale on count complete ────────────────────────────────────────────── */ .stat strong { display: inline-block; transition: transform .15s ease; } .stat strong.pop { animation: popScale .35s cubic-bezier(.34, 1.56, .64, 1); } @keyframes popScale { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ────────────────────────────────────────────── 16. NAV LINK UNDERLINE SLIDE ────────────────────────────────────────────── */ .fullnav .nav-link { position: relative; } .fullnav .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 3px; background: var(--accent); border-radius: 2px; transition: width .3s ease; } .fullnav .nav-link:hover::after { width: 100%; } /* ────────────────────────────────────────────── 17. LOGO ICON SPIN on hover ────────────────────────────────────────────── */ .logo svg { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .logo:hover svg { transform: rotate(360deg) scale(1.1); } /* ────────────────────────────────────────────── 18. FAQ item open/close ICON rotation (already handled by CSS ::after, boosted here) ────────────────────────────────────────────── */ .faq-q { transition: color .25s; } .faq-item.open .faq-q { color: var(--accent); } /* ────────────────────────────────────────────── 19. TESTIMONIAL CARD — subtle lift on hover ────────────────────────────────────────────── */ .testimonial-card { transition: transform .35s cubic-bezier(.25, .8, .25, 1), border-color .35s, box-shadow .35s; } .testimonial-card:hover { transform: translateY(-6px); border-color: rgba(252, 163, 17, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } /* ────────────────────────────────────────────── 20. SECTION LABEL — animated accent line ────────────────────────────────────────────── */ .section-label { display: inline-flex; align-items: center; gap: 10px; } .section-label::before { content: ''; display: inline-block; width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: width .6s .2s ease; } .section-label.visible::before, .section-label.line-grow::before { width: 28px; } /* ────────────────────────────────────────────── 21. PROJECT IMAGE REVEAL on scroll ────────────────────────────────────────────── */ .project-image { overflow: hidden; border-radius: var(--radius-lg); } .project-image img { transform-origin: center; transition: transform .8s cubic-bezier(.25, .8, .25, 1), opacity .6s ease; opacity: 0; } .project-image.visible img { opacity: 1; } /* ────────────────────────────────────────────── 22. WHY-ICON spin pulse on card hover ────────────────────────────────────────────── */ .why-card:hover .why-icon { animation: iconBounce .5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes iconBounce { 0% { transform: scale(1) rotate(0deg); } 40% { transform: scale(1.4) rotate(-8deg); } 70% { transform: scale(.9) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } } /* ────────────────────────────────────────────── 23. CHAT WIDGET — pulse ring on toggle ────────────────────────────────────────────── */ .chat-toggle::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: chatPulse 2.5s ease-in-out infinite; } @keyframes chatPulse { 0% { transform: scale(.9); opacity: .7; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } /* ────────────────────────────────────────────── 24. PROCESS STEP — connecting line between cards ────────────────────────────────────────────── */ .process-step::after { content: ''; position: absolute; top: 36px; right: -17px; width: 34px; height: 2px; background: linear-gradient(90deg, #FCA31140, transparent); pointer-events: none; } .process-step:nth-child(3n)::after { display: none; } /* ────────────────────────────────────────────── 25. HERO SCROLL LINE — animated dot ────────────────────────────────────────────── */ .hero-scroll-indicator::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-bottom: 4px; animation: scrollDot 2s ease-in-out infinite; } @keyframes scrollDot { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .4; } } /* ────────────────────────────────────────────── 26. BUTTON RIPPLE effect (JS injects .ripple) ────────────────────────────────────────────── */ .btn { overflow: hidden; } .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .25); transform: scale(0); animation: rippleGrow .6s linear; pointer-events: none; } @keyframes rippleGrow { to { transform: scale(4); opacity: 0; } }