/* Progressive motion: content is visible until site.js opts in.
   --reveal-delay is bounded to 0–168ms; hover never inherits that delay.
   translate keeps the entrance independent of each component's transform. */
:root{
  --motion-ease:cubic-bezier(.22,.72,.2,1);
  --motion-quick:240ms;
}
html .hero-copy,
html .hero-art{
  opacity:1;
  transform:none;
  animation:none;
}
.ks-reveal{opacity:1}
html.ks-motion-on .ks-reveal{
  transition:
    opacity 480ms var(--motion-ease) var(--reveal-delay,0ms),
    translate 480ms var(--motion-ease) var(--reveal-delay,0ms),
    transform var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) ease,
    background-color var(--motion-quick) ease !important;
}
html.ks-motion-on .ks-reveal:not(.is-in){
  opacity:0;
  translate:0 12px;
}
html.ks-motion-on .ks-reveal.is-in{
  opacity:1;
  translate:0 0;
}
html.ks-motion-on .ks-reveal:focus-within,
html.ks-motion-on .ks-reveal.ks-reveal-focus{
  opacity:1 !important;
  translate:0 0 !important;
  transition-duration:0s,0s,var(--motion-quick),var(--motion-quick),var(--motion-quick) !important;
  transition-delay:0s !important;
}

/* Existing and new ambient artwork runs only in an observed visible region.
   No JS, no IntersectionObserver, a hidden tab or reduced motion stays still. */
.hero-brand-mark,
.logo-orb,
.pc-demo-image,
.pc-demo-shine,
.studio-stage-core,
.studio-planet,
.cosmos-stars,
.ks-ambient,
.ks-ambient *{
  animation-play-state:paused !important;
}
.ks-ambient::before,
.ks-ambient::after,
.ks-ambient *::before,
.ks-ambient *::after{animation-play-state:inherit !important}
html.ks-motion-on:not(.ks-page-hidden):not(.ks-motion-reduced) .ks-ambient.is-motion-visible,
html.ks-motion-on:not(.ks-page-hidden):not(.ks-motion-reduced) .ks-ambient.is-motion-visible *{
  animation-play-state:running !important;
}
html.ks-page-hidden .ks-ambient,
html.ks-page-hidden .ks-ambient *,
html.ks-motion-reduced .ks-ambient,
html.ks-motion-reduced .ks-ambient *{
  animation-play-state:paused !important;
}

/* Small, finite reactions keep interface symbols readable. */
.principle-icon svg,
.section-icon svg,
.section-symbol svg,
.site-nav .ico > svg,
.card-arrow svg{
  transform-origin:center;
  transition:transform 320ms var(--motion-ease),color 240ms ease;
}
@media (hover:hover) and (pointer:fine){
  html.ks-motion-on .principle:hover .principle-icon svg,
  html.ks-motion-on .clarity-path li:hover .principle-icon svg{
    transform:translateY(-2px) rotate(-7deg) scale(1.08);
  }
  html.ks-motion-on .site-nav a:hover .ico > svg{
    transform:translateY(-1px) rotate(-5deg);
  }
  html.ks-motion-on .app-card:hover .card-arrow svg{
    transform:translateX(3px);
  }
}
html.ks-motion-on .app-card:focus-visible .card-arrow svg{transform:translateX(3px)}

.app-card{position:relative}
.card-arrow{
  position:absolute;
  inset-block-start:22px;
  inset-inline-end:20px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--ks-muted);
  pointer-events:none;
}
.card-arrow svg{width:22px;height:22px;display:block}
[dir="rtl"] .card-arrow{scale:-1 1}
.card-category{
  display:inline-block;
  margin-block-start:18px;
  padding:5px 8px;
  max-width:100%;
  border:1px solid var(--ks-line);
  border-radius:7px;
  color:var(--ks-muted);
  font-size:10px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:.035em;
  overflow-wrap:anywhere;
}

/* Both symbols remain in the DOM so theme changes preserve their artwork. */
[data-theme-label]{display:grid;place-items:center}
[data-theme-label] > svg{grid-area:1/1;width:20px;height:20px;transition:opacity 180ms ease,transform 240ms var(--motion-ease)}
[data-theme="dark"] .theme-moon,
[data-theme="light"] .theme-sun{opacity:0;transform:rotate(-40deg) scale(.65)}
[data-theme="dark"] .theme-sun,
[data-theme="light"] .theme-moon{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html .ks-reveal{
    opacity:1 !important;
    translate:none !important;
    transition:none !important;
  }
  .principle-icon svg,
  .section-icon svg,
  .section-symbol svg,
  .site-nav .ico > svg,
  .card-arrow svg{transform:none !important}
  .studio-stage{transform:none !important}
}
@media print{
  html .ks-reveal{opacity:1 !important;translate:none !important;transform:none !important}
}