/* ============================================================
   AUTOHIVE ESTATE MOTIFS
   Shared across every AutoHive site. Two devices that fill the
   white space either side of the content column:

     left   the division circuit line, in the division's colour
     right  a small swarm of bees that fly a loop and return
            into the honeycomb hive

   The bee stays gold on every site. It is the AutoHive
   brandmark and the Brand Guide permits only its four approved
   colourways, so the division colour is carried by the circuit
   line and the hive cells, never by the bee itself.

   Never place these on a hero or banner: hero imagery changes,
   and the motifs are meant to dress the quiet parts of a page.

   Usage:
     <div class="ah-motif ah-motif--left"  aria-hidden="true"></div>
     <div class="ah-motif ah-motif--right" aria-hidden="true"> ...hive markup... </div>
   with the host site setting --ah-motif-line and --ah-motif-accent.
   ============================================================ */

/* Each site sets --ah-motif-line and --ah-motif-accent in its own
   stylesheet. The values below are only fallbacks, declared inline
   rather than on :root so that a site's declaration always wins
   regardless of stylesheet order. */

/* The section that carries motifs must clip and position them. */
.ah-motif-host { position: relative; overflow: hidden; }

.ah-motif {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Content must sit above the decoration. */
.ah-motif-host > *:not(.ah-motif) { position: relative; z-index: 1; }

/* ---------- left: the division circuit line ---------- */
.ah-motif--left {
  left: -170px;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  height: 380px;
  background: var(--ah-motif-line, url('/ah-shared/brand/circuit-line-02.svg')) no-repeat center / contain;
  opacity: var(--ah-motif-opacity, .17);
}

/* ---------- right: bees returning to the hive ---------- */
.ah-motif--right {
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 300px;
}

/* The honeypot skep the bees return to, taken from the AutoHive
   careers artwork. Transparent ground, division colour via `color`.

   Inset 66px rather than 26px: the swarm box is deliberately hung 40px
   past the viewport edge so the flight paths can run off-page, but at
   26px that clipped the skep itself in half against the page edge. The
   box stays where it is, so nothing moves further over the text column;
   only the pot is pulled back into the white space. */
.ah-motif__hive {
  position: absolute;
  right: 66px;
  bottom: 14px;
  width: 118px;
  height: auto;
  color: var(--ah-motif-accent, #F5A623);
  opacity: .62;
}

.ah-motif__bee {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  /* The flight paths below all leave and return to the skep entrance at
     x 188, which was correct while the skep sat at right:26. It now sits
     40px further in, so the whole swarm shifts with it and the bees still
     land on the pot mouth. Done as a margin rather than a transform,
     because offset-path drives transform and the two would fight. */
  margin-left: -40px;
  opacity: 0;
  offset-rotate: auto 90deg;
  animation: ahBeeOrbit 17s linear infinite;
}

/* Four flight paths, each leaving and returning to the skep entrance
   at roughly (188, 250) in this 260 by 300 box. */
.ah-motif__bee--1 { offset-path: path("M 188 250 C 120 224, 60 168, 82 104 S 190 44, 214 108 S 220 214, 188 250"); animation-duration: 16s; animation-delay: 0s; }
.ah-motif__bee--2 { offset-path: path("M 188 250 C 226 200, 240 132, 196 82 S 78 66, 62 140 S 132 226, 188 250"); animation-duration: 19s; animation-delay: -5s; }
.ah-motif__bee--3 { offset-path: path("M 188 250 C 140 240, 84 206, 92 152 S 178 100, 210 148 S 218 226, 188 250"); animation-duration: 14s; animation-delay: -9s; }
.ah-motif__bee--4 { offset-path: path("M 188 250 C 214 180, 172 122, 112 128 S 56 198, 116 234 S 176 260, 188 250"); animation-duration: 21s; animation-delay: -13s; }

@keyframes ahBeeOrbit {
  0%   { offset-distance: 0%;   opacity: 0; }
  7%   { opacity: .85; }
  90%  { opacity: .85; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Browsers without offset-path: the bees simply rest by the hive. */
@supports not (offset-path: path("M 0 0 L 1 1")) {
  .ah-motif__bee { animation: none; opacity: .8; }
  .ah-motif__bee--1 { left: 150px; top: 206px; }
  .ah-motif__bee--2 { left: 196px; top: 186px; }
  .ah-motif__bee--3 { left: 172px; top: 224px; }
  .ah-motif__bee--4 { display: none; }
}

/* Motion is ambient, never demanded. */
@media (prefers-reduced-motion: reduce) {
  .ah-motif__bee { animation: none; opacity: .8; }
  .ah-motif__bee--1 { left: 150px; top: 206px; }
  .ah-motif__bee--2 { left: 196px; top: 186px; }
  .ah-motif__bee--3 { left: 172px; top: 224px; }
  .ah-motif__bee--4 { display: none; }
}

/* ---------- alternating sides ----------
   Consecutive sections mirror each other so the page does not stack
   every hive down one edge. Add --flip to every second motif host:
   the circuit line moves to the right and the skep to the left, with
   the swarm mirrored so the bees still fly outward from the hive. */
.ah-motif-host--flip .ah-motif--left {
  left: auto;
  right: -170px;
  transform: translateY(-50%) scaleX(-1);
}
.ah-motif-host--flip .ah-motif--right {
  right: auto;
  left: -40px;
  transform: translateY(-50%) scaleX(-1);
}

/* Narrow screens have no spare margin: the content column wins. */
@media (max-width: 1180px) { .ah-motif--right { display: none; } }
@media (max-width: 1024px) { .ah-motif--left  { display: none; } }