/* Small animations for clicks and actions, on the public site and in the admin.
   Everything here is switched off for visitors who ask their device for reduced motion. */
html.fx body { animation: fx-page .45s ease both; }

/* press + ripple on buttons */
.fx-host { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: fx-ripple .6s ease-out forwards; }
html.fx .btn, html.fx .a-btn, html.fx .share__btn, html.fx .abtn, html.fx .card__cta { transition-property: transform, box-shadow, background-color, color, border-color, filter; transition-duration: .18s; }
html.fx .btn:active, html.fx .a-btn:active, html.fx .share__btn:active { transform: scale(.97); }

/* a button that is working on a click or a save */
.is-busy { position: relative; pointer-events: none; }
.btn.is-busy, .a-btn.is-busy { color: transparent !important; }
.btn.is-busy::after, .a-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(127, 127, 127, .35); border-top-color: currentColor; color: var(--on-accent, #13294B); animation: fx-spin .7s linear infinite; }
.btn--primary.is-busy::after, .a-btn--primary.is-busy::after { color: #fff; border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }

/* things coming into view */
html.fx-reveal [data-fx] { opacity: 0; }
html.fx-reveal [data-fx].is-in { opacity: 1; animation: fx-up .65s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--fx-d, 0ms); }
html.fx-reveal.fx-admin [data-fx].is-in { animation-duration: .4s; }

/* messages and details */
.notice, .a-flash { animation: fx-slide .5s cubic-bezier(.2, .7, .2, 1) both; }
.notice:not(.notice--error), .a-flash--ok { transform-origin: left center; }
details[open] > :not(summary) { animation: fx-fade .35s ease both; }
details > summary { transition: color .2s ease; }

/* little feedback on form fields */
input:focus-visible, textarea:focus-visible, select:focus-visible { transition: box-shadow .2s ease, border-color .2s ease; }
.a-form input, .a-form select, .a-form textarea, .form input, .form select, .form textarea { transition: box-shadow .2s ease, border-color .2s ease; }

/* the Travelbee bee: flies into the logo when the site opens (fx.js), and replaces the mouse pointer on a computer */
.fx-bee { position: fixed; left: -60px; top: -40px; width: 120px; height: 80px; z-index: 2147483000; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.fx-bee svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-bee__wing { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-flap .09s ease-in-out infinite alternate; }
.fx-bee__wing--b { animation-delay: -.045s; }
.fx-bee.is-landing .fx-bee__wing { animation-duration: .16s; }
.fx-bee.is-landed .fx-bee__wing { animation-duration: .4s; }
@keyframes fx-flap { from { transform: scaleY(1) rotate(0deg); } to { transform: scaleY(.3) rotate(-8deg); } }
/* while the flying bee is away, the little printed bee in the logo is rubbed out (the rest of the logo stays) */
.brand__logo.fx-beeaway {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--bw, 0) var(--bh, 0);
  -webkit-mask-position: 0 0, var(--bx, 0) var(--by, 0);
  -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 100% 100%, var(--bw, 0) var(--bh, 0);
  mask-position: 0 0, var(--bx, 0) var(--by, 0);
  mask-repeat: no-repeat; mask-composite: exclude;
}
@media (prefers-reduced-motion: reduce) { .fx-bee { display: none; } }

@keyframes fx-page { from { opacity: 0; } }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes fx-fade { from { opacity: 0; transform: translateY(-4px); } }
@keyframes fx-slide { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  html.fx body, html.fx-reveal [data-fx], .notice, .a-flash, details[open] > :not(summary), .fx-ripple { animation: none !important; }
  html.fx-reveal [data-fx] { opacity: 1 !important; }
}