/* Motion uses transform and opacity; all automatic sequences settle in under five seconds. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 100; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hero-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-line > span { display: block; }
.hero-art { pointer-events: none; }
html[data-motion="on"] .hero-art { transition: transform .85s var(--ease-out); animation: art-arrive 1.8s ease-out both; }
html[data-motion="on"] .hero-line > span { animation: line-arrive 1.15s var(--ease-out) both; }
html[data-motion="on"] .hero-line:nth-child(2) > span { animation-delay: .14s; }
html[data-motion="on"] .hero-eyebrow { animation: fade-up .9s var(--ease-out) .08s both; }
html[data-motion="on"] .hero-description { animation: fade-up 1s var(--ease-out) .32s both; }
html[data-motion="on"] .hero-actions { animation: fade-up 1s var(--ease-out) .44s both; }
html[data-motion="on"] .hero-feature { animation: fade-up 1s var(--ease-out) .58s both; }
html[data-motion="on"] .hero-footer { animation: fade-up 1s var(--ease-out) .68s both; }
html[data-motion="on"] .hero-eyebrow > span { animation: ember-arrive 2.4s ease-out .6s both; }
@keyframes line-arrive { from { transform: translate3d(0, 110%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes art-arrive { from { opacity: .15; } to { opacity: 1; } }
@keyframes ember-arrive { 0%, 100% { box-shadow: 0 0 0 0 #cf735500; } 40% { box-shadow: 0 0 0 9px #cf735518; } }

/* A common rhythm connects headings, product panels, and the affiliation banner. */
html[data-motion="on"] .will-reveal { transform: translate3d(0, 28px, 0); transition: opacity .85s var(--ease-out) var(--reveal-delay, 0ms), transform .85s var(--ease-out) var(--reveal-delay, 0ms); }
html[data-motion="on"] .will-reveal.is-visible { transform: translate3d(0, 0, 0); }
html[data-motion="on"] .solution-image { transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html[data-motion="on"] .solution-card.will-reveal:not(.is-visible) .solution-image { clip-path: inset(0 0 12% 0); transform: translate3d(0, 18px, 0); }
html[data-motion="on"] .solution-card.is-visible .solution-image { clip-path: inset(0); transform: translate3d(0, 0, 0); }
.solution-image img { transition: transform .9s var(--ease-out), filter .6s ease; }
.brand-logo img { transition: opacity .35s ease, transform .5s var(--ease-out); }

/* Show a single journey from tools to agents to the staff-facing workflow. */
.flow-connector { position: relative; overflow: hidden; }
.flow-connector::after { content: ''; position: absolute; inset: -1px 0; opacity: 0; background: linear-gradient(90deg, transparent, #e0b590 50%, transparent); }
html[data-motion="on"] .system-diagram.is-visible .flow-connector::after { animation: signal-pass 1.3s ease-in-out .45s both; }
html[data-motion="on"] .system-diagram.is-visible .flow-connector.right::after { animation-delay: 1.5s; }
html[data-motion="on"] .system-diagram.is-visible .core-orbit { animation: core-receive 1.6s ease-in-out .95s both; }
html[data-motion="on"] .system-diagram.is-visible .sources .flow-node { animation: node-receive 1.2s ease-out .15s both; }
html[data-motion="on"] .system-diagram.is-visible .outcomes .flow-node { animation: node-receive 1.4s ease-out 2s both; }
@keyframes signal-pass { 0% { transform: translateX(-100%); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes core-receive { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .6; transform: scale(.94); border-color: #e0b590; } }
@keyframes node-receive { 0%, 100% { border-color: #9cb38c70; } 40% { border-color: #e0b590; } }

/* Small responses make interactive elements feel deliberate. */
.button { transition: background .25s ease, color .25s ease, transform .4s var(--ease-out), box-shadow .4s ease; }
.button > span, .header-cta > span, .feature-icon, .down-arrow, .play-circle { transition: transform .4s var(--ease-out), background .3s ease, color .3s ease; }
.desktop-nav a, .footer-inner a:not(.brand) { position: relative; }
.desktop-nav a::after, .footer-inner a:not(.brand)::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.menu-toggle span { transition: transform .3s var(--ease-out); }
html[data-motion="on"] .mobile-nav:not([hidden]) { animation: menu-arrive .32s var(--ease-out) both; }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.button:focus-visible > span, .header-cta:focus-visible > span { transform: translate(2px, -2px); }
.desktop-nav a:focus-visible::after, .footer-inner a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .button-light:hover { box-shadow: 0 6px 18px #18251b16; }
  .button:hover > span, .header-cta:hover > span { transform: translate(3px, -3px); }
  .desktop-nav a:hover::after, .footer-inner a:hover::after { transform: scaleX(1); transform-origin: left; }
  .hero-feature:hover .feature-icon { transform: rotate(45deg); background: #f4f3ee; color: var(--dark); }
  .hero-footer a:hover .down-arrow { transform: translateY(5px); }
  .video-play:hover .play-circle { transform: scale(1.09); }
  .solution-card:hover .solution-image img { transform: scale(1.025); }
  .brand-logo:hover img { opacity: 1; transform: translateY(-3px); }
}
.button:active { transform: translateY(0); }
.motion-toggle { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; padding: 0; background: none; color: #bac3b2; font-size: 10px; white-space: nowrap; }
.motion-indicator { position: relative; width: 20px; height: 12px; border: 1px solid #87977e; border-radius: 20px; }
.motion-indicator::after { content: ''; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; background: #bac3b2; border-radius: 50%; transition: transform .2s ease; }
.motion-toggle[aria-checked="true"] .motion-indicator::after { transform: translateX(8px); }
.motion-toggle:disabled { cursor: default; }
@media (max-width: 800px) {
  html[data-motion="on"] .hero-art { animation: art-arrive-mobile 1.8s ease-out both; }
  .footer-inner > div { flex-wrap: wrap; }
}
@keyframes art-arrive-mobile { from { opacity: .15; } to { opacity: .65; } }
@media (max-width: 560px) {
  html[data-motion="on"] .hero-art { animation-name: art-arrive-small; }
  .flow-connector::after { inset: 0 -1px; background: linear-gradient(180deg, transparent, #e0b590 50%, transparent); }
  html[data-motion="on"] .system-diagram.is-visible .flow-connector::after { animation-name: signal-pass-vertical; }
  .motion-toggle { font-size: 9px; }
}
@keyframes art-arrive-small { from { opacity: .1; } to { opacity: .45; } }
@keyframes signal-pass-vertical { 0% { transform: translateY(-100%); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }

/* Both the OS preference and the in-page switch completely stop decorative motion. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .reading-progress { display: none; }
html[data-motion="off"] .will-reveal { opacity: 1; transform: none; }
html[data-motion="off"] :is(.hero-art, .hero-line > span, .solution-image, .solution-image img, .brand-logo img, .button, .button > span, .header-cta > span, .feature-icon, .down-arrow, .play-circle) { transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reading-progress { display: none; }
  .will-reveal { opacity: 1 !important; transform: none !important; }
  .hero-art, .hero-line > span, .solution-image, .solution-image img, .brand-logo img, .button, .button > span, .header-cta > span, .feature-icon, .down-arrow, .play-circle { transform: none !important; clip-path: none !important; }
}

/* Keyboard navigation must never land on a temporarily hidden control. */
.will-reveal:focus-within { opacity: 1 !important; transform: none !important; }
.hero-actions:focus-within { animation: none !important; }