/*
Reusable "BER scale" loading overlay component.

Usage:
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static 'styles/components/ber-loader.css' %}">
  ...
  {% include 'landing_page/components/ber-loader.html' %}

Toggle from JS:
  $('.loading-overlay').removeClass('d-none');   // show
  $('#loading-message').text('Working on it...'); // optional status text
  $('.loading-overlay').addClass('d-none');       // hide
*/

.loading-overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--off-white-color);
  z-index: 1100;
}

.ber-loader {
  height: 160px;
  position: absolute;
  top: 35%;
  left: 50%;
  margin-top: -50px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.ber-loader .ber-bar {
  width: 15px;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: ber-bar-bounce 1.1s ease-in-out infinite;
}

/* Official BER scale: G (red) tallest, A1 (green) shortest.
   (row-reverse above puts A1 on the left, G on the right.) */
.ber-loader .ber-bar-g  { height: 100%; background-color: #d32f2f; animation-delay: 0s; }
.ber-loader .ber-bar-f  { height: 94%;  background-color: #eb4a22; animation-delay: 0.06s; }
.ber-loader .ber-bar-e2 { height: 87%;  background-color: #ff6600; animation-delay: 0.12s; }
.ber-loader .ber-bar-e1 { height: 81%;  background-color: #ff9500; animation-delay: 0.18s; }
.ber-loader .ber-bar-d2 { height: 74%;  background-color: #ffc000; animation-delay: 0.24s; }
.ber-loader .ber-bar-d1 { height: 68%;  background-color: #f6da32; animation-delay: 0.30s; }
.ber-loader .ber-bar-c3 { height: 61%;  background-color: #edf358; animation-delay: 0.36s; }
.ber-loader .ber-bar-c2 { height: 55%;  background-color: #c5e984; animation-delay: 0.42s; }
.ber-loader .ber-bar-c1 { height: 48%;  background-color: #b0d9a5; animation-delay: 0.48s; }
.ber-loader .ber-bar-b3 { height: 42%;  background-color: #91c983; animation-delay: 0.54s; }
.ber-loader .ber-bar-b2 { height: 35%;  background-color: #70b961; animation-delay: 0.60s; }
.ber-loader .ber-bar-b1 { height: 29%;  background-color: #4ba93e; animation-delay: 0.66s; }
.ber-loader .ber-bar-a3 { height: 22%;  background-color: #119911; animation-delay: 0.72s; }
.ber-loader .ber-bar-a2 { height: 16%;  background-color: #077806; animation-delay: 0.78s; }
.ber-loader .ber-bar-a1 { height: 10%;  background-color: #005800; animation-delay: 0.84s; }

/* Oscillate around the base height without breaking the staircase order. */
@keyframes ber-bar-bounce {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .ber-loader .ber-bar { animation: none; }
}

.loading-text {
  position: absolute;
  top: 65%;
  bottom: 50%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  color: var(--rf-forest);
  font-size: larger;
  font-weight: bold;
  width: 300px;
  justify-content: center;
  text-align: center;
}