/* ============================================================
   EPF ECOSYSTEM — LOADER STYLES (shared across all pages)
   assets/css/loader.css
   ============================================================ */

.epf-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.epf-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-brand {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  animation: brand-pulse 1.5s ease-in-out infinite;
}

.loader-brand-accent {
  color: var(--teal);
}

@keyframes brand-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

.eco-loader {
  position: relative;
  width: 120px;
  height: 120px;
}

.eco-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(108, 190, 237, 0.6);
  animation: core-pulse 1.4s ease-in-out infinite;
}

@keyframes core-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(108, 190, 237, 0.6); }
  70%  { box-shadow: 0 0 0 18px rgba(108, 190, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(108, 190, 237, 0); }
}

.eco-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid transparent;
  transform-origin: center;
}

.eco-ring-1 {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-color: rgba(108, 190, 237, 0.35);
  animation: orbit-spin 1.8s linear infinite;
}

.eco-ring-2 {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-color: rgba(230, 57, 70, 0.25);
  animation: orbit-spin 2.8s linear infinite reverse;
}

.eco-ring-3 {
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  border-color: rgba(244, 166, 32, 0.2);
  animation: orbit-spin 4s linear infinite;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.eco-ring::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.eco-ring-2::before {
  background: var(--coral);
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
}

.eco-ring-3::before {
  background: var(--orange);
  top: -4px;
  width: 8px;
  height: 8px;
}

.eco-ring-3::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.6;
}

.eco-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  font-size: 60px;
}

.eco-burst::before,
.eco-burst::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48em;
  height: 48em;
  background-image:
    radial-gradient(circle 8px, var(--teal) 100%, transparent 0),
    radial-gradient(circle 8px, var(--teal) 100%, transparent 0),
    radial-gradient(circle 6px, var(--coral) 100%, transparent 0),
    radial-gradient(circle 6px, var(--coral) 100%, transparent 0),
    radial-gradient(circle 5px, var(--orange) 100%, transparent 0),
    radial-gradient(circle 5px, var(--orange) 100%, transparent 0),
    radial-gradient(circle 4px, rgba(108, 190, 237, 0.6) 100%, transparent 0),
    radial-gradient(circle 4px, rgba(244, 166, 32, 0.6) 100%, transparent 0);
  background-position:
    0em -18em, 0em 18em,
    18em 0em, -18em 0em,
    13em -13em, -13em -13em,
    13em 13em, -13em 13em;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eco-burst 2s ease-in infinite;
}

.eco-burst::after {
  font-size: 1px;
  background: rgba(108, 190, 237, 0.15);
  animation: eco-bounce 2s ease-in-out infinite;
  background-image: none;
  border: 1px solid rgba(108, 190, 237, 0.2);
}

@keyframes eco-burst {
  0%, 40% { font-size: 0.4px; opacity: 1; }
  70%     { font-size: 3px; opacity: 0.7; }
  100%    { font-size: 5px; opacity: 0; }
}

@keyframes eco-bounce {
  0%, 100% { font-size: 0.6px; }
  50%      { font-size: 1.4px; }
}

.loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  border-radius: 2px;
  animation: bar-fill 1.8s ease-in-out forwards;
}

@keyframes bar-fill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

.loader-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-muted);
  animation: label-cycle 1.8s ease-in-out infinite;
}

@keyframes label-cycle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}