/* Content rests in its final position; only the illustration follows the scroll. */
:root{--ease-expo:cubic-bezier(.16,1,.3,1)}
.taste-home .button,.workspace-tour [data-preview-button]{transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.taste-home .button:active:focus-visible{transform:none}
@media(prefers-reduced-motion:no-preference){
  .taste-home .button:active:not(:focus-visible),.workspace-tour [data-preview-button]:active:not(:focus-visible){transform:scale(.98)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .taste-home .text-link svg,.taste-home .button svg{transition:transform 180ms var(--ease-out)}
  .taste-home .text-link:hover svg,.taste-home .button:hover svg{transform:translateX(3px)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .taste-hero{view-timeline-name:--kiro-hero;view-timeline-axis:block}
    .taste-hero.motion-enabled.motion-ready .hosting-visual>svg{animation:kiro-server-drift auto linear both;animation-timeline:--kiro-hero;animation-range:exit 0% exit 100%}
    .taste-hero.motion-inactive .hosting-visual>svg{animation-play-state:paused}
  }
}
@keyframes kiro-server-drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){
  .taste-hero [data-server-layer],.taste-hero .hosting-visual>svg,.taste-home [data-reveal-part],.workspace-tour [data-preview-panel]{animation:none!important;translate:none}
  .taste-home .button,.taste-home .button svg,.taste-home .text-link svg,.workspace-tour [data-preview-button]{transition:background-color 180ms ease,color 180ms ease}
}