/* The bloom of the design's call-to-action buttons, from the home page: on hover the fill grows a little and a blurred
   gradient glows under it. Every yellow Pro button has it (base.css .btn-pro, the header pill in chrome.css, the
   footers' .ft-pro, the Pro page's .pro-btn--pro, the in-app header's .yx-pro-btn and the account menu's
   .yx-m-upg), any other button takes it with .bloom and its own --bloom-fill
   and --bloom-glow. The fill is the ::before, so the buttons themselves carry no background.
   Loaded by common/v2/shell and common/bodies/shards. Margin has the same in app/bloom.css, keep the two alike */

.btn-pro,.pro-btn--pro,.ft-pro{--bloom-fill:#FFA000;--bloom-glow:#FFA000,#FFC966;--bloom-o:.8}
.yx-pro-btn,.yx-m-upg{--bloom-fill:var(--yx-pro,#F5A300);--bloom-glow:#F5A300,#FFC966;--bloom-o:.8}

.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom{position:relative;isolation:isolate}
:is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom)::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
      background:var(--bloom-fill,#006EDB);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
:is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom):hover::before{transform:scale(1.06)}
:is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom)::after{content:"";position:absolute;left:10%;right:10%;top:45%;bottom:-14px;z-index:-2;border-radius:50%;pointer-events:none;
      background:linear-gradient(90deg,var(--bloom-glow,#006EDB,#68A9DD),var(--bloom-glow,#006EDB,#68A9DD)) 0 0/300% 100%;filter:blur(14px);
      opacity:0;transform:scaleX(.7);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
:is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom):hover::after{opacity:var(--bloom-o,.85);transform:none;animation:bloom-glow 2.4s ease-in-out infinite}
@keyframes bloom-glow{0%{background-position:0 0;translate:-6% 0}50%{background-position:100% 0;translate:6% 2px}100%{background-position:0 0;translate:-6% 0}}
@media (prefers-reduced-motion:reduce){
  :is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom)::before{transition:none}
  :is(.btn-pro,.pro-btn--pro,.ft-pro,.yx-pro-btn,.yx-m-upg,.bloom):hover::after{animation:none}
}