/* =========================================
   TELUM TARGETS — LOADER
========================================= */

.loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  z-index: var(--z-loader);

  transition:
    opacity var(--duration-slow)
    var(--ease-smooth),

    visibility var(--duration-slow)
    var(--ease-smooth);
}

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

/* =========================================
   GLOW
========================================= */

.loader::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(193,18,31,0.32) 0%,
      rgba(193,18,31,0.18) 22%,
      rgba(193,18,31,0.08) 42%,
      rgba(193,18,31,0.03) 58%,
      transparent 74%
    );

  transform-origin: center center;
  will-change:
    transform,
    opacity;
  animation:
    glowPulse
    var(--duration-glow)
    ease-in-out
    infinite;
}

/* =========================================
   LOGO
========================================= */

.loader-logo {
  width: min(42vw, 320px);
  position: relative;
  z-index: 2;
  transform-origin: center center;
  will-change:
    transform,
    opacity;
  backface-visibility: hidden;

  animation:
    splashReveal
    var(--duration-reveal)
    var(--ease-premium);
}

.loader-logo.pulse {
  animation:
    pulse
    var(--duration-pulse)
    var(--ease-breathing)
    2;
}



.loader.fading {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-loader-fade)
    var(--ease-smooth),
    visibility var(--duration-loader-fade)
    var(--ease-smooth);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .loader::after {
    width: 340px;
    height: 340px;
  }

  .loader-logo {
    width: min(58vw, 280px);}
}