:root { --ease-out: cubic-bezier(.23,1,.32,1); --ease-state: cubic-bezier(.77,0,.175,1); }
@keyframes novel-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes novel-line { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes novel-mark { from { opacity: 0; transform: translate3d(18px,32px,12px) rotateX(10deg) rotateY(-12deg) rotate(-12deg) scale(.94); } to { opacity: 1; transform: translate3d(0,0,12px) rotateX(0) rotateY(0) rotate(-7deg) scale(1); } }
@keyframes novel-frame { from { opacity: 0; transform: rotate(-4deg) translateZ(-12px) scale(.95); } to { opacity: 1; transform: rotate(7deg) translateZ(-12px) scale(1); } }
@keyframes novel-finish { 0% { opacity: 0; transform: translateX(0) rotate(-10deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(360%) rotate(-10deg); } }
@keyframes novel-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes novel-menu { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* One brand sequence: experience, promise, identity, then the next action. */
:root[data-motion=enabled] .hero-label { animation: novel-enter 500ms var(--ease-out) 40ms both; }
:root[data-motion=enabled] .hero-line-inner { animation: novel-line 850ms var(--ease-out) 100ms both; }
:root[data-motion=enabled] .hero-line:last-child .hero-line-inner { animation-delay: 220ms; }
:root[data-motion=enabled] .hero-body { animation: novel-enter 640ms var(--ease-out) 340ms both; }
:root[data-motion=enabled] .hero-actions { animation: novel-enter 560ms var(--ease-out) 460ms both; }
:root[data-motion=enabled] .brand-art-inner { animation: novel-mark 1100ms var(--ease-out) 80ms both; }
:root[data-motion=enabled] .brand-art-frame { animation: novel-frame 1100ms var(--ease-out) 160ms both; }
:root[data-motion=enabled] .brand-art-inner:before { animation: novel-finish 900ms var(--ease-out) 620ms both; }
:root[data-motion=enabled] .brand-art-inner:after { transform-origin: left; animation: novel-rule 700ms var(--ease-out) 600ms both; }
:root[data-motion=enabled] .brand-signature { animation: novel-enter 620ms var(--ease-out) 540ms both; }
:root[data-motion=enabled] .brand-caption { animation: novel-enter 540ms var(--ease-out) 640ms both; }
:root[data-motion=enabled] .context-section[data-revealed=true] .context-label { animation: novel-enter 480ms var(--ease-out) both; }
:root[data-motion=enabled] .context-section[data-revealed=true] h2 { animation: novel-enter 620ms var(--ease-out) 70ms both; }
:root[data-motion=enabled] .context-section[data-revealed=true] .context-columns { animation: novel-enter 620ms var(--ease-out) 140ms both; }
[data-reveal] { transition: opacity 580ms var(--ease-out), transform 580ms var(--ease-out); }
.motion-pending { opacity: 0; transform: translateY(22px); }
.motion-pending:focus-within { opacity: 1; transform: none; }
.brand-button.mud-button-root { transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.brand-button.mud-button-root:active { transform: scale(.98); }
.brand-button .mud-button-icon-end, .quiet-link .mud-icon-root { transition: transform 180ms var(--ease-out); }
.quiet-link, .desktop-nav .mud-link { transition: color 150ms ease; }
.desktop-nav a:after { transition: transform 180ms var(--ease-out); }
.desktop-nav a:hover:after, .desktop-nav a:focus-visible:after { transform: scaleX(1); }
.principles .mud-collapse-container { transition-duration: 240ms !important; transition-timing-function: var(--ease-out) !important; }
.principles .mud-expand-panel-icon { transition: transform 200ms var(--ease-out); }
.mobile-nav:not([hidden]) { animation: novel-menu 200ms var(--ease-out) both; }
.mud-menu-list { animation: novel-menu 160ms var(--ease-out) both; }
.mud-dialog { animation: novel-enter 220ms var(--ease-out) both; }
:root[data-theme-changing] body, :root[data-theme-changing] .site-header,
:root[data-theme-changing] .trace-card, :root[data-theme-changing] .platform-card,
:root[data-theme-changing] .mud-dialog, :root[data-theme-changing] .mud-popover {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand-button.mud-button-root:hover { transform: translateY(-2px); }
  .brand-button.mud-button-root:active { transform: scale(.98); }
  .brand-button:hover .mud-button-icon-end { transform: translateX(3px); }
  .quiet-link:hover .mud-icon-root { transform: translate(2px,-2px); }
  .product-image img { transition: transform 420ms var(--ease-out); }
  .trace-card:hover .product-image img { transform: scale(1.025); }
}
:root[data-input=keyboard] .mud-collapse-container,
:root[data-input=keyboard] .mud-expand-panel-icon { transition: none !important; }
:root[data-input=keyboard] .mud-dialog, :root[data-input=keyboard] .mobile-nav,
:root[data-input=keyboard] .mud-menu-list { animation: none !important; }
:root[data-input=keyboard] .brand-button:active { transform: none; }
:root[data-motion=reduced] *, :root[data-motion=reduced] *:before,
:root[data-motion=reduced] *:after { animation: none !important; transition: none !important; }
:root[data-motion=reduced] .motion-pending { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .motion-pending { opacity: 1; transform: none; }
}