/* Finite, purposeful motion. Surfaces and reading geometry stay still. */

/* Active feedback and focus remain immediate, including on touch screens. */
.button.button-secondary:active:not(:disabled){background:var(--soft)}
.studio-tabs button:active{background:var(--studio-raised)}
.hero-workspace:focus-within,.studio-window:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.news-visual:focus-within{outline:2px solid var(--accent);outline-offset:4px}
:where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main .button-primary:focus-visible{
  background:#33332f;
  color:var(--surface);
}
:where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main .button-secondary:focus-visible{
  background:var(--soft);
  border-color:#b9b7ac;
  color:var(--ink);
}
.studio-task-result button:focus-visible{color:var(--studio-text)}

@media(prefers-reduced-motion:no-preference){
  /* No resting opacity or transform: script failure always leaves content visible.
     The observer adds is-revealed once; motion-complete makes completion final. */
  .motion-reveal.is-revealed{
    animation:zsky-reveal 520ms cubic-bezier(.2,.7,.25,1) var(--reveal-delay,0ms) 1 backwards;
  }
  .motion-reveal.is-revealed:focus-within,
  .motion-reveal.is-revealed.motion-complete{animation:none}

  @keyframes zsky-reveal{
    from{opacity:.88;transform:translateY(10px)}
    to{opacity:1;transform:none}
  }

}

@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .hero-workspace,.studio-window{
    transition:border-color .22s ease-out,box-shadow .22s ease-out;
  }
  .offers-grid>.offer{
    transition:border-color .2s ease-out,box-shadow .2s ease-out;
  }
  .studio-tabs button,.offer-family-button,.offer .tier-option>span{
    transition:color .18s ease-out,background-color .18s ease-out,border-color .18s ease-out;
  }
  :where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main :is(.button,.inline-link,.studio-task-result button)>.icon-arrow-right{
    transition:transform .18s ease-out;
  }
  :where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main :is(.button,.inline-link,.studio-task-result button):focus-visible>.icon-arrow-right{
    transform:translateX(3px);
  }
  .news-visual img{transition:transform .38s cubic-bezier(.2,.7,.25,1)}
  .news-entry:focus-within .news-visual img{transform:scale(1.012)}
}

@media(min-width:801px) and (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  :where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main :is(.button,.inline-link,.studio-task-result button):hover>.icon-arrow-right{
    transform:translateX(3px);
  }
  .news-entry:hover .news-visual img{transform:scale(1.012)}
}

@media(max-width:800px) and (prefers-reduced-motion:no-preference){
  .motion-reveal.is-revealed{
    animation-duration:300ms;
    animation-delay:clamp(0ms,var(--reveal-delay,0ms),60ms);
    animation-name:zsky-reveal-mobile;
  }
  @keyframes zsky-reveal-mobile{
    from{opacity:.92;transform:translateY(5px)}
    to{opacity:1;transform:none}
  }
  .motion-reveal.is-revealed:focus-within,
  .motion-reveal.is-revealed.motion-complete{animation:none}
}

/* Focus and content stay visible when motion is reduced. */
@media(prefers-reduced-motion:reduce){
  .motion-reveal,.motion-reveal.is-revealed,
  .hero-workspace,.hero-workspace:before,.studio-window,
  .offers-grid>.offer,.studio-tabs button,.offer-family-button,.offer .tier-option>span,
  .hero-code-lines .hero-code-added,.studio-diff .diff-added,.news-visual img,
  :where(.page-home,.page-plans,.page-product,.page-news,.page-about,.page-solutions,.page-faq,.page-contact) main :is(.button,.inline-link,.studio-task-result button)>.icon-arrow-right{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}