/* ============================================================================ motion.css — site-wide entrance & scroll motion for the Altamira site. Pairs with motion.js. Design goals: make the site feel alive and high-end while staying tasteful for a corporate / investor-relations audience. Architecture notes ------------------- • All "start hidden" states are gated behind `html.am-js`, a class motion.js adds to at the very first line of execution. If the script never runs (or errors before arming), NOTHING is hidden — the page degrades to fully-visible static content. This is the FOUC-safe contract. • motion.js adds `.am-reveal` (+ a direction variant) to content blocks and flips them to `.am-in` via IntersectionObserver. Because the page is driven by a React runtime that re-renders on nav hover, we only ever animate *content* nodes (never the nav/hero chrome), whose vdom className doesn't change between renders — so React never reverts our classes. • Everything is disabled under `prefers-reduced-motion: reduce`. ========================================================================== */ /* ---- 1. Reveal-on-scroll -------------------------------------------------- */ /* The easing below (a soft "out" curve) is the signature feel of the whole site: quick to start, long gentle settle — reads as weighty and expensive. */ html.am-js .am-reveal { opacity: 0; transition: opacity 0.78s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.86s cubic-bezier(0.16, 0.84, 0.44, 1), filter 0.78s cubic-bezier(0.16, 0.84, 0.44, 1); transition-delay: var(--am-d, 0ms); /* opacity-only by default — the transform variants opt into will-change themselves, so am-fade (used to protect position:sticky subtrees) never gets will-change:transform, which would create a sticky-breaking containing block. */ will-change: opacity; } html.am-js .am-reveal.am-up { transform: translate3d(0, 30px, 0); will-change: opacity, transform; } html.am-js .am-reveal.am-fade { transform: none; } html.am-js .am-reveal.am-scale { transform: scale(0.965); will-change: opacity, transform; } html.am-js .am-reveal.am-blur { transform: translate3d(0, 30px, 0); filter: blur(6px); will-change: opacity, transform, filter; } html.am-js .am-reveal.am-in { opacity: 1; transform: none; filter: none; } /* Once the entrance has played we drop will-change so we never permanently establish a containing block (which would break any position:sticky inside). */ html.am-js .am-reveal.am-done { will-change: auto; } /* ---- 2. GSAP-owned subtrees (scrub / pin) -------------------------------- */ /* Sections marked [data-am-gsap] are animated by motion-gsap.js with GSAP + ScrollTrigger. We hide their reveal targets from first paint (gated by html.am-js) so there is no flash before GSAP takes control; GSAP then drives opacity/transform inline. If GSAP can't run (reduced motion, load failure), the reduced-motion / no-am-js fallbacks below keep them fully visible. */ html.am-js [data-am-gsap] .am-g-rise { opacity: 0; } /* ---- 3. Hero entrance (every page) --------------------------------------- */ /* Top utility bar: its two text groups fade in with a small downward settle, leading the top-to-bottom load sequence (bar strip itself stays put). */ html.am-js .am-topbar > * { opacity: 0; transform: translateY(-6px); } html.am-js body.am-loaded .am-topbar > *:nth-child(1) { animation: am-hero-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0s forwards; } html.am-js body.am-loaded .am-topbar > *:nth-child(2) { animation: am-hero-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.1s forwards; } /* The hero copy starts hidden and rises in, staggered, once `body.am-loaded` is set (motion.js sets it on DOM-ready — there is no loader). Homepage uses `.am-home-copy` + investor shelf; inner pages use `.am-herocopy` (the hero's content wrapper). Both hide their *children* so the wrapper itself stays free for the GSAP scroll-parallax — the two never fight. Gated by am-js so nothing is hidden if the script never runs. The nav
fades down site-wide. */ html.am-js .am-home-copy > *, html.am-js .am-herocopy > *, html.am-js .am-home-shelf, html.am-js section header { opacity: 0; transform: translateY(26px); } html.am-js section header { transform: translateY(-18px); } html.am-js body.am-loaded section header { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.05s forwards; } html.am-js body.am-loaded .am-home-shelf { animation: am-hero-rise 1.05s cubic-bezier(0.16, 0.84, 0.44, 1) 0.62s forwards; } /* Staggered rise of the hero copy children (covers homepage's 3 blocks and the longer breadcrumb→eyebrow→headline→body→actions stacks on inner pages). */ html.am-js body.am-loaded .am-home-copy > *:nth-child(1), html.am-js body.am-loaded .am-herocopy > *:nth-child(1) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.20s forwards; } html.am-js body.am-loaded .am-home-copy > *:nth-child(2), html.am-js body.am-loaded .am-herocopy > *:nth-child(2) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.30s forwards; } html.am-js body.am-loaded .am-home-copy > *:nth-child(3), html.am-js body.am-loaded .am-herocopy > *:nth-child(3) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.40s forwards; } html.am-js body.am-loaded .am-herocopy > *:nth-child(4) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.50s forwards; } html.am-js body.am-loaded .am-herocopy > *:nth-child(5) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.60s forwards; } html.am-js body.am-loaded .am-herocopy > *:nth-child(n+6) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.70s forwards; } @keyframes am-hero-rise { to { opacity: 1; transform: none; } } /* Featured / preview cards (marked data-reveal in the template) sit just below the hero — above the fold — so an IntersectionObserver reveal would snap them in with no transition. Instead they get the hero-style load entrance: gated hidden from first paint (no flash), rising in just after the hero copy. Excluded from the IO in motion.js so nothing double-drives them. */ html.am-js [data-reveal] { opacity: 0; transform: translateY(26px); } html.am-js body.am-loaded [data-reveal] { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.5s forwards; } /* `.am-loadin` — reusable hook (in the template) for a container whose children sit above the fold and so must animate on LOAD, not on scroll. Its children rise in staggered, gated from first paint; the container is excluded from the IO in motion.js. Used where the main content is high on a short-hero page (e.g. contact's directory + form). */ html.am-js .am-loadin > * { opacity: 0; transform: translateY(26px); } html.am-js body.am-loaded .am-loadin > *:nth-child(1) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.40s forwards; } html.am-js body.am-loaded .am-loadin > *:nth-child(2) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.50s forwards; } html.am-js body.am-loaded .am-loadin > *:nth-child(n+3) { animation: am-hero-rise 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.60s forwards; } /* Sticky side nav (every