/* Local motion layer. All decorative effects are optional and pauseable. */
.ecosystem { overflow: clip; }
.motion-toggle { color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 8px 13px; min-height: 44px; font-size: .7rem; cursor: pointer; }
.motion-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.motion-toggle[hidden] { display: none; }
.service-card { position: relative; isolation: isolate; }
.service-card::before, .contact-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #53e8ff1c, transparent 70%); transition: opacity .3s; z-index: -1; }
.contact-panel { isolation: isolate; }
.contact-panel::before { z-index: 0; }
.service-card.violet::before { background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #a58aff25, transparent 70%); }
.service-card.green::before { background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #00ffb21c, transparent 70%); }
.service-card:focus-within::before { opacity: 1; }
.service-card:focus-within { border-color: var(--accent); }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, #ffffff40 48%, transparent 75%); transform: translateX(-140%); }
.button span[aria-hidden], .service-link span, .service-top img, .orbit-node, .method-grid li, .step-number, .about-principles > div > span { transition: transform .3s, box-shadow .3s, border-color .3s, color .3s; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .hero { background-size: 140% 140%; animation: ambient-drift 14s ease-in-out infinite alternate; }
  html:not(.motion-paused) .hero-copy > * { animation: hero-arrive .85s both; }
  html:not(.motion-paused) .hero-copy > :nth-child(2) { animation-delay: .1s; }
  html:not(.motion-paused) .hero-copy > :nth-child(3) { animation-delay: .2s; }
  html:not(.motion-paused) .hero-copy > :nth-child(4) { animation-delay: .3s; }
  html:not(.motion-paused) .hero-copy > :nth-child(5) { animation-delay: .4s; }
  html:not(.motion-paused) .hero .gradient-text { background-size: 230% auto; animation: spectrum 9s ease-in-out infinite alternate; }
  html:not(.motion-paused) .orbit-outer { animation: orbit-turn 65s linear infinite; }
  html:not(.motion-paused) .orbit-middle { animation: orbit-turn 32s linear infinite reverse; }
  html:not(.motion-paused) .orbit-inner { animation: orbit-breathe 5s ease-in-out infinite; }
  html:not(.motion-paused) .ecosystem-core { animation: core-glow 5s ease-in-out infinite; }
  html:not(.motion-paused) .ecosystem-lines > path { stroke-dasharray: 7 12; animation: data-flow 4s linear infinite; }
  html:not(.motion-paused) .hero .status-dot { animation: signal 3s ease-in-out infinite; }
  .ecosystem { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .35s ease-out; }
  .service-card { transition: opacity .65s, transform .3s, border-color .3s, box-shadow .3s; }
  html:not(.motion-paused) .service-card:nth-child(2).is-pending { transition-delay: .08s; }
  html:not(.motion-paused) .service-card:nth-child(3).is-pending { transition-delay: .16s; }
  html:not(.motion-paused) .service-card:nth-child(4).is-pending { transition-delay: .24s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-paused) .service-card:hover { transform: perspective(950px) translateY(-8px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); box-shadow: 0 18px 42px #0004; }
  html:not(.motion-paused) .service-card:hover::before, html:not(.motion-paused) .contact-panel:hover::before { opacity: 1; }
  html:not(.motion-paused) .service-card:hover .service-top img { transform: translateY(-3px) rotate(-8deg) scale(1.1); box-shadow: 0 0 24px #53e8ff1c; }
  html:not(.motion-paused) .service-link:hover span { transform: translate(3px, -3px); }
  html:not(.motion-paused) .button:hover::before { animation: button-shine .7s ease-out; }
  html:not(.motion-paused) .button:hover span[aria-hidden] { transform: translateX(4px); }
  html:not(.motion-paused) .orbit-node:hover { animation-play-state: paused; border-color: var(--cyan); box-shadow: 0 0 28px #53e8ff30; }
  html:not(.motion-paused) .method-grid li:hover { transform: translateY(-6px); border-color: var(--cyan); }
  html:not(.motion-paused) .method-grid li:hover .step-number { transform: translateX(6px); color: #a8f5ff; }
  html:not(.motion-paused) .about-principles > div:hover > span { display: inline-block; transform: rotate(15deg) scale(1.2); }
}
@keyframes ambient-drift { from { background-position: 0 30%; } to { background-position: 100% 80%; } }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes spectrum { from { background-position: 0 center; } to { background-position: 100% center; } }
@keyframes orbit-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-breathe { 50% { opacity: .45; transform: translate(-50%, -50%) scale(1.07); } }
@keyframes core-glow { 50% { box-shadow: 0 0 65px #53e8ff28, inset 0 1px 25px #53e8ff16; border-color: #83ecfbb0; } }
@keyframes data-flow { to { stroke-dashoffset: -76; } }
@keyframes signal { 50% { box-shadow: 0 0 0 5px #00ffb210, 0 0 16px #00ffb255; } }
@keyframes button-shine { to { transform: translateX(140%); } }
/* Pause ongoing motion offscreen, in background tabs, or at the visitor's request. */
.motion-offscreen, .motion-offscreen *, .motion-offscreen::before,
.page-hidden *, .page-hidden *::before,
.motion-paused *, .motion-paused *::before { animation-play-state: paused !important; }
.motion-paused .ecosystem, .motion-paused .service-card:hover { transform: none; }
.motion-paused .reveal.is-pending { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ecosystem, .service-card:hover, .button:hover { transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}