/* ========================================================================== Origo Advisory — Motion layer -------------------------------------------------------------------------- Restrained, brand-matched motion for the origo-advisory-animated theme. ARCHITECTURE - Everything is gated behind `html.origo-motion-on`, a class added synchronously in (see origo_advisory_motion_head_class() in functions.php). Because the class is present BEFORE first paint, the reveal "hidden" states apply with no flash-of-content. If JavaScript is disabled the class is never added, so all content renders fully visible (graceful degradation). - Entrance reveals are AUTO-TARGETED via the theme's own section classes (the selector list below). No data-* attributes or per-block editing are required. motion.js uses the same list to add `.is-inview` on scroll. - A manual `.reveal` class is also supported for one-off elements; it is editable from Gutenberg's "Advanced -> Additional CSS class(es)" field. Reuses the theme tokens declared in main.css (--origo-signal, etc.). ========================================================================== */ :root { --origo-ease: cubic-bezier(0.22, 1, 0.36, 1); --origo-reveal-shift: 22px; --origo-reveal-duration: 0.85s; } /* ========================================================================== 1. ENTRANCE REVEALS -------------------------------------------------------------------------- IMPORTANT: this selector list is mirrored in motion.js (REVEAL_GROUPS / REVEAL_SINGLES). Keep the two in sync when adding sections. ========================================================================== */ /* --- 1a. Hidden (pre-reveal) state — rise + fade ------------------------- */ html.origo-motion-on .origo-section-heading > *, html.origo-motion-on .origo-capability-grid > *, html.origo-motion-on .origo-tech-grid > *, html.origo-motion-on .origo-bento-grid > *, html.origo-motion-on .origo-values-grid > *, html.origo-motion-on .origo-process-grid > *, html.origo-motion-on .origo-midnight-grid > *, html.origo-motion-on .cta-band__inner > *, html.origo-motion-on .origo-two-note-grid > *, html.origo-motion-on .post-grid > *, html.origo-motion-on .origo-post-feed > *, html.origo-motion-on .origo-service-asym > *, html.origo-motion-on .origo-stats-grid > *, html.origo-motion-on .origo-toolkit-grid > *, html.origo-motion-on .origo-carousel, html.origo-motion-on .origo-fractional-panel > *, html.origo-motion-on .reveal { opacity: 0; transform: translateY(var(--origo-reveal-shift)); transition: opacity var(--origo-reveal-duration) var(--origo-ease) var(--origo-stagger, 0ms), transform var(--origo-reveal-duration) var(--origo-ease) var(--origo-stagger, 0ms), clip-path var(--origo-reveal-duration) var(--origo-ease) var(--origo-stagger, 0ms); will-change: opacity, transform; } /* --- 1b. Clip wipe — for the grayscale media frames --------------------- */ html.origo-motion-on .reveal--clip { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--origo-reveal-duration) var(--origo-ease) var(--origo-stagger, 0ms); will-change: clip-path; } /* --- 1c. Revealed state (higher specificity than the hidden rules) ------ */ html.origo-motion-on .is-inview { opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 0) !important; } /* -------------------------------------------------------------------------- 2. Hero entrance — PURE CSS (no JavaScript dependency) The hero is always above the fold, so it must never wait on motion.js (which Autoptimize / "defer JS" can delay). A CSS animation plays at first paint regardless of when scripts run, so the hero can never load blank. -------------------------------------------------------------------------- */ @keyframes origo-hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } html.origo-motion-on .origo-home-hero__copy, html.origo-motion-on .origo-page-hero__copy { opacity: 0; animation: origo-hero-in 0.85s var(--origo-ease) 0.05s forwards; } html.origo-motion-on .origo-home-hero__aside { opacity: 0; animation: origo-hero-in 0.85s var(--origo-ease) 0.22s forwards; } /* The lime signal rule under the hero meta grows in (also pure CSS) */ html.origo-motion-on .origo-home-hero__signal::before { transform-origin: left center; animation: origo-signal-grow 0.9s var(--origo-ease) 0.4s both; } @keyframes origo-signal-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 3. Subtle drift on the hero background grid -------------------------------------------------------------------------- */ html.origo-motion-on .origo-home-hero { animation: origo-grid-drift 32s linear infinite; } @keyframes origo-grid-drift { to { background-position: 32px 32px, 32px 32px; } } /* -------------------------------------------------------------------------- 4. Sticky header — condense + shadow after scroll -------------------------------------------------------------------------- */ html.origo-motion-on .site-header { transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } html.origo-motion-on .site-header.is-scrolled { background: rgba(252, 249, 248, 0.92); border-bottom-color: var(--origo-outline); box-shadow: 0 10px 30px rgba(28, 27, 27, 0.06); } html.origo-motion-on .site-header__inner { transition: min-height 0.35s var(--origo-ease); } html.origo-motion-on .site-header.is-scrolled .site-header__inner { min-height: 70px; } /* Nav link — underline grows from the left */ html.origo-motion-on .primary-nav a { position: relative; } html.origo-motion-on .primary-nav a::after { content: ''; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.55rem; height: 2px; background: var(--origo-signal); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--origo-ease); } html.origo-motion-on .primary-nav a:hover::after, html.origo-motion-on .primary-nav a:focus-visible::after, html.origo-motion-on .primary-nav .current-menu-item > a::after, html.origo-motion-on .primary-nav .current_page_item > a::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- 5. Buttons — magnetic pull (JS sets the vars) + arrow slide -------------------------------------------------------------------------- */ html.origo-motion-on .button, html.origo-motion-on .wp-block-button__link { overflow: hidden; transform: translate(var(--origo-mx, 0), var(--origo-my, 0)); transition: background 0.25s ease, color 0.25s ease, transform 0.4s var(--origo-ease), border-color 0.25s ease; } html.origo-motion-on .button:hover, html.origo-motion-on .button:focus-visible, html.origo-motion-on .wp-block-button__link:hover, html.origo-motion-on .wp-block-button__link:focus-visible { transform: translate(var(--origo-mx, 0), calc(var(--origo-my, 0) - 2px)); } /* Optional trailing arrow: → */ html.origo-motion-on .button__arrow { display: inline-block; transition: transform 0.3s var(--origo-ease); } html.origo-motion-on .button:hover .button__arrow, html.origo-motion-on .button:focus-visible .button__arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- 6. Cards — accent rail draw + lift + media zoom -------------------------------------------------------------------------- */ html.origo-motion-on .origo-capability-card, html.origo-motion-on .origo-bento-card, html.origo-motion-on .origo-tech-card, html.origo-motion-on .post-card { position: relative; transition: background 0.25s ease, transform 0.4s var(--origo-ease), box-shadow 0.4s var(--origo-ease); } html.origo-motion-on .origo-capability-card::before, html.origo-motion-on .origo-tech-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--origo-signal); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--origo-ease); } html.origo-motion-on .origo-capability-card:hover, html.origo-motion-on .origo-bento-card:hover, html.origo-motion-on .origo-tech-card:hover, html.origo-motion-on .post-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(28, 27, 27, 0.08); } html.origo-motion-on .origo-capability-card:hover::before, html.origo-motion-on .origo-tech-card:hover::before { transform: scaleX(1); } /* media zoom + grayscale -> tone on hover */ html.origo-motion-on .post-card__media img, html.origo-motion-on .origo-bento-card--image img, html.origo-motion-on .origo-outcome-panel .origo-cover-image img { transition: transform 0.6s var(--origo-ease), filter 0.6s ease; } html.origo-motion-on .post-card:hover .post-card__media img, html.origo-motion-on .origo-bento-card--image:hover img, html.origo-motion-on .origo-outcome-panel:hover .origo-cover-image img { transform: scale(1.04); filter: grayscale(0.2) contrast(1.05); } /* text-link arrow slide */ html.origo-motion-on .text-link { transition: gap 0.3s var(--origo-ease); } html.origo-motion-on .text-link:hover, html.origo-motion-on .text-link:focus-visible { gap: 0.75rem; } /* -------------------------------------------------------------------------- 7. Stats band + count-up numbers These layout/typography rules are NOT gated on `.origo-motion-on` so the band looks correct even without JS (numbers then show their real value via the markup; the count-up is the enhancement). Tabular figures avoid shift. -------------------------------------------------------------------------- */ .origo-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .origo-stat { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .origo-stat-label { margin: 0.6rem 0 0; color: var(--origo-muted); } @media (max-width: 820px) { .origo-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- 8. Optional logo marquee — add class `origo-marquee` to a wrapper and `origo-marquee__track` to the inner row (duplicate the items once). -------------------------------------------------------------------------- */ html.origo-motion-on .origo-marquee { 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); } html.origo-motion-on .origo-marquee__track { display: flex !important; /* override .origo-logo-row's grid when combined */ flex-wrap: nowrap; align-items: center; gap: clamp(2rem, 5vw, 5rem); width: max-content; animation: origo-marquee 38s linear infinite; } html.origo-motion-on .origo-marquee__track > * { flex: 0 0 auto; margin: 0; white-space: nowrap; } html.origo-motion-on .origo-marquee:hover .origo-marquee__track { animation-play-state: paused; } @keyframes origo-marquee { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 9. Accessibility — honor reduced-motion fully (overrides hidden states) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.origo-motion-on .origo-section-heading > *, html.origo-motion-on .origo-capability-grid > *, html.origo-motion-on .origo-tech-grid > *, html.origo-motion-on .origo-bento-grid > *, html.origo-motion-on .origo-values-grid > *, html.origo-motion-on .origo-process-grid > *, html.origo-motion-on .origo-midnight-grid > *, html.origo-motion-on .cta-band__inner > *, html.origo-motion-on .origo-two-note-grid > *, html.origo-motion-on .post-grid > *, html.origo-motion-on .origo-post-feed > *, html.origo-motion-on .origo-service-asym > *, html.origo-motion-on .origo-stats-grid > *, html.origo-motion-on .origo-toolkit-grid > *, html.origo-motion-on .origo-carousel, html.origo-motion-on .origo-home-hero__copy, html.origo-motion-on .origo-page-hero__copy, html.origo-motion-on .origo-fractional-panel > *, html.origo-motion-on .origo-home-hero__aside, html.origo-motion-on .reveal, html.origo-motion-on .reveal--clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; animation: none !important; } html.origo-motion-on .origo-home-hero, html.origo-motion-on .origo-home-hero__signal::before, html.origo-motion-on .origo-marquee__track { animation: none !important; } html.origo-motion-on .origo-home-hero__signal::before { transform: scaleX(1); } html.origo-motion-on .origo-carousel__track { transition: none !important; } }