/* =========================================================================== Motion layer for project and service pages. Safety model: - Everything is visible by default. The hidden state only applies once the script adds .js-anim to , so a JS failure or a crawler still sees the full page. - The whole file is disabled under prefers-reduced-motion. =========================================================================== */ /* --- Reading progress ---------------------------------------------------- */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #137cc5, #4aa3e0); z-index: 9999; pointer-events: none; } /* --- Scroll reveal ------------------------------------------------------- */ .js-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .js-anim .reveal.is-in { opacity: 1; transform: none; } /* stagger children of a grid */ .js-anim .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .js-anim .reveal-stagger.is-in > * { opacity: 1; transform: none; } .js-anim .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.00s; } .js-anim .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; } .js-anim .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.14s; } .js-anim .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.21s; } .js-anim .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; } .js-anim .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.35s; } /* --- Running arrow down the process timeline ----------------------------- */ .svc-steps { position: relative; } .svc-step-num { position: relative; overflow: visible; } /* the arrow that travels down the connector once the steps are in view */ .js-anim .svc-steps.is-in .svc-step:not(:last-child)::after { content: ''; position: absolute; left: 27px; top: 62px; width: 10px; height: 10px; border-right: 2px solid #137cc5; border-bottom: 2px solid #137cc5; transform: rotate(45deg); opacity: 0; animation: arrowRun 2.4s ease-in-out infinite; } .js-anim .svc-steps.is-in .svc-step:nth-child(2)::after { animation-delay: 0.3s; } .js-anim .svc-steps.is-in .svc-step:nth-child(3)::after { animation-delay: 0.6s; } .js-anim .svc-steps.is-in .svc-step:nth-child(4)::after { animation-delay: 0.9s; } .js-anim .svc-steps.is-in .svc-step:nth-child(5)::after { animation-delay: 1.2s; } @keyframes arrowRun { 0% { opacity: 0; transform: translateY(0) rotate(45deg); } 25% { opacity: 1; } 75% { opacity: 0.15; } 100% { opacity: 0; transform: translateY(34px) rotate(45deg); } } /* the step marker pulses once as it enters */ .js-anim .svc-steps.is-in .svc-step-num { animation: numPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .js-anim .svc-steps.is-in .svc-step:nth-child(2) .svc-step-num { animation-delay: 0.10s; } .js-anim .svc-steps.is-in .svc-step:nth-child(3) .svc-step-num { animation-delay: 0.20s; } .js-anim .svc-steps.is-in .svc-step:nth-child(4) .svc-step-num { animation-delay: 0.30s; } .js-anim .svc-steps.is-in .svc-step:nth-child(5) .svc-step-num { animation-delay: 0.40s; } @keyframes numPop { from { transform: scale(0.82); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* --- Marquee: a running strip of the stack ------------------------------- */ .tech-marquee { position: relative; overflow: hidden; margin: 40px 0 0; padding: 18px 0; border-top: 1px solid rgba(19, 124, 197, 0.12); border-bottom: 1px solid rgba(19, 124, 197, 0.12); background: linear-gradient(180deg, #ffffff, #fbfdff); border-radius: 14px; } .tech-marquee::before, .tech-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; } .tech-marquee::before { left: 0; background: linear-gradient(90deg, #fbfdff, transparent); } .tech-marquee::after { right: 0; background: linear-gradient(270deg, #fbfdff, transparent); } .tech-marquee-track { display: flex; width: max-content; gap: 12px; animation: marquee 34s linear infinite; } .tech-marquee:hover .tech-marquee-track { animation-play-state: paused; } .tech-marquee-item { flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; background: rgba(19, 124, 197, 0.07); border: 1px solid rgba(19, 124, 197, 0.12); color: #2f6d99; font-size: 0.85rem; font-weight: 700; white-space: nowrap; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Counting metrics ---------------------------------------------------- */ .count-up { font-variant-numeric: tabular-nums; } /* --- Link arrow nudges --------------------------------------------------- */ .svc-proof-cta i, .spl-cta i, .back-to-projects i { transition: transform 0.28s ease; } .svc-proof:hover .svc-proof-cta i, .back-to-projects:hover i { transform: translateX(4px); } .back-to-projects:hover i { transform: translateX(-4px); } /* --- Screenshot lift ----------------------------------------------------- */ .project-shot img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .project-shot:hover img { transform: scale(1.015); } /* --- Respect the user's setting ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .read-progress { display: none; } .js-anim .reveal, .js-anim .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .js-anim .svc-steps.is-in .svc-step::after, .js-anim .svc-steps.is-in .svc-step-num { animation: none !important; } .tech-marquee-track { animation: none !important; flex-wrap: wrap; width: 100%; } .project-shot img, .svc-proof:hover .svc-proof-cta i { transition: none !important; transform: none !important; } } /* =========================================================================== Flow graphics: animated SVG lines and arrowheads that run between sections and down the process timeline. All decorative and aria-hidden, injected by script, so a no-JS reader simply never sees them. =========================================================================== */ /* --- Horizontal flow divider between sections ---------------------------- */ .flow-divider { position: relative; height: 64px; margin: 0 auto; max-width: 1120px; padding: 0 24px; pointer-events: none; } .flow-divider svg { display: block; width: 100%; height: 64px; overflow: visible; } .flow-track { fill: none; stroke: rgba(19, 124, 197, 0.16); stroke-width: 2; } /* the running dashes */ .flow-run { fill: none; stroke: #137cc5; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 16 26; animation: flowRun 2.6s linear infinite; filter: drop-shadow(0 0 5px rgba(19, 124, 197, 0.45)); } @keyframes flowRun { from { stroke-dashoffset: 84; } to { stroke-dashoffset: 0; } } /* the arrowhead that rides the line */ .flow-head { fill: none; stroke: #137cc5; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: flowHead 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; filter: drop-shadow(0 0 6px rgba(19, 124, 197, 0.5)); } @keyframes flowHead { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--flow-span, 900px)); } } /* the node that pulses at each end */ .flow-node { fill: #137cc5; animation: flowNode 2.6s ease-in-out infinite; } .flow-node-end { animation-delay: 1.3s; } @keyframes flowNode { 0%, 100% { r: 3.5; opacity: 0.45; } 50% { r: 5.5; opacity: 1; } } /* --- Vertical flow down the process timeline ----------------------------- */ .svc-steps { position: relative; } .step-flow { position: absolute; left: 31px; top: 64px; bottom: 40px; width: 2px; pointer-events: none; z-index: 0; } .step-flow svg { width: 2px; height: 100%; overflow: visible; } .step-flow .flow-run { stroke-dasharray: 14 22; animation: flowRunV 3s linear infinite; } @keyframes flowRunV { from { stroke-dashoffset: 72; } to { stroke-dashoffset: 0; } } /* the travelling dot */ .step-spark { fill: #137cc5; animation: sparkFall 3s cubic-bezier(0.5, 0, 0.5, 1) infinite; filter: drop-shadow(0 0 6px rgba(19, 124, 197, 0.7)); } @keyframes sparkFall { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--flow-drop, 400px)); } } /* --- Arrows between the proof cards -------------------------------------- */ .svc-proof-grid { position: relative; } .proof-arrow { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; z-index: 3; pointer-events: none; color: #137cc5; opacity: 0.85; animation: proofNudge 1.8s ease-in-out infinite; } .proof-arrow:nth-of-type(2) { animation-delay: 0.35s; } @keyframes proofNudge { 0%, 100% { transform: translateX(-4px); opacity: 0.35; } 50% { transform: translateX(4px); opacity: 1; } } @media (max-width: 980px) { .proof-arrow { display: none; } } /* --- Motion off ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .flow-divider, .step-flow, .proof-arrow { display: none !important; } } /* =========================================================================== Homepage motion: a running logo wall, section flow dividers, a scroll cue, and screenshot previews on the project cards. =========================================================================== */ /* --- Hero scroll cue ----------------------------------------------------- */ .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; color: #137cc5; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; z-index: 3; pointer-events: none; } .scroll-cue span { display: block; width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; position: relative; } .scroll-cue span::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cueDrop 1.8s ease-in-out infinite; } @keyframes cueDrop { 0% { transform: translateY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } } /* --- Screenshot preview on project cards --------------------------------- */ .project-image { position: relative; overflow: hidden; } .card-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.04); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; } .project-card:hover .card-shot { opacity: 1; transform: scale(1); } .project-card .project-image img:not(.card-shot) { transition: opacity 0.35s ease; } .project-card:hover .project-image img:not(.card-shot) { opacity: 0; } /* --- Motion off ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .scroll-cue { display: none !important; } .card-shot, .project-card:hover .project-image img:not(.card-shot) { transition: none !important; } } /* =========================================================================== Depth layer: hero atmosphere, scroll-linked timeline, shine on hover, heading underline draw, and a wipe reveal on screenshots. =========================================================================== */ /* --- Hero aurora --------------------------------------------------------- */ .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: 0.5; will-change: transform; } .aurora i:nth-child(1) { width: 460px; height: 460px; top: -140px; left: -90px; background: radial-gradient(circle, rgba(19, 124, 197, 0.34), transparent 68%); animation: drift1 22s ease-in-out infinite; } .aurora i:nth-child(2) { width: 380px; height: 380px; top: 32%; right: -110px; background: radial-gradient(circle, rgba(74, 163, 224, 0.30), transparent 68%); animation: drift2 27s ease-in-out infinite; } .aurora i:nth-child(3) { width: 320px; height: 320px; bottom: -110px; left: 34%; background: radial-gradient(circle, rgba(19, 124, 197, 0.22), transparent 70%); animation: drift3 31s ease-in-out infinite; } @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 48px) scale(1.12); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 62px) scale(0.9); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(48px, -54px) scale(1.15); } } /* keep hero content above the atmosphere */ .hero-container, .hero-content, .project-hero .container, .svc-hero .svc-wrap { position: relative; z-index: 1; } /* --- Scroll-linked timeline progress ------------------------------------- */ .timeline-progress { position: absolute; top: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #137cc5, rgba(19, 124, 197, 0.25)); height: 0; z-index: 1; pointer-events: none; box-shadow: 0 0 12px rgba(19, 124, 197, 0.45); transition: height 0.12s linear; } /* --- Shine sweep on cards ------------------------------------------------ */ .project-card, .svc-card, .service-card, .certification-card, .svc-proof, .education-card { position: relative; overflow: hidden; } .project-card::after, .svc-card::after, .service-card::after, .certification-card::after, .svc-proof::after, .education-card::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.62), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; z-index: 4; } .project-card:hover::after, .svc-card:hover::after, .service-card:hover::after, .certification-card:hover::after, .svc-proof:hover::after, .education-card:hover::after { animation: shineSweep 0.85s ease-out; } @keyframes shineSweep { 0% { left: -60%; opacity: 0; } 18% { opacity: 1; } 100% { left: 120%; opacity: 0; } } /* --- Heading underline draws in ------------------------------------------ */ .js-anim .tag-decoration { transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s; } .js-anim .tag-decoration.is-drawn { transform: scaleX(1); } /* --- Screenshot wipe reveal ---------------------------------------------- */ .js-anim .project-shot img { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .js-anim .project-shot.is-in img, .js-anim .project-shot.shot-in img { clip-path: inset(0 0 0 0); } /* --- Button lift --------------------------------------------------------- */ .svc-btn, .cta-button, .project-link { transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease; } /* --- Motion off ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aurora { display: none !important; } .timeline-progress { display: none !important; } .project-card::after, .svc-card::after, .service-card::after, .certification-card::after, .svc-proof::after, .education-card::after { display: none !important; } .js-anim .tag-decoration { transform: none !important; transition: none !important; } .js-anim .project-shot img { clip-path: none !important; transition: none !important; } } /* --- Short viewports (landscape phones) ---------------------------------- */ /* At 812x375 the scroll cue lands on top of the hero buttons. */ @media (max-height: 640px) { .scroll-cue { display: none !important; } } /* --- Aurora sizing on small screens -------------------------------------- */ /* 460px blurred blobs on a 320px screen cost GPU for no visual gain. */ @media (max-width: 700px) { .aurora i { filter: blur(44px); opacity: 0.42; } .aurora i:nth-child(1) { width: 260px; height: 260px; top: -80px; left: -70px; } .aurora i:nth-child(2) { width: 220px; height: 220px; right: -80px; } .aurora i:nth-child(3) { width: 200px; height: 200px; bottom: -70px; } } @media (max-width: 420px) { .aurora i:nth-child(3) { display: none; } } /* --- Very wide screens --------------------------------------------------- */ @media (min-width: 1800px) { .flow-divider { max-width: 1320px; } } /* --- Tap targets --------------------------------------------------------- */ /* The logo and the footer link were under the 44px guideline on mobile. */ @media (max-width: 768px) { .header .logo { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; } .project-footer p a { display: inline-block; padding: 12px 4px; } } /* =========================================================================== Modern layer: headline word stagger, pointer-tracked card glow, hero portrait parallax. =========================================================================== */ /* --- Headline word stagger ----------------------------------------------- */ .js-anim .word-in { display: inline-block; opacity: 1; animation: wordRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; } /* once this is set the words are permanently visible, whatever happened to the animation */ .js-anim .words-done .word-in { opacity: 1 !important; transform: none !important; animation: none !important; } @keyframes wordRise { from { opacity: 0; transform: translateY(24px) rotate(1.5deg); } to { opacity: 1; transform: none; } } /* --- Pointer-tracked glow on cards --------------------------------------- */ .glow-card { position: relative; } .glow-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 220px circle at var(--gx, 50%) var(--gy, 50%), rgba(19, 124, 197, 0.16), transparent 62% ); opacity: 0; transition: opacity 0.32s ease; pointer-events: none; z-index: 0; } .glow-card:hover::before { opacity: 1; } /* --- Hero portrait parallax ---------------------------------------------- */ .hero-image, .hero-content img, .hero picture { will-change: transform; } /* --- Motion off ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-anim .word-in { opacity: 1 !important; transform: none !important; animation: none !important; } .glow-card::before { display: none !important; } }