/* RevvHire global page loader — the RG mark with a short purple/pink
   chromatic glitch. Page-level loading/navigation only; never loaded by the
   interview templates. Pure CSS animation (transform / opacity / clip-path). */

.revvhire-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* See-through: the current page stays visible, blurred, behind a light
     tint — just enough contrast for the white mark to read on light pages. */
  background: rgba(13, 11, 18, .28);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  overflow: hidden;
  opacity: 1; visibility: visible;
  transition: opacity .28s ease, visibility 0s linear 0s;
}
.revvhire-page-loader.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.revvhire-loader-logo {
  --rh-loader-size: clamp(64px, 16vw, 112px);
  position: relative; width: var(--rh-loader-size); height: var(--rh-loader-size);
}
.revvhire-loader-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; user-select: none; -webkit-user-drag: none;
}

/* Resting state: clean white mark. */
.rh-loader-base { z-index: 2; filter: brightness(0) invert(1) drop-shadow(0 4px 18px rgba(13, 11, 18, .35)); }

/* Ghost layers, recoloured to the brand: purple #4E1BB6 and pink #CE2A79.
   Invisible except during the burst. */
.rh-loader-ghost { z-index: 3; opacity: 0; pointer-events: none; }
.rh-loader-purple { filter: brightness(0) saturate(100%) invert(18%) sepia(74%) saturate(3450%) hue-rotate(258deg) brightness(84%) contrast(106%); }
.rh-loader-pink   { filter: brightness(0) saturate(100%) invert(24%) sepia(64%) saturate(3250%) hue-rotate(307deg) brightness(88%) contrast(105%); }

/* Micro fragments: thin purple→pink slivers. */
.rh-loader-frag {
  position: absolute; z-index: 4; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #4E1BB6, #CE2A79);
}
.rh-loader-frag.f1 { width: 38%; left: -14%; top: 34%; }
.rh-loader-frag.f2 { width: 26%; right: -10%; top: 62%; }
.rh-loader-frag.f3 { width: 30%; left: -6%; top: 72%; }

/* Timeline (2.2s loop): 0–120ms clean → 120–350ms burst → 350–500ms micro
   jitter → clean pause for the rest of the loop. Steps keep it frame-skippy. */
.revvhire-page-loader:not(.is-hidden) .rh-loader-base   { animation: rhLoaderBase 2.2s infinite steps(1); }
.revvhire-page-loader:not(.is-hidden) .rh-loader-purple { animation: rhLoaderPurple 2.2s infinite steps(1); }
.revvhire-page-loader:not(.is-hidden) .rh-loader-pink   { animation: rhLoaderPink 2.2s infinite steps(1); }
.revvhire-page-loader:not(.is-hidden) .rh-loader-frag.f1 { animation: rhLoaderFrag 2.2s infinite steps(1); }
.revvhire-page-loader:not(.is-hidden) .rh-loader-frag.f2 { animation: rhLoaderFrag 2.2s .05s infinite steps(1); }
.revvhire-page-loader:not(.is-hidden) .rh-loader-frag.f3 { animation: rhLoaderFrag2 2.2s infinite steps(1); }

@keyframes rhLoaderBase {
  0%, 5%, 24%, 100% { transform: translate(0, 0); }
  6%  { transform: translate(-2px, 0); }
  8%  { transform: translate(3px, 1px); }
  10% { transform: translate(-2px, -1px); }
  12% { transform: translate(0, 0); }
  18% { transform: translate(2px, 0); }
  20% { transform: translate(-1px, 0); }
  22% { transform: translate(0, 0); }
}
@keyframes rhLoaderPurple {
  0%, 5%, 16%, 100% { opacity: 0; transform: none; clip-path: none; }
  6%  { opacity: .82; transform: translate(-7%, -1%); clip-path: inset(7% 0 78% 0); }
  8%  { opacity: .6;  transform: translate(8%, -1%);  clip-path: inset(7% 0 78% 0); }
  10% { opacity: .74; transform: translate(-5%, 1%);  clip-path: inset(42% 0 40% 0); }
  12% { opacity: .44; transform: translate(6%, 1%);   clip-path: inset(42% 0 40% 0); }
  14% { opacity: .64; transform: translate(-7%, 2%);  clip-path: inset(70% 0 10% 0); }
  19% { opacity: .38; transform: translate(-3%, 0);   clip-path: inset(24% 0 60% 0); }
  20% { opacity: 0; }
}
@keyframes rhLoaderPink {
  0%, 6%, 17%, 100% { opacity: 0; transform: none; clip-path: none; }
  7%  { opacity: .78; transform: translate(8%, 0);    clip-path: inset(19% 0 65% 0); }
  9%  { opacity: .56; transform: translate(-6%, 0);   clip-path: inset(19% 0 65% 0); }
  11% { opacity: .72; transform: translate(6%, 1%);   clip-path: inset(51% 0 31% 0); }
  13% { opacity: .48; transform: translate(-5%, 1%);  clip-path: inset(51% 0 31% 0); }
  15% { opacity: .66; transform: translate(7%, 2%);   clip-path: inset(78% 0 7% 0); }
  21% { opacity: .34; transform: translate(3%, 0);    clip-path: inset(58% 0 26% 0); }
  22% { opacity: 0; }
}
@keyframes rhLoaderFrag {
  0%, 6%, 12%, 100% { opacity: 0; transform: translateX(0); }
  7%  { opacity: .75; transform: translateX(-12%); }
  9%  { opacity: .5;  transform: translateX(16%); }
}
@keyframes rhLoaderFrag2 {
  0%, 18%, 21%, 100% { opacity: 0; transform: translateX(0); }
  19% { opacity: .6; transform: translateX(10%); }
}

/* Compact in-page variant: the same mark and glitch in a small dark chip,
   for refreshing a results area (search, filter, sort, page) without
   covering the screen. Markup: .revvhire-inline-loader > .revvhire-loader-logo
   (same imgs/frags as the full loader) + a text label. Toggle .is-active. */
.revvhire-inline-loader {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: #0D0B12; color: rgba(255, 255, 255, .86);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(31, 14, 74, .22);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Out of the layout while idle so it never leaves a gap in the results header. */
.revvhire-inline-loader:not(.is-active) { display: none; }
.revvhire-inline-loader.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.revvhire-inline-loader .revvhire-loader-logo { --rh-loader-size: 24px; }
.revvhire-inline-loader .rh-loader-base { filter: brightness(0) invert(1); }
.revvhire-inline-loader .rh-loader-frag { height: 1px; }
.revvhire-inline-loader.is-active .rh-loader-base   { animation: rhLoaderBase 2.2s infinite steps(1); }
.revvhire-inline-loader.is-active .rh-loader-purple { animation: rhLoaderPurple 2.2s infinite steps(1); }
.revvhire-inline-loader.is-active .rh-loader-pink   { animation: rhLoaderPink 2.2s infinite steps(1); }
.revvhire-inline-loader.is-active .rh-loader-frag.f1 { animation: rhLoaderFrag 2.2s infinite steps(1); }
.revvhire-inline-loader.is-active .rh-loader-frag.f2 { animation: rhLoaderFrag 2.2s .05s infinite steps(1); }
.revvhire-inline-loader.is-active .rh-loader-frag.f3 { animation: rhLoaderFrag2 2.2s infinite steps(1); }

@media (prefers-reduced-motion: reduce) {
  .revvhire-page-loader .rh-loader-base,
  .revvhire-page-loader .rh-loader-ghost,
  .revvhire-page-loader .rh-loader-frag,
  .revvhire-inline-loader .rh-loader-base,
  .revvhire-inline-loader .rh-loader-ghost,
  .revvhire-inline-loader .rh-loader-frag { animation: none !important; }
  .revvhire-page-loader .rh-loader-ghost,
  .revvhire-page-loader .rh-loader-frag,
  .revvhire-inline-loader .rh-loader-ghost,
  .revvhire-inline-loader .rh-loader-frag { display: none; }
  .revvhire-page-loader, .revvhire-page-loader.is-hidden,
  .revvhire-inline-loader, .revvhire-inline-loader.is-active { transition: none; }
}