/* Smooth page changes and the branded busy overlay (see inc/transitions.php). */

/* Page-to-page fades in browsers that support cross-document view transitions. The header and ticker hold still. */
@view-transition{navigation:auto}
.site-header{view-transition-name:pc-header}
.pc-ticker{view-transition-name:pc-ticker}
::view-transition-old(root){animation:pc-vt-out .18s ease-in both}
::view-transition-new(root){animation:pc-vt-in .26s cubic-bezier(.16,1,.3,1) both}
@keyframes pc-vt-out{to{opacity:0}}
@keyframes pc-vt-in{from{opacity:0;transform:translateY(6px)}}

/* Busy overlay: faded paper backdrop, navy tile, the R mark turning like a coin with a lime ring sweeping round it. */
.pc-busy{position:fixed;inset:0;z-index:100200;display:grid;place-items:center;background:rgba(245,243,237,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;pointer-events:none}
html.pc-is-busy .pc-busy{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s;pointer-events:auto;cursor:progress}
.pc-busy__mark{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:22px;background:#101c2b;box-shadow:0 18px 40px -18px rgba(16,28,43,.55);perspective:400px}
.pc-busy__mark svg{display:block;transform-origin:50% 50%;animation:pc-busy-turn 1.4s cubic-bezier(.65,0,.35,1) infinite}
.pc-busy__mark::after{content:"";position:absolute;inset:-7px;border-radius:28px;border:3px solid transparent;border-top-color:#d7f53b;border-right-color:#d7f53b;animation:pc-busy-ring 1s linear infinite;opacity:.9}
html.pc-is-busy .pc-busy__mark{animation:pc-busy-pop .32s cubic-bezier(.16,1,.3,1) both}
@keyframes pc-busy-turn{0%{transform:rotateY(0)}55%,100%{transform:rotateY(360deg)}}
@keyframes pc-busy-ring{to{transform:rotate(360deg)}}
@keyframes pc-busy-pop{from{transform:scale(.92);opacity:0}}

/* The filter plugin's own card is replaced by the overlay above. */
.fppf-loader{display:none!important}

/* Filtered results: fade while loading, fade back in when the new set arrives. */
main.site-main{transition:opacity .2s ease}
main.site-main.fppf-results-loading{opacity:.4}
.pc-shop-layout main.site-main{animation:pc-results-in .32s cubic-bezier(.16,1,.3,1) both}
@keyframes pc-results-in{from{opacity:0;transform:translateY(8px)}}

/* Presses feel acknowledged rather than snapping. */
.button,.woocommerce a.button,.woocommerce button.button,button,.pc-filter-toggle,.prs-g-card,.category-story{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease}
.button:active,.woocommerce a.button:active,.woocommerce button.button:active,.pc-filter-toggle:active{transform:translateY(1px) scale(.985)}
.woocommerce a.button.loading,.woocommerce button.button.loading{opacity:.75;cursor:progress}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .pc-busy__mark svg{animation:pc-busy-pulse 1.6s ease-in-out infinite}
  .pc-busy__mark::after{animation:none;border-color:rgba(215,245,59,.6)}
  html.pc-is-busy .pc-busy__mark,.pc-shop-layout main.site-main{animation:none}
  .button:active,.woocommerce a.button:active,.woocommerce button.button:active,.pc-filter-toggle:active{transform:none}
  @keyframes pc-busy-pulse{50%{opacity:.55}}
}