/* ========================================================================== Edge RCM — Animations & Micro-interactions ========================================================================== */ /* -------------------------------------------------------------------------- 1. Keyframes -------------------------------------------------------------------------- */ @keyframes av-fade-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes av-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes av-fade-left { from { opacity: 0; transform: translate3d(-34px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes av-fade-right { from { opacity: 0; transform: translate3d(34px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes av-zoom-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } @keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes av-float-soft { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(1.4deg); } } @keyframes av-pulse-ring { 0% { transform: scale(.65); opacity: .85; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes av-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes av-dash { to { stroke-dashoffset: 0; } } @keyframes av-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } } @keyframes av-bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes av-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.09); } 28% { transform: scale(1); } 42% { transform: scale(1.06); } 56% { transform: scale(1); } } @keyframes av-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes av-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes av-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* -------------------------------------------------------------------------- 2. Scroll reveal system -------------------------------------------------------------------------- */ /* Elements only start hidden once JavaScript has confirmed it is running. Without this gate, a script error or a no-JS browser would leave the page blank. The .js-ready class is added to by assets/js/script.js. */ .js-ready [data-reveal] { opacity: 0; will-change: opacity, transform; } .js-ready [data-reveal].is-revealed, [data-reveal].is-revealed { opacity: 1; } [data-reveal].is-revealed { animation-duration: .78s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-fill-mode: both; } [data-reveal="up"].is-revealed { animation-name: av-fade-up; } [data-reveal="fade"].is-revealed { animation-name: av-fade-in; } [data-reveal="left"].is-revealed { animation-name: av-fade-left; } [data-reveal="right"].is-revealed { animation-name: av-fade-right; } [data-reveal="zoom"].is-revealed { animation-name: av-zoom-in; } /* Stagger utility — applied by data-reveal-delay attribute */ [data-reveal-delay="1"].is-revealed { animation-delay: .08s; } [data-reveal-delay="2"].is-revealed { animation-delay: .16s; } [data-reveal-delay="3"].is-revealed { animation-delay: .24s; } [data-reveal-delay="4"].is-revealed { animation-delay: .32s; } [data-reveal-delay="5"].is-revealed { animation-delay: .40s; } [data-reveal-delay="6"].is-revealed { animation-delay: .48s; } [data-reveal-delay="7"].is-revealed { animation-delay: .56s; } [data-reveal-delay="8"].is-revealed { animation-delay: .64s; } /* -------------------------------------------------------------------------- 3. Hero motion -------------------------------------------------------------------------- */ .hero__media > .hero-art { animation: av-float 7s ease-in-out infinite; } .hero__floating { animation: av-float-soft 6s ease-in-out infinite; } .hero__floating--two { animation-delay: -2.2s; animation-duration: 7.4s; } .hero__floating--three { animation-delay: -4s; animation-duration: 8s; } .hero__badge i svg { animation: av-heartbeat 3.4s ease-in-out infinite; } /* Animated gradient text sheen */ .hero h1 .hero__accent { background-size: 220% 100%; animation: av-gradient-shift 9s ease infinite; } /* -------------------------------------------------------------------------- 4. Pulse dots (map, live indicators) -------------------------------------------------------------------------- */ .pulse-dot { position: relative; display: inline-grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); flex: none; } .pulse-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--color-accent); animation: av-pulse-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite; } .pulse-dot--primary { background: var(--color-primary); } .pulse-dot--primary::after { border-color: var(--color-primary); } .pulse-dot--live { background: #2ecc8f; } .pulse-dot--live::after { border-color: #2ecc8f; } /* SVG map pulses */ .map-pulse { transform-box: fill-box; transform-origin: center; } .map-pulse circle.ring { animation: av-pulse-ring 2.8s cubic-bezier(.2, .6, .3, 1) infinite; transform-box: fill-box; transform-origin: center; } .map-pulse:nth-of-type(2n) circle.ring { animation-delay: .5s; } .map-pulse:nth-of-type(3n) circle.ring { animation-delay: 1.1s; } .map-pulse:nth-of-type(4n) circle.ring { animation-delay: 1.7s; } /* Animated SVG stroke drawing */ .draw-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .is-revealed .draw-path, .draw-path.is-drawn { animation: av-dash 2.6s cubic-bezier(.16, 1, .3, 1) forwards; } /* -------------------------------------------------------------------------- 5. Hub / orbit animation (One Stop Solution) -------------------------------------------------------------------------- */ .hub__ring--1 { animation: av-spin-slow 40s linear infinite; } .hub__ring--2 { animation: av-spin-slow 62s linear infinite reverse; } .hub__core { animation: av-float 8s ease-in-out infinite; } .hub__node { animation: av-float-soft 7s ease-in-out infinite; } .hub__node--e { animation-delay: -1.6s; } .hub__node--s { animation-delay: -3.2s; } .hub__node--w { animation-delay: -4.8s; } /* -------------------------------------------------------------------------- 6. Timeline / workflow reveal -------------------------------------------------------------------------- */ .flow__item .flow__card, .flow__item .flow__dot { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .flow__item.is-inview .flow__card, .flow__item.is-inview .flow__dot { opacity: 1; transform: translateY(0); } .flow__item.is-inview .flow__dot { transition-delay: .08s; } .flow__item.is-inview .flow__arrow svg { animation: av-bounce-soft 2s ease-in-out infinite; } /* -------------------------------------------------------------------------- 7. Counter placeholder shimmer -------------------------------------------------------------------------- */ .counter[data-count]:not(.is-counted) { background: linear-gradient(90deg, currentColor 0%, rgba(0, 74, 173, .35) 45%, currentColor 90%); background-size: 420px 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: av-shimmer 1.6s linear infinite; } .stats--on-deep .counter[data-count]:not(.is-counted) { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .45) 45%, #fff 90%); background-size: 420px 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- 8. Micro-interactions -------------------------------------------------------------------------- */ .hover-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .hover-glow { position: relative; } .hover-glow::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(300px 160px at var(--mx, 50%) var(--my, 50%), rgba(255, 201, 24, .18), transparent 65%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; } .hover-glow:hover::after { opacity: 1; } .underline-grow { background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size var(--dur) var(--ease); } .underline-grow:hover { background-size: 100% 2px; } .live-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0b6f4f; } .live-badge .pulse-dot { width: 8px; height: 8px; } /* Marquee (industries / specialties ticker) */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; gap: .75rem; animation: av-marquee 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 44s; } /* Progress bars */ .bar { height: 8px; border-radius: 999px; background: var(--color-bg-deep); overflow: hidden; } .bar__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width 1.5s cubic-bezier(.16, 1, .3, 1); } .bar-row { display: grid; gap: .45rem; margin-bottom: 1.1rem; } .bar-row__head { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 650; color: var(--color-primary-800); } .bar-row__head span:last-child { color: var(--color-primary); } /* Button pulse for primary CTA in headers */ .btn--pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 201, 24, .55); animation: av-cta-pulse 3.2s ease-out infinite; pointer-events: none; } @keyframes av-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 24, .5); } 70% { box-shadow: 0 0 0 16px rgba(255, 201, 24, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 201, 24, 0); } } /* Loading state for form submit */ .btn.is-loading { pointer-events: none; opacity: .82; } .btn.is-loading .btn__spinner { display: inline-block; } .btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: av-spin-slow .7s linear infinite; } .btn--accent .btn__spinner { border-color: rgba(10, 36, 80, .3); border-top-color: var(--color-primary-800); } /* Mobile nav slide-in animation */ @keyframes av-nav-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* -------------------------------------------------------------------------- 9. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; } .flow__item .flow__card, .flow__item .flow__dot { opacity: 1 !important; transform: none !important; } .counter[data-count]:not(.is-counted) { -webkit-background-clip: initial; background-clip: initial; background: none; color: inherit; } .marquee__track { animation: none; } }