/* ============================================================ Goqua Animations Load order: style.css → overrides.css → animations.css → mobile-fixes.css All motion is gated by prefers-reduced-motion at the bottom. ============================================================ */ /* ── Keyframes ──────────────────────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-left { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-right { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes slide-up-soft { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Hero visual float after load */ @keyframes float-visual { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-4deg); } } /* Eyebrow line grow */ @keyframes line-grow { from { width: 0; } to { width: 25px; } } /* Cursor blink */ @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Tech pill shimmer sweep */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* WhatsApp widget bounce-in */ @keyframes widget-enter { 0% { opacity: 0; transform: scale(0.5) translateY(20px); } 65% { transform: scale(1.12) translateY(-4px); } 85% { transform: scale(0.96) translateY(2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Stat counter tick */ @keyframes count-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Ripple for buttons */ @keyframes ripple-spread { from { transform: scale(0); opacity: 0.45; } to { transform: scale(4); opacity: 0; } } /* Gradient border pulse on cards */ @keyframes border-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(19,126,103,0); } 50% { box-shadow: 0 0 0 4px rgba(19,126,103,0.12); } } /* ── Page-load: body ready class ────────────────────────────── */ /* JS adds .page-loaded to after DOMContentLoaded */ /* Header slides down */ .page-loaded .site-header { animation: fade-down 0.55s cubic-bezier(0.22,1,0.36,1) both; } /* ── Hero — staggered load sequence ─────────────────────────── */ /* Safety: if JS fails/is slow, content auto-shows after 1.5s */ .hero-eyebrow { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .hero-heading { opacity: 0; animation: fade-up 0.65s ease 1.5s both; } .hero-copy-p { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .hero-lead { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .hero-highlights { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .hero-actions { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .hero-proof { opacity: 0; animation: fade-up 0.55s ease 1.5s both; } .hero-visual { opacity: 0; animation: fade-left 0.85s ease 1.5s both; } .hero-visual-panel { opacity: 0; animation: fade-left 0.85s ease 1.5s both; } /* JS path: tighter, staggered timings */ .page-loaded .hero-eyebrow { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.10s both; } .page-loaded .hero-heading { animation: fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.22s both; } .page-loaded .hero-copy-p { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.36s both; } .page-loaded .hero-lead { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.30s both; } .page-loaded .hero-highlights { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.44s both; } .page-loaded .hero-actions { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.56s both; } .page-loaded .hero-proof { animation: fade-up 0.55s cubic-bezier(0.22,1,0.36,1) 0.68s both; } .page-loaded .hero-visual { animation: fade-left 0.85s cubic-bezier(0.22,1,0.36,1) 0.35s both; } .page-loaded .hero-visual-panel { animation: fade-left 0.85s cubic-bezier(0.22,1,0.36,1) 0.35s both; } /* Floating visual — kicks in after load animation finishes */ .page-loaded .hero-visual img { animation: rise 0.9s cubic-bezier(0.22,1,0.36,1) 0.25s both, float-visual 6s ease-in-out 1.2s infinite; } /* Eyebrow line animation */ .page-loaded .hero-eyebrow span, .page-loaded .career-hero-copy .eyebrow span { animation: line-grow 0.5s ease 0.55s both; } /* ── Careers hero stagger ───────────────────────────────────── */ .career-eyebrow { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .career-heading { opacity: 0; animation: fade-up 0.65s ease 1.5s both; } .career-copy-p { opacity: 0; animation: fade-up 0.6s ease 1.5s both; } .career-link { opacity: 0; animation: fade-up 0.55s ease 1.5s both; } .career-art-wrap { opacity: 0; animation: fade-left 0.85s ease 1.5s both; } .page-loaded .career-eyebrow { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.10s both; } .page-loaded .career-heading { animation: fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.22s both; } .page-loaded .career-copy-p { animation: fade-up 0.6s cubic-bezier(0.22,1,0.36,1) 0.36s both; } .page-loaded .career-link { animation: fade-up 0.55s cubic-bezier(0.22,1,0.36,1) 0.48s both; } .page-loaded .career-art-wrap { animation: fade-left 0.85s cubic-bezier(0.22,1,0.36,1) 0.30s both; } /* ── Scroll reveal — base state ─────────────────────────────── */ /* Safety fallback: auto-show after 2s if JS observer never fires */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; animation: fade-up 0.7s ease 2s both; } [data-reveal-left] { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s ease, transform 0.65s ease; animation: fade-right 0.7s ease 2s both; } [data-reveal-right] { opacity: 0; transform: translateX(28px); transition: opacity 0.65s ease, transform 0.65s ease; animation: fade-left 0.7s ease 2s both; } [data-reveal-scale] { opacity: 0; transform: scale(0.92); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.56,0.64,1); animation: scale-in 0.6s ease 2s both; } /* JS path: observer adds .is-visible */ [data-reveal].is-visible, [data-reveal-left].is-visible, [data-reveal-right].is-visible, [data-reveal-scale].is-visible { opacity: 1; transform: none; animation: none; } /* Stagger delays applied via JS (--stagger CSS var) */ [data-reveal], [data-reveal-left], [data-reveal-right], [data-reveal-scale] { transition-delay: var(--stagger, 0ms); } /* ── Service cards ──────────────────────────────────────────── */ .service-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; } .service-card:hover { transform: translateY(-8px) scale(1.015); border-color: rgba(19,126,103,0.3); animation: border-pulse 2s ease-in-out infinite; } .service-card > i { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .service-card:hover > i { transform: scale(1.2) rotate(-6deg); } /* ── Industry cards ─────────────────────────────────────────── */ .industry-card { transition: transform 0.25s ease, box-shadow 0.25s ease; will-change: transform; } .industry-card:hover { transform: translateY(-7px) scale(1.012); } .industry-icon { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .industry-card:hover .industry-icon { transform: scale(1.18) rotate(-8deg); } /* ── Tech pills shimmer ─────────────────────────────────────── */ .tech-pills span { position: relative; overflow: hidden; transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; } .tech-pills span:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 12px rgba(19,126,103,0.18); background: #e0f5e9; color: #0e5c3a; } .tech-pills span::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60% ); background-size: 200% 100%; opacity: 0; transition: opacity 0.2s; } .tech-pills span:hover::after { opacity: 1; animation: shimmer 0.6s ease forwards; } /* ── Engagement cards ───────────────────────────────────────── */ .engagement-grid article { transition: transform 0.25s ease, box-shadow 0.25s ease; will-change: transform; } .engagement-grid article:hover { transform: translateY(-7px); } .engagement-grid i { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .engagement-grid article:hover i { transform: scale(1.2) rotate(-5deg); } /* ── Project steps — counter highlight ─────────────────────── */ .project-steps article { transition: background 0.2s ease; } .project-steps article:hover { background: rgba(19,126,103,0.04); } .project-steps b { transition: color 0.2s ease, letter-spacing 0.2s ease; } .project-steps article:hover b { letter-spacing: 0.06em; } /* ── FAQ accordion ──────────────────────────────────────────── */ .faq-list details p { overflow: hidden; animation: fade-up 0.3s ease both; } /* ── WhatsApp widget entrance ───────────────────────────────── */ .whatsapp-widget { animation: widget-enter 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.4s both; } /* ── Button ripple ──────────────────────────────────────────── */ .button { position: relative; overflow: hidden; } .button-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); width: 10px; height: 10px; pointer-events: none; animation: ripple-spread 0.55s ease-out forwards; transform-origin: center; } /* ── Typing cursor on hero ──────────────────────────────────── */ .typed-cursor { display: inline-block; width: 3px; height: 0.85em; background: currentColor; margin-left: 3px; vertical-align: middle; border-radius: 2px; animation: cursor-blink 1s step-end infinite; } /* ── Section headings — animated underline on scroll ────────── */ .section-intro h2, .architecture h2, .contact h2, .application-intro h2, .career-hero h1, .journey h2 { position: relative; } .section-intro h2::after, .application-intro h2::after, .journey h2::after { content: ''; position: absolute; bottom: -6px; left: 0; height: 3px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--blue, #137e67), transparent); transition: width 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s; } .is-visible .section-intro h2::after, .section-intro.is-visible h2::after, .is-visible.section-intro h2::after { width: 60px; } /* ── Careers: value cards ───────────────────────────────────── */ .value-grid article { transition: transform 0.25s ease, box-shadow 0.25s ease; } .value-grid article:hover { transform: translateY(-7px); } .value-grid i { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .value-grid article:hover i { transform: scale(1.2) rotate(-6deg); } /* ── Careers: role grid ─────────────────────────────────────── */ .role-grid article { transition: background 0.2s ease, transform 0.2s ease; } .role-grid article:hover { transform: translateX(4px); } .role-grid i { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .role-grid article:hover i { transform: scale(1.18) rotate(-5deg); } /* ── Careers: journey list ──────────────────────────────────── */ .journey li { transition: background 0.2s ease, padding-left 0.2s ease; } .journey li:hover { padding-left: 8px; background: rgba(19,126,103,0.03); border-radius: 8px; } /* ── Careers: signal cards ──────────────────────────────────── */ .signal-grid article { transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .signal-grid article:hover { transform: translateY(-6px); background: rgba(255,255,255,0.14); border-color: rgba(198,242,219,0.5); } .signal-icon { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } .signal-grid article:hover .signal-icon { transform: scale(1.18) rotate(-5deg); } /* ─── Blog marquee cards ─────────────────────────────────────── */ .blog-marquee-card:hover .blog-marquee-card__icon i { transform: scale(1.08); } /* ── Nav link active indicator ──────────────────────────────── */ .site-nav > a { transition: color 0.2s ease; } .site-nav > a.active { color: var(--blue, #137e67); } /* ── Footer: transition is handled via [data-reveal] ─────────── */ /* No extra rule needed — footer uses standard data-reveal path. */ /* ── About image note slide ─────────────────────────────────── */ .image-note { transition: transform 0.3s ease, box-shadow 0.3s ease; } .about-image:hover .image-note { transform: translate(4px, 4px); box-shadow: 0 18px 40px rgba(6,26,57,0.22); } .about-image img { transition: transform 0.35s ease; } .about-image:hover img { transform: scale(1.02); } /* ── Art ring spin — already in style.css, just add hover pause */ .architecture-art:hover .art-ring { animation-play-state: paused; } .journey-art:hover .art-orbit { animation-play-state: paused; } /* ── Techstack group hover ──────────────────────────────────── */ .techstack-group { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .techstack-group:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(19,126,103,0.10); border-color: rgba(19,126,103,0.3); } /* ── Contact form field focus ───────────────────────────────── */ .contact-form input, .contact-form textarea, .contact-form select { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { box-shadow: 0 2px 0 0 var(--blue, #137e67); } /* ── Stat counter (hero proof pills) ────────────────────────── */ .hero-proof span { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, color 0.2s ease; } .hero-proof span:hover { transform: translateY(-3px) scale(1.06); background: rgba(19,126,103,0.08); } /* ── Application card ───────────────────────────────────────── */ .application-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .application-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(7,56,117,0.10); } /* ── Scroll progress bar ─────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--blue, #137e67), #5dcd2c, var(--gold, #e8b923)); z-index: 30; transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* ── Skip link (a11y) ───────────────────────────────────────── */ .skip-link { position: fixed; top: -100%; left: 16px; z-index: 200; padding: 10px 18px; border-radius: 8px; background: var(--blue, #137e67); color: #fff; font: 700 13px Manrope, sans-serif; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 16px; } /* ══════════════════════════════════════════════════════════════ REDUCED MOTION — all animations disabled ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Ensure hero content is visible immediately */ .hero-eyebrow, .hero-heading, .hero-lead, .hero-copy-p, .hero-highlights, .hero-actions, .hero-proof, .hero-visual, .hero-visual-panel, .career-eyebrow, .career-heading, .career-copy-p, .career-link, .career-art-wrap { opacity: 1; transform: none; } /* Ensure all reveal items are visible */ [data-reveal], [data-reveal-left], [data-reveal-right], [data-reveal-scale] { opacity: 1 !important; transform: none !important; transition: none !important; } .whatsapp-widget { animation: none; opacity: 1; } .page-loaded .hero-visual img { animation: none; } .scroll-progress { display: none; } }