/* Decorative motion is a separate layer: banner lettering and layouts stay intact. */
.motion-banner{position:relative;isolation:isolate}
.motion-layer {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  z-index:1;
  opacity:0;
  transition:opacity .6s ease;
}
.motion-enabled .motion-layer { opacity:1; }
.motion-banner > .banner-actions,
.motion-banner > .button { z-index:2; }
.motion-aura {
  position:absolute;
  width:38%;
  aspect-ratio:1;
  right:-5%;
  top:3%;
  border-radius:50%;
  background:radial-gradient(circle,#42bfff24 0,#106dff13 35%,transparent 68%);
  mix-blend-mode:screen;
  animation:studio-aura 12s ease-in-out infinite alternate;
}
.motion-sweep {
  position:absolute;
  top:-15%;
  left:40%;
  width:12%;
  height:130%;
  opacity:0;
  background:linear-gradient(90deg,transparent,#85d9ff16,transparent);
  transform:translateX(-150%) skewX(-22deg);
  animation:studio-sweep 13s ease-in-out infinite;
  mix-blend-mode:screen;
}
.motion-spark {
  position:absolute;
  left:var(--spark-x);
  top:var(--spark-y);
  width:var(--spark-size,4px);
  height:var(--spark-size,4px);
  border-radius:50%;
  background:#b9efff;
  box-shadow:0 0 7px 2px #22b5ff70;
  opacity:.1;
  animation:studio-spark var(--spark-time,7s) ease-in-out var(--spark-delay,0s) infinite;
}
.hero .motion-spark:nth-last-child(2),
.deployment .motion-spark:nth-last-child(2) { border-radius:0; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.contact .motion-aura { background:radial-gradient(circle,#69caff19,transparent 70%); }
.contact .motion-spark { background:#1b91ff;box-shadow:0 0 6px #1a9dff55; }

/* Content is visible by default; JS only arms below-the-fold entrances. */
.motion-enabled .motion-pending {
  opacity:0;
  transform:translate3d(0,18px,0);
}
.motion-reveal {
  transition:opacity .65s ease,transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease;
  transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms;
}
.motion-enabled .motion-pending:focus-within { opacity:1;transform:none; }
.motion-reveal.motion-shown { opacity:1;transform:none; }
.motion-enabled .benefit-art {
  animation:studio-float 6s ease-in-out infinite;
}
.benefit-grid article:nth-child(2) .benefit-art { animation-delay:-1.5s; }
.benefit-grid article:nth-child(3) .benefit-art { animation-delay:-3s; }
.benefit-grid article:nth-child(4) .benefit-art { animation-delay:-4.5s; }
.motion-enabled .package-fox { animation:studio-mascot 7s ease-in-out infinite;transform-origin:50% 90%; }
.motion-enabled .ai-card { animation:studio-float 8s ease-in-out -3s infinite; }
.motion-enabled .tech-react .icon { animation:studio-orbit 22s linear infinite; }
.motion-enabled .tech-chart .icon { animation:studio-chart 5s ease-in-out infinite;transform-origin:50% 100%; }
.motion-enabled .brand-mark i { animation:studio-logo 5s ease-in-out infinite; }
.motion-enabled .brand-mark i:nth-child(2) { animation-delay:.2s; }
.motion-enabled .brand-mark i:nth-child(3) { animation-delay:.4s; }

.motion-enabled .button { overflow:hidden;isolation:isolate; }
.motion-enabled :where(.button:not(.process-cta):not(.team-cta)) { position:relative; }
.motion-enabled .button::before {
  content:'';
  pointer-events:none;
  position:absolute;
  inset:-40% auto -40% -60%;
  width:32%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,#ffffff40,transparent);
  opacity:0;
}
.motion-enabled .hero-actions .button:first-child::before,
.motion-enabled .contact-actions .button:first-child::before {
  animation:studio-button-sheen 8.5s ease-in-out 1.2s infinite;
}
.motion-enabled .button .icon { transition:transform .25s ease; }
.motion-enabled .button:active { transform:translateY(0) scale(.98); }
.motion-enabled .swatches button { transition:transform .22s ease; }
.motion-enabled .swatches button[aria-pressed=true] { transform:scale(1.08); }
.motion-enabled .faq details[open]>p { animation:studio-detail-in .3s ease both; }
.motion-enabled .plan-tabs button { transition:background .2s,box-shadow .25s,transform .25s; }
.motion-enabled .plan-tabs button[aria-selected=true] { transform:translateY(-2px); }
.motion-enabled .technology-grid article { transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }

/* Pause work outside the viewport and when the document is hidden. */
.motion-banner:not(.motion-in-view) .motion-layer *,
section:not(.motion-in-view) .benefit-art,
section:not(.motion-in-view) .package-fox,
section:not(.motion-in-view) .ai-card,
section:not(.motion-in-view) .tech-react .icon,
section:not(.motion-in-view) .tech-chart .icon,
section:not(.motion-in-view) .button::before,
.motion-tab-hidden *, .motion-tab-hidden *::before {
  animation-play-state:paused!important;
}
html:not(.motion-enabled) .motion-layer *,
html:not(.motion-enabled) .benefit-art,
html:not(.motion-enabled) .package-fox,
html:not(.motion-enabled) .ai-card,
html:not(.motion-enabled) .tech-react .icon,
html:not(.motion-enabled) .tech-chart .icon,
html:not(.motion-enabled) .brand-mark i { animation:none; }
html:not(.motion-enabled) .motion-pending { opacity:1;transform:none; }
html:not(.motion-enabled) .motion-reveal { transition:none; }
html:not(.motion-enabled) .motion-layer { visibility:hidden; }

.motion-toggle {
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:30;
  display:flex;
  gap:7px;
  align-items:center;
  padding:10px 13px;
  border:1px solid #68baff66;
  border-radius:100px;
  background:#071c35ee;
  color:#e2f3ff;
  font:11px/1.4 Thai,Arial,sans-serif;
  box-shadow:0 3px 14px #04172d20;
  min-height:44px;
}
.motion-toggle svg { width:15px;height:15px;fill:currentColor; }
.motion-toggle:hover { background:#103459; }
.motion-toggle:disabled { opacity:.8; }
.motion-toggle:focus-visible { outline:3px solid #38bdf8;outline-offset:3px; }

@media(hover:hover) and (pointer:fine) {
  .motion-enabled .button:hover .icon:last-child { transform:translateX(3px); }
  .motion-enabled .button:hover::before { animation:studio-button-sheen 1.1s ease; }
  .motion-enabled .work-card.motion-shown:hover,
  .motion-enabled .technology-grid article.motion-shown:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 24px #1c65b51a;
    border-color:#88bcff;
  }
}
@media(max-width:760px) {
  .motion-toggle { right:10px;bottom:10px;padding:9px 11px;font-size:10px;min-height:44px; }
  .motion-spark { --spark-size:3px!important; }
  .motion-spark:nth-last-child(-n+2) { display:none; }
  .motion-aura { width:60%;top:48%;right:-15%; }
  .motion-sweep { top:45%;height:60%;width:20%; }
  .motion-enabled .benefit-art { animation-name:studio-float-small; }
  .motion-enabled .motion-pending { transform:translate3d(0,12px,0); }
}
@keyframes studio-aura { from{transform:translate3d(0,0,0) scale(.94);opacity:.4}to{transform:translate3d(-12%,8%,0) scale(1.06);opacity:.9} }
@keyframes studio-sweep { 0%,15%{transform:translateX(-150%) skewX(-22deg);opacity:0}35%{opacity:.7}70%,100%{transform:translateX(580%) skewX(-22deg);opacity:0} }
@keyframes studio-spark { 0%,100%{transform:translate3d(0,0,0) scale(.7);opacity:.12}50%{transform:translate3d(-6px,-12px,0) scale(1);opacity:.7} }
@keyframes studio-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes studio-float-small { 0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)} }
@keyframes studio-mascot { 0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-4px) rotate(.6deg)} }
@keyframes studio-orbit { to{transform:rotate(360deg)} }
@keyframes studio-chart { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)} }
@keyframes studio-logo { 0%,70%,100%{opacity:1}82%{opacity:.55} }
@keyframes studio-button-sheen { 0%,65%{left:-60%;opacity:0}70%{opacity:.65}89%,100%{left:135%;opacity:0} }
@keyframes studio-detail-in { from{opacity:.35;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce) {
  .motion-layer{display:none!important}
  .motion-pending{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print {
  .motion-toggle,.motion-layer{display:none!important}
  .motion-pending{opacity:1!important;transform:none!important}
}