/* Stable, shared motion for every public PixFlow route. */
html{scrollbar-gutter:stable;overflow-x:hidden}
body{overflow-x:hidden}
main,.page-wrap{width:100%;min-width:0}
main#main-content *,main#main-content *::before,main#main-content *::after{min-width:0}
img,video,canvas,svg,iframe{max-width:100%}
input,select,textarea,button{max-width:100%}
table{max-width:100%}

/* Native same-origin page transition. The shared chrome stays visually fixed while
   only the document content crossfades, so navigation never shifts the layout. */
@view-transition{navigation:auto}
.navbar{view-transition-name:pixflow-header}
main#main-content{view-transition-name:pixflow-content}
.pf-footer{view-transition-name:pixflow-footer}

::view-transition-group(pixflow-header){
  animation-duration:.18s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(pixflow-header),
::view-transition-new(pixflow-header){animation:none;mix-blend-mode:normal}

::view-transition-group(pixflow-content),
::view-transition-group(pixflow-footer){
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(pixflow-content),
::view-transition-old(pixflow-footer){
  animation:pixflow-page-out .16s ease both;
  mix-blend-mode:normal;
}
::view-transition-new(pixflow-content),
::view-transition-new(pixflow-footer){
  animation:pixflow-page-in .32s cubic-bezier(.22,1,.36,1) both;
  mix-blend-mode:normal;
}
@keyframes pixflow-page-out{from{opacity:1}to{opacity:0}}
@keyframes pixflow-page-in{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}

/* Premium interactions without changing element dimensions. */
a,button,input,select{transition-property:color,background-color,border-color,box-shadow,opacity,transform;transition-duration:.2s;transition-timing-function:ease}
button:active,.pf-button:active,.btn-primary:active{transform:scale(.98)}

/* Disable delayed entrance effects that repaint content after it is visible. */
main#main-content>*,main#main-content section,main#main-content article,
main#main-content h1,main#main-content h2,main#main-content [class*="-card"]{
  animation:none!important;
}

/* Stable responsive media and text wrapping. */
main#main-content{min-height:40vh}
main#main-content h1,main#main-content h2,main#main-content h3{overflow-wrap:break-word}
main#main-content img{height:auto}
@media(max-width:760px){
  main#main-content{overflow-x:hidden}
  main#main-content table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main#main-content .items-grid,main#main-content .services-grid,main#main-content .apps-grid,main#main-content .store-grid,main#main-content .fav-grid{grid-template-columns:minmax(0,1fr)}
  main#main-content input,main#main-content select,main#main-content textarea{width:100%;font-size:16px}
  main#main-content .container,main#main-content .pf-shell,main#main-content .pgc,main#main-content .rec-wrap{max-width:100%;padding-left:18px;padding-right:18px}
}
@media(max-width:480px){
  main#main-content .rec-masonry,main#main-content .pg-grid,main#main-content .pf-products{grid-template-columns:minmax(0,1fr)!important;columns:1!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}