/**
 * biopama_libraries/busy: the only custom CSS behind window.biopamaBusy.
 * Everything Bootstrap 5 has a utility for is a class set by js/busyRender.js;
 * this file holds the custom properties those classes cannot express, the
 * BIOPAMA triple-ring icon, the per-preset hooks for values presets must not
 * write from JS, and the print rule.
 */

.biopama-busy {
  --biopama-busy-x: 50%;
  --biopama-busy-y: 50%;
  --biopama-busy-tx: -50%;
  --biopama-busy-ty: -50%;
  --biopama-busy-ox: 0px;
  --biopama-busy-oy: 0px;
  --biopama-busy-ring-size: 40px;
  --biopama-busy-ring-border: 3px;
  --biopama-busy-ring-1: #70b6d1;
  --biopama-busy-ring-2: #90c14f;
  --biopama-busy-ring-3: #a15b28;
  /* .z-3 wins when present; no default is declared here, so the preset hooks
     below are not a source-order question. */
  z-index: var(--biopama-busy-z, 3);
}

.biopama-busy.biopama-busy-color-custom {
  color: var(--biopama-busy-color);
}

/* The item is placed by variables in cover and fullscreen modes only. */
.biopama-busy-item-placed {
  left: var(--biopama-busy-x);
  top: var(--biopama-busy-y);
  transform: translate(var(--biopama-busy-tx), var(--biopama-busy-ty)) translate(var(--biopama-busy-ox), var(--biopama-busy-oy));
}

.biopama-busy-x-start { --biopama-busy-x: 0; --biopama-busy-tx: 0; }
.biopama-busy-x-center { --biopama-busy-x: 50%; --biopama-busy-tx: -50%; }
.biopama-busy-x-end { --biopama-busy-x: 100%; --biopama-busy-tx: -100%; }
.biopama-busy-y-start { --biopama-busy-y: 0; --biopama-busy-ty: 0; }
.biopama-busy-y-center { --biopama-busy-y: 50%; --biopama-busy-ty: -50%; }
.biopama-busy-y-end { --biopama-busy-y: 100%; --biopama-busy-ty: -100%; }

.biopama-busy-backdrop-custom {
  background-color: var(--biopama-busy-backdrop);
  opacity: var(--biopama-busy-backdrop-opacity, 1);
}

.biopama-busy-bar-custom {
  background-color: var(--biopama-busy-color);
}

/* Preset hooks: values the presets leave to the stylesheet (null in
   js/busyRender.js) so that neither JS nor the Twig template writes a style. */
.biopama-busy[data-biopama-busy="page"] {
  --biopama-busy-z: 10000;
}

/* Page preset: the backdrop element itself is transparent (the bg-* class
   reads --bs-bg-opacity on the element); two 51% curtains painted by its
   pseudo-elements carry the colour. On hide (.show removed) the curtains
   slide apart, the ring fades, then the whole overlay slides up: the
   original Conservation Tracking loader sequence, about 1.3 s in total. */
.biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop {
  --bs-bg-opacity: 0;
}

.biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::before,
.biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background-color: rgba(var(--bs-black-rgb), 0.95);
  transition: transform 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::before {
  left: 0;
}

.biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::after {
  right: 0;
}

.biopama-busy[data-biopama-busy="page"] .biopama-busy-item {
  transition: opacity 0.3s ease-out;
}

/* Overrides Bootstrap's .fade opacity transition for this preset only:
   appearing is instant, leaving slides up after the curtains have opened. */
.biopama-busy[data-biopama-busy="page"].fade {
  transition: transform 0.3s 1s ease-out;
}

.biopama-busy[data-biopama-busy="page"].fade.show {
  transition: none;
}

.biopama-busy[data-biopama-busy="page"].fade:not(.show) {
  opacity: 1;
  transform: translateY(-100%);
}

.biopama-busy[data-biopama-busy="page"]:not(.show) > .biopama-busy-backdrop::before {
  transform: translateX(-100%);
}

.biopama-busy[data-biopama-busy="page"]:not(.show) > .biopama-busy-backdrop::after {
  transform: translateX(100%);
}

.biopama-busy[data-biopama-busy="page"]:not(.show) .biopama-busy-item {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .biopama-busy[data-biopama-busy="page"].fade,
  .biopama-busy[data-biopama-busy="page"] .biopama-busy-item,
  .biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::before,
  .biopama-busy[data-biopama-busy="page"] > .biopama-busy-backdrop::after {
    transition: none;
  }
}

.biopama-busy[data-biopama-busy="card"] > .biopama-busy-backdrop {
  --bs-bg-opacity: 0.85;
}

.biopama-busy[data-biopama-busy="bar"] {
  --bs-progress-height: 0.5rem;
}

/* An empty chart or card body gets room for the spinner (added by JS only
   when the host is shorter than the icon). */
.biopama-busy-host-grow {
  min-height: 3.5rem;
}

/* The BIOPAMA triple ring, on Bootstrap's own spinner-border keyframe. */
.biopama-busy-ring,
.biopama-busy-ring::before,
.biopama-busy-ring::after {
  border-radius: 50%;
  border: var(--biopama-busy-ring-border) solid transparent;
  animation: spinner-border 2s linear infinite;
}

.biopama-busy-ring {
  position: relative;
  width: var(--biopama-busy-ring-size);
  height: var(--biopama-busy-ring-size);
  border-top-color: var(--biopama-busy-ring-1);
}

.biopama-busy-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-top-color: var(--biopama-busy-ring-2);
  animation-duration: 3s;
}

.biopama-busy-ring::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-top-color: var(--biopama-busy-ring-3);
  animation-duration: 1.5s;
}

.biopama-busy-ring-sm { --biopama-busy-ring-size: 40px; }
.biopama-busy-ring-md { --biopama-busy-ring-size: 80px; }
.biopama-busy-ring-lg { --biopama-busy-ring-size: 120px; }
.biopama-busy-ring-xl { --biopama-busy-ring-size: 150px; }

@media print {
  .biopama-busy {
    display: none !important;
  }
}