@charset "UTF-8"; /* ========================================================================== GSAP motion system (scroll-reveal, parallax, marquee, scroll progress) -------------------------------------------------------------------------- All initial (hidden) states are applied ONLY when has `.has-gsap`, which is added very early in and only when the visitor does NOT prefer reduced motion. This guarantees: - no FOUC (elements start hidden before GSAP runs) - graceful degradation (no JS / reduced motion => content stays visible) IMPORTANT: the selector lists below are kept in sync with the matching arrays in code/scripts/animations.js (GROUP_SELECTORS / BLOCK_SELECTORS). If you add a selector here, add it there too, and vice-versa. ========================================================================== */ /* --- Explicit, opt-in reveals (data attributes) -------------------------- */ .has-gsap [data-reveal] { opacity: 0; will-change: transform, opacity; } .has-gsap [data-reveal], .has-gsap [data-reveal=up] { transform: translate3d(0, 40px, 0); } .has-gsap [data-reveal=down] { transform: translate3d(0, -40px, 0); } .has-gsap [data-reveal=left] { transform: translate3d(-48px, 0, 0); } .has-gsap [data-reveal=right] { transform: translate3d(48px, 0, 0); } .has-gsap [data-reveal=scale] { transform: scale(0.92); } .has-gsap [data-reveal=fade] { transform: none; } .has-gsap [data-reveal-group] > * { opacity: 0; transform: translate3d(0, 34px, 0); will-change: transform, opacity; } /* --- Automatic block reveals (whole element rises + fades) --------------- */ .has-gsap :is(.section-heading, .section-kicker, .intro-block .prose, .about-copy, .about-intro-shell, .compliance-grid, .leadership-grid, .service-turnaround-card, .service-spec-block, .service-analytes, .faq-intro-copy, .faq-list-heading, .contact-form-grid, .footer-cta):not([data-no-reveal]) { opacity: 0; transform: translate3d(0, 40px, 0); will-change: transform, opacity; } /* --- Automatic group reveals (children stagger in sequence) -------------- */ .has-gsap :is(.services-grid, .services-static-grid, .products-grid, .experts-grid, .badges-row, .qms-timeline, .process-timeline, .about-feature-cards, .contact-method-grid, .faq-contact-grid, .education-static-grid):not([data-no-reveal]) > * { opacity: 0; transform: translate3d(0, 34px, 0); will-change: transform, opacity; } /* Drop will-change once the animation has played, to free the GPU */ .has-gsap .is-revealed, .has-gsap .is-revealed > * { will-change: auto; } /* --- Parallax decorative marks ------------------------------------------ */ .has-gsap [data-parallax] { will-change: transform; } /* --- Partners marquee (continuous horizontal movement) ------------------ High specificity is required to override the inline `display:grid` rule that is printed after this stylesheet in . */ .has-gsap .section-partners .site-shell { /* * The marquee has to be clipped horizontally, but overflow: hidden clips * both axes, and the card shadow reaches ~60px below each card — so it was * being cut off in a straight line. * * overflow-x: hidden with overflow-y: visible is not a fix: CSS promotes * the visible axis to auto whenever the other is hidden, which adds a * scrollbar. Padding moves the clip edges past the shadow instead, and the * negative margin takes that space back out of the layout so nothing * shifts. Longhand margins keep the `margin: 0 auto` centring intact. */ --marquee-bleed: 72px; overflow: hidden; padding-top: var(--marquee-bleed); padding-bottom: var(--marquee-bleed); margin-top: calc(var(--marquee-bleed) * -1); margin-bottom: calc(var(--marquee-bleed) * -1); /* * The negative margin makes this box overlap the sections above and below. * It is transparent, but it would still swallow clicks on anything inside * that band, so pointer events are handed back to the row itself — which * needs them for the hover-to-pause. */ pointer-events: none; } .has-gsap .section-partners .site-shell > * { pointer-events: auto; } .has-gsap .section-partners .partners-row[data-marquee] { display: flex; flex-wrap: nowrap; width: -moz-max-content; width: max-content; grid-template-columns: none; justify-content: flex-start; align-items: stretch; will-change: transform; } .has-gsap .section-partners .partners-row[data-marquee] > * { flex: 0 0 auto; width: 200px; } /* --- Scroll progress bar (top of viewport) ------------------------------ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #66c271 0%, #2f8f4f 60%, #11315a 100%); z-index: 9999; pointer-events: none; }/*# sourceMappingURL=css_part_animations.css.map */