/* ============================================================ ribc — Motion Layer Works alongside existing styles. Activated only when JS adds .gsap-on to . Without JS or with prefers-reduced-motion, the original IntersectionObserver reveal system keeps working untouched. ============================================================ */ /* When GSAP takes over, disable the old CSS transitions so the two systems never animate the same element twice. */ html.gsap-on .reveal, html.gsap-on .timeline-item { transition: none !important; } /* GSAP controls visibility via inline styles; neutralize the class-based hidden states so there is no flash-of-hidden. */ html.gsap-on .reveal { opacity: 1; transform: none; } html.gsap-on .timeline-item { opacity: 1; transform: none; } /* Elements GSAP will hide before animating get this class from JS (prevents flash of unstyled reveal before the tween starts). */ html.gsap-on .m-prep { opacity: 0; } /* Scroll-drawn gold line for the process timeline. Injected by JS inside .timeline; original ::before is dimmed. */ html.gsap-on .timeline::before { opacity: 0.12; } .timeline-progress { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%; width: 2px; background: linear-gradient(to bottom, #D4AF37, #B48E4B); box-shadow: 0 0 18px rgba(212, 175, 55, 0.45); transform-origin: top center; scale: 1 0; /* scaleY driven by GSAP scrub */ pointer-events: none; } @media (max-width: 768px) { .timeline-progress { left: 2rem; } } /* Hero layers: promote to their own compositing layers for smooth parallax. Applied only when motion is on. */ html.gsap-on .hero-bg-image, html.gsap-on .globe-container, html.gsap-on .hero-content { will-change: transform; } /* Lenis recommended base styles */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Respect users who prefer reduced motion: the JS bails out entirely, but this is a hard guarantee at the CSS level too. */ @media (prefers-reduced-motion: reduce) { .timeline-progress { display: none; } } /* ============================================================ Gold line motif — extends the process-timeline line language to every section label. Draws in from the left when the section header enters the viewport. ============================================================ */ html.gsap-on .section-label { position: relative; padding-bottom: 0.65rem; } html.gsap-on .section-label::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 42px; height: 2px; margin-left: -21px; background: linear-gradient(90deg, #D4AF37, #B48E4B); box-shadow: 0 0 12px rgba(212, 175, 55, 0.4); transform: scaleX(0); transform-origin: center; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } html.gsap-on .section-label.line-in::after { transform: scaleX(1); }