/* Outrivo site motion: shared by every page of the landing site. - Scroll reveals (headings, cards, rows, media, the closing call-to-action boxes and the footer wordmark) use CSS scroll-driven animations: Chrome/Edge 115+ and Safari 26+. Browsers without them (Firefox today) show the page exactly as before, just without the motion. - Hover and feedback motion: a light sweep across primary buttons, arrows nudging forward, cards lifting,
accordions opening smoothly, the nav's shadow deepening as the page scrolls, and a reading-progress bar on the legal pages. - Nothing moves for visitors who ask their system for reduced motion. - Reveal keyframes animate the individual `translate`/`scale` properties, so they compose with (never override) the `transform` an element already uses for its hover state. - Page-specific rules are scoped with html[data-page="..."], which tools/apply_motion.py sets. The Why Outrivo page carries its own section motion (from its design file), so the generic reveals below skip it. - Elements inside a box that clips or scrolls (overflow: hidden/auto) follow the box's own named timeline instead of view(), otherwise their reveal would never start. */ @keyframes oxRise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: none; } } @keyframes oxBlur { from { opacity: 0; translate: 0 0.35em; filter: blur(10px); } to { opacity: 1; translate: none; filter: none; } } @keyframes oxLeft { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: none; } } @keyframes oxRight { from { opacity: 0; translate: 56px 0; } to { opacity: 1; translate: none; } } @keyframes oxZoom { from { opacity: 0.25; scale: 0.9; } to { opacity: 1; scale: none; } } @keyframes oxGrow { from { scale: 0.92; } to { scale: none; } } @keyframes oxWordmark { from { opacity: 0; translate: 0 40%; } to { opacity: 1; translate: none; } } @keyframes oxPageIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } } @keyframes oxNavDepth { from { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } to { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); } } @keyframes oxProgress { from { scale: 0 1; } to { scale: 1 1; } } /* ---------- Motion that does not depend on scroll position ---------- */ @media (prefers-reduced-motion: no-preference) { /* Page entrance: the first section eases in when the page appears (the nav stays put). */ html[data-page]:not([data-page="home"]) #dc-root > .sc-host > div > section:first-of-type, html[data-page^="legal-"] .legal-header, html[data-page^="legal-"] .legal-layout { animation: oxPageIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; } html[data-page^="legal-"] .legal-layout { animation-delay: 0.12s; } /* Primary buttons: a soft light sweep crosses the button on hover. */ :is(.cta-btn-primary, .btn-nav-signup, .hero-signup-btn, .send-btn, .wa-go) { position: relative; overflow: hidden; isolation: isolate; } :is(.cta-btn-primary, .btn-nav-signup, .hero-signup-btn, .send-btn, .wa-go)::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); transform: skewX(-20deg); pointer-events: none; } :is(.cta-btn-primary, .btn-nav-signup, .hero-signup-btn, .send-btn, .wa-go):hover::after { left: 130%; transition: left 0.75s ease; } /* Arrows inside buttons nudge forward on hover. */ :is(.cta-btn-primary, .cta-btn-secondary, .hero-signup-btn) svg { transition: transform 0.3s ease; } :is(.cta-btn-primary, .cta-btn-secondary, .hero-signup-btn):hover svg { transform: translateX(3px); } /* Cards lift slightly under the pointer. */ :is(.plan-card, .tip-card, .step-card) { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease; } :is(.plan-card, .tip-card, .step-card):hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(24, 24, 27, 0.3); } /* Accordions (
) open and close smoothly where the browser can animate to height:auto (Chromium today); elsewhere they open instantly as before. */ @supports (interpolate-size: allow-keywords) and selector(::details-content) { :root { interpolate-size: allow-keywords; } details::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), content-visibility 0.45s allow-discrete; } details[open]::details-content { block-size: auto; } } @supports (animation-timeline: scroll()) { /* The nav pill's shadow deepens a little as the page scrolls. */ .site-nav { animation: oxNavDepth linear both; animation-timeline: scroll(root); animation-range: 0px 320px; } /* Legal pages: a thin reading-progress bar along the top edge of the window. */ html[data-page^="legal-"] body::after { content: ''; position: fixed; z-index: 300; top: 0; left: 0; right: 0; height: 3px; background: #18181b; transform-origin: 0 50%; pointer-events: none; animation: oxProgress linear both; animation-timeline: scroll(root); } } } /* ---------- Scroll reveals ---------- Only in normal-height windows, so a very tall preview frame shows the finished page. */ @media (prefers-reduced-motion: no-preference) and (max-height: 1800px) { @supports (animation-timeline: view()) { /* Section headings that don't already animate their own letters: they sharpen out of a soft blur as they rise into view. */ html[data-page]:not([data-page="why-outrivo"]) #dc-root section h2:not(:has(.char, .type)), html[data-page="home"] :is(.product-preview-features-heading, .bottom-cta-heading) { animation: oxBlur linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } /* Cards, rows and text blocks rise into place. */ html[data-page="home"] :is(.why-outrivo-desc, .why-outrivo-row, .bottom-cta-box), html[data-page="pricing"] :is(.plan-card, .metric, .step-row, .cmp-row, .faq-item), html[data-page="contact"] :is(.tip-card, .support-row, .faq-item), html[data-page="lead-search"] :is(.result-row, .step-card), html[data-page="email-campaigns"] :is(.step-row, .metric, .draft-doc), html[data-page="website-analyzer"] .wa-showcase-row, html[data-page="automations"] .step-row, html[data-page^="legal-"] .legal-section h2 { animation: oxRise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; } /* Side-by-side cards come in one after another. */ html[data-page] :is(.plan-card, .metric, .tip-card, .step-card, .why-outrivo-row):nth-child(2) { animation-range: entry 6% cover 32%; } html[data-page] :is(.plan-card, .metric, .tip-card, .step-card, .why-outrivo-row):nth-child(3) { animation-range: entry 12% cover 36%; } html[data-page] :is(.plan-card, .metric, .tip-card, .step-card, .why-outrivo-row):nth-child(4) { animation-range: entry 18% cover 40%; } html[data-page] :is(.plan-card, .metric, .tip-card, .step-card, .why-outrivo-row):nth-child(5) { animation-range: entry 24% cover 44%; } /* Home: the "old way" column slides in from the left, the Outrivo column from the right. */ html[data-page="home"] .why-outrivo-col-old { animation: oxLeft linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } html[data-page="home"] .why-outrivo-col-new { animation: oxRight linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } /* Phones: the columns are stacked, so the Outrivo column rises instead of sliding in from the right (which would push the page wider than the screen while it waits). */ @media (max-width: 760px) { html[data-page="home"] .why-outrivo-col-new { animation-name: oxRise; } } /* Lead Search: the results sit in a clipped box, so the rows follow that box's timeline and come in one after another. */ html[data-page="lead-search"] div:has(> div > .result-row) { view-timeline-name: --oxResults; } html[data-page="lead-search"] .result-row { animation-timeline: --oxResults; } html[data-page="lead-search"] .result-row:nth-child(2) { animation-range: entry 8% cover 34%; } html[data-page="lead-search"] .result-row:nth-child(3) { animation-range: entry 16% cover 40%; } html[data-page="lead-search"] .result-row:nth-child(4) { animation-range: entry 24% cover 46%; } /* Lead Search: the filter rows slide in from the left. */ html[data-page="lead-search"] .filter-row { animation: oxLeft linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; } /* Videos and product canvases zoom up to full size as they scroll in. */ html[data-page="home"] .how-video-glass, html[data-page="lead-search"] .video-card, html[data-page="email-campaigns"] .video-frame, html[data-page="website-analyzer"] .wa-showcase-glass, html[data-page="automations"] .canvas { animation: oxZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } /* The dark "next step" box before the closing call to action rises in. */ html:is([data-page="pricing"], [data-page="lead-search"], [data-page="email-campaigns"], [data-page="automations"]) #dc-root > .sc-host > div > section:nth-last-of-type(2) > div { animation: oxRise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } /* The closing call-to-action box grows to full size as it scrolls in. */ html[data-page]:not([data-page="why-outrivo"]) #dc-root > .sc-host > div > section:last-of-type > div { animation: oxGrow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } /* Footer: the big Outrivo wordmark rises out of the bottom edge. The footer clips its content, so its parts follow the footer's own timeline; both finish by the time the footer is fully on screen (the very bottom of the page). */ .site-footer { view-timeline-name: --oxFooter; } .site-footer-top { animation: oxRise linear both; animation-timeline: --oxFooter; animation-range: entry 0% entry 60%; } .site-footer-wordmark { animation: oxWordmark linear both; animation-timeline: --oxFooter; animation-range: entry 25% entry 100%; } } }