/* Playful shapes around product visuals (after hellomonday.com/work/the-web-can-do-what).
   Flat brand colours, thin ink outline, slow drift, react to the cursor. Built by js/floaters.js. */
.fl-host { position: relative; isolation: isolate; }
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.floaters.back { z-index: -1; }
.fl { position: absolute; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); pointer-events: auto; cursor: grab;
  transform: scale(0) rotate(calc(var(--r) - 40deg)); transition: transform 1.1s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
.fl-in .fl { transform: scale(1) rotate(var(--r)); }
.fl-m { width: 100%; height: 100%; will-change: transform; }
.fl-f { width: 100%; height: 100%; animation: fl-drift var(--t, 7s) ease-in-out var(--o, 0s) infinite alternate; }
.fl svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fl.pop .fl-f { animation: fl-pop .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fl-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(calc(var(--dx, 8px) * .6), calc(var(--dy, 10px) * -1)) rotate(calc(var(--dr, 6deg) * -1)); }
  100% { transform: translate(var(--dx, 8px), var(--dy, 10px)) rotate(var(--dr, 6deg)); }
}
@keyframes fl-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }

/* the cursor that clicks a shape now and then */
.fl-cur { position: absolute; width: 34px; height: 34px; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: transform; }
.fl-cur svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(22,24,29,.18)); }
.fl-ring { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid var(--ink, #16181d); border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0; }

@media (max-width: 760px) {
  .fl { width: calc(var(--w) * .6); height: calc(var(--h) * .6); margin: calc(var(--h) * -.3) 0 0 calc(var(--w) * -.3); }
  .fl.m-hide, .fl-cur, .fl-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl { transform: scale(1) rotate(var(--r)); transition: none; }
  .fl-f { animation: none; }
  .fl-cur, .fl-ring { display: none; }
}