/*
 * page-loader.css
 * Full-screen loading overlay with the animated Araitek mark
 * (templates/includes/page_loader.html, driven by js/app/page-loader.js).
 *
 * Two classes, set by the script:
 *   .is-active   runs the animation; added first so every show replays the
 *                intro from an empty frame.
 *   .is-visible  fades the overlay in. Removed before .is-active on hide, so
 *                the logo stays drawn while it fades out.
 *
 * The animation: the icosahedron draws itself, the bolt strikes, then the glow
 * rises and falls forever.
 */

.ara-loader {
  position: fixed;
  inset: 0;
  /* Above Bootstrap modals (1050) and the autocomplete dropdowns (9999). */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 251, 249, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.ara-loader.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}

.ara-loader__mark {
  width: 96px;
  height: 96px;
  overflow: visible;
}

.ara-loader__lines path {
  stroke: var(--md-primary, #054a45);
  /* pathLength="1": a dash of 1 plus a longer gap; offset 1 hides the line. */
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: 1;
}

.ara-loader__bolt {
  fill: #ffb300;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ara-loader__glow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ara-loader.is-active .ara-loader__hex {
  animation: ara-loader-draw 0.5s ease-in-out 0s forwards;
}

.ara-loader.is-active .ara-loader__spokes {
  animation: ara-loader-draw 0.55s ease-in-out 0.25s forwards;
}

.ara-loader.is-active .ara-loader__tri {
  animation: ara-loader-draw 0.4s ease-in-out 0.5s forwards;
}

.ara-loader.is-active .ara-loader__bolt {
  animation: ara-loader-strike 0.3s cubic-bezier(0.5, 0, 0.9, 0.4) 0.75s forwards;
}

.ara-loader.is-active .ara-loader__glow {
  animation:
    ara-loader-flash 0.45s ease-out 1.05s both,
    ara-loader-pulse 1s ease-in-out 1.5s infinite alternate;
}

@keyframes ara-loader-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ara-loader-strike {
  from {
    opacity: 0;
    transform: translateY(-30%) scale(2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Flash on impact, settling at the low end of the pulse. */
@keyframes ara-loader-flash {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
}

@keyframes ara-loader-pulse {
  from {
    opacity: 0.35;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Reduced motion: no drawing or strike, the logo just fades in and the glow
   breathes slowly. */
@media (prefers-reduced-motion: reduce) {
  .ara-loader.is-active .ara-loader__lines path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .ara-loader.is-active .ara-loader__bolt {
    animation: none;
    opacity: 1;
  }

  .ara-loader.is-active .ara-loader__glow {
    animation: ara-loader-pulse 2s ease-in-out 0s infinite alternate;
  }
}