/* Motion layer: composition and colors are owned by style.css. */
:root { --motion-out: cubic-bezier(.23, 1, .32, 1); --motion-smooth: cubic-bezier(.77, 0, .175, 1); }

/* Replace legacy list-entry keyframes so lifecycle motion has a single owner. */
.token-card { animation: none; }
.motion-await { opacity: 0; }
.motion-paused *, .motion-paused::before, .motion-paused::after { animation-play-state: paused !important; }

.token-art { perspective: 1000px; transform-origin: 50% 50%; }
.token-art > img { transform-origin: 50% 50%; transition: transform 220ms var(--motion-out); }
.token-art.motion-tracking { will-change: transform; }
.token-art.motion-tracking > img { will-change: transform; transition: none; }
.art-shine { position: absolute; z-index: 3; inset: -35%; background: radial-gradient(ellipse at center, #fff2, #fff0 55%); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.motion-hover .art-shine { opacity: .8; }
.art-ambient { animation: social-art-breathe 7s var(--motion-smooth) infinite; transform-origin: 50% 50%; pointer-events: none; }
.art-orbit { animation: social-orbit-turn 24s linear infinite; pointer-events: none; }
.art-orbit::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffffffe0; top: -3px; left: calc(50% - 3px); box-shadow: 0 0 0 3px #ffffff12; }
.art-message { animation: social-message-hover 5.2s var(--motion-smooth) infinite; pointer-events: none; }
.token-card:nth-child(2n) .art-message { animation-delay: -1.8s; }
.token-card:nth-child(3n) .art-ambient { animation-delay: -2s; }

@keyframes social-art-breathe { 0%,100% { opacity: .28; } 50% { opacity: .6; } }
@keyframes social-orbit-turn { to { rotate: 360deg; } }
@keyframes social-message-hover { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -5px; rotate: 1deg; } }

/* Explanatory scene moves without pretending to execute a live AI job. */
.agent-demo-stage .stage-output { transition: opacity 200ms var(--motion-out), transform 240ms var(--motion-out); }
.agent-demo-stage .stage-output.is-entering { opacity: 0; transform: translateY(8px); }
.agent-demo-stage .stage-output.is-active { opacity: 1; transform: translateY(0); }
.agent-demo-stage .platform-icon { animation: social-icon-hover 6s var(--motion-smooth) infinite; }
.agent-demo-stage .platform-icon:nth-of-type(2n) { animation-delay: -2.5s; }
@keyframes social-icon-hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }

.agent-workflow [data-flow-node] { transition: opacity 200ms ease, transform 220ms var(--motion-out); }
.agent-workflow [data-flow-node].active { transform: translateY(-2px); }
.capability-card .platform-icon { transition: transform 180ms var(--motion-out); }

@media (hover: hover) and (pointer: fine) {
  .token-card { transition: transform 220ms var(--motion-out), border-color 180ms ease; }
  .token-card:hover { transform: translateY(-4px); }
  .token-card .token-card-actions .button span { display: inline-block; transition: transform 160ms var(--motion-out); }
  .token-card:hover .token-card-actions .button span { transform: translateX(2px); }
  .capability-card:hover .platform-icon { transform: translateY(-3px) rotate(-4deg); }
}

.button { transition: transform 140ms var(--motion-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.button:active, .chip:active { transform: scale(.975); }
.button:focus-visible:active, .chip:focus-visible:active { transform: none; }

::view-transition-group(social-page) { animation-duration: 220ms; }
::view-transition-old(social-page) { animation: social-route-out 120ms var(--motion-out) both; mix-blend-mode: normal; }
::view-transition-new(social-page) { animation: social-route-in 220ms var(--motion-out) both; mix-blend-mode: normal; }
@keyframes social-route-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes social-route-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (hover: none), (pointer: coarse) {
  .token-card:hover { transform: none; }
  .token-art > img { transition: none; }
  .art-shine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-await { opacity: 1; }
  .token-card, .token-art, .token-art > img, .art-ambient, .art-orbit, .art-message,
  .agent-demo-stage .platform-icon, .stage-output, .capability-card .platform-icon,
  .button, .chip { animation: none !important; transition: none !important; }
  .token-card:hover, .button:active, .chip:active { transform: none !important; }
  .art-shine { display: none; }
  ::view-transition-old(social-page), ::view-transition-new(social-page) { animation: none; }
}