/* Decorations occupy the host's existing breathing room without adding space. */
.has-doodles {
  position: relative;
  isolation: isolate;
}

.has-doodles > .doodle-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  overflow: clip;
  user-select: none;
}

.doodle-field,
.doodle-field * {
  pointer-events: none !important;
}

.doodle {
  position: absolute;
  display: block;
  width: var(--doodle-size, 40px);
  aspect-ratio: 1;
  color: var(--doodle-color);
  opacity: .94;
}

.doodle--lime { --doodle-color: var(--accent-lime, #8fc33f); }
.doodle--cyan { --doodle-color: var(--accent-cyan, #4fc9f5); }
.doodle--teal { --doodle-color: var(--accent-teal, #16a399); }
.doodle--purple { --doodle-color: var(--accent-purple, #67308c); }
.doodle--gold { --doodle-color: var(--accent-gold, #ffc631); }
.doodle--pink { --doodle-color: var(--accent-pink, #ee3380); }

.doodle--top-start {
  top: 12px;
  left: max(12px, calc(var(--gutter, 48px) * .8));
}
.doodle--top-middle {
  top: 10px;
  left: calc(50% - var(--doodle-size, 40px) / 2);
}
.doodle--top-end {
  top: 12px;
  right: max(12px, calc(var(--gutter, 48px) * .8));
}
.doodle--bottom-start {
  bottom: 14px;
  left: max(12px, calc(var(--gutter, 48px) * 1.15));
}
.doodle--bottom-middle {
  bottom: 16px;
  left: calc(50% - var(--doodle-size, 40px) / 2);
}
.doodle--bottom-end {
  bottom: 16px;
  right: max(12px, var(--gutter, 48px));
}
.doodle-field--pricing .doodle--top-end {
  top: 4px;
}

@media (min-width: 1024px) {
  .doodle-field--hero .doodle--bottom-start {
    width: 110px;
    left: 32%;
    top: 67%;
    bottom: auto;
    opacity: .55;
  }
}

.doodle__scroll,
.doodle__float {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.doodle__scroll {
  transform: translate3d(var(--doodle-scroll-x, 0px), var(--doodle-scroll-y, 0px), 0) rotate(var(--doodle-scroll-turn, 0deg));
}

.doodle__float {
  transform: rotate(var(--doodle-base-turn, 0deg));
}

.doodle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doodle svg * {
  vector-effect: non-scaling-stroke;
}

.doodle[data-doodle-clear="false"] {
  visibility: hidden;
}

/* No script means a static drawing. Offscreen, paused, and background tabs do
   not keep the idle animation running. Scroll transforms use a separate layer. */
.doodle-field.is-doodle-ready .doodle__float {
  animation: doodle-float var(--doodle-duration, 9s) ease-in-out var(--doodle-delay, 0s) infinite;
  animation-play-state: paused;
}

.doodle-field.is-doodle-ready.is-doodle-active .doodle__float {
  animation-play-state: running;
}

@keyframes doodle-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--doodle-base-turn, 0deg)); }
  50% { transform: translate3d(0, -3px, 0) rotate(calc(var(--doodle-base-turn, 0deg) + 2deg)); }
}

.motion-paused .doodle-field .doodle__float {
  animation-play-state: paused !important;
}

@media (max-width: 767px) {
  .doodle {
    width: min(var(--doodle-size, 40px), 28px);
  }
  .doodle[data-doodle-mobile="hide"] {
    display: none;
  }
  .doodle--top-start,
  .doodle--top-middle,
  .doodle--top-end {
    top: 6px;
  }
  .doodle--top-start { left: 20px; }
  .doodle--top-end { right: 20px; }
  .doodle--top-middle,
  .doodle--bottom-middle { left: calc(50% - 14px); }
  .doodle--bottom-start { bottom: 12px; left: 24px; }
  .doodle--bottom-end { bottom: 12px; right: 24px; }
  .doodle-field--pricing .doodle--top-end { top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .doodle-field .doodle__float {
    animation: none !important;
    transform: rotate(var(--doodle-base-turn, 0deg));
  }
  .doodle-field .doodle__scroll {
    transform: none !important;
  }
}