/* Preloader Global Cyberguard */

.gcg-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 22% 28%,
      rgba(0, 168, 216, 0.16),
      transparent 32%
    ),
    radial-gradient(
      circle at 76% 34%,
      rgba(242, 118, 25, 0.1),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 250, 252, 0.96)
    );

  overflow: hidden;
  isolation: isolate;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 0.3s ease;
}

.gcg-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gcg-preloader::before {
  content: "";
  position: absolute;

  width: min(78vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      rgba(0, 168, 216, 0.14),
      transparent 58%
    ),
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.82),
      transparent 26%
    );

  filter: blur(1px);

  animation: gcgPreloaderFloat 7s ease-in-out infinite;
  will-change: transform;
}

.gcg-preloader::after {
  content: "";
  position: absolute;

  width: min(112vw, 920px);
  aspect-ratio: 1;

  border-radius: 50%;
  opacity: 0.38;

  background-image:
    radial-gradient(
      circle,
      rgba(6, 50, 71, 0.16) 1px,
      transparent 1.6px
    ),
    linear-gradient(
      115deg,
      transparent 48%,
      rgba(0, 168, 216, 0.12) 49%,
      transparent 51%
    );

  background-size:
    42px 42px,
    100% 100%;

  animation: gcgPreloaderRotate 20s linear infinite;
  will-change: transform;
}

.gcg-preloader-core {
  position: relative;
  z-index: 2;

  width: min(260px, calc(100% - 48px));
  min-height: 260px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gcg-preloader-orb {
  position: relative;

  width: 138px;
  height: 138px;

  display: grid;
  place-items: center;

  border-radius: 48%;

  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(255, 255, 255, 0.98),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(0, 168, 216, 0.28),
      rgba(242, 118, 25, 0.16)
    );

  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.9),
    0 24px 70px rgba(0, 168, 216, 0.24);

  animation: gcgOrbPulse 2.4s ease-in-out infinite;

  will-change: transform, opacity;
}

.gcg-preloader-orb::before,
.gcg-preloader-orb::after {
  content: "";
  position: absolute;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(0, 168, 216, 0.2);

  box-shadow: 0 10px 30px rgba(0, 168, 216, 0.15);
}

.gcg-preloader-orb::before {
  width: 26px;
  height: 26px;

  top: -8px;
  right: 12px;
}

.gcg-preloader-orb::after {
  width: 18px;
  height: 18px;

  left: -4px;
  bottom: 18px;
}

.gcg-preloader-orb img {
  width: 84px;
  height: 84px;

  object-fit: contain;
  border-radius: 50%;

  filter: drop-shadow(
    0 10px 22px rgba(6, 50, 71, 0.2)
  );
}

.gcg-preloader-line {
  position: relative;

  width: 168px;
  height: 5px;

  margin-top: 26px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(6, 50, 71, 0.1);
}

.gcg-preloader-line span {
  position: absolute;
  inset: 0;

  width: 42%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--gcg-blue),
      var(--gcg-cyan),
      var(--gcg-orange)
    );

  animation: gcgPreloaderLine 1.35s ease-in-out infinite;

  will-change: transform;
}


/* Animaciones */

@keyframes gcgPreloaderFloat {
  0%,
  100% {
    transform: translate3d(-14px, 10px, 0) scale(1);
  }

  50% {
    transform: translate3d(18px, -12px, 0) scale(1.04);
  }
}

@keyframes gcgPreloaderRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes gcgOrbPulse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.88;
  }

  50% {
    transform: translate3d(0, -5px, 0) scale(1.035);
    opacity: 1;
  }
}

@keyframes gcgPreloaderLine {
  0% {
    transform: translate3d(-120%, 0, 0);
  }

  100% {
    transform: translate3d(260%, 0, 0);
  }
}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {
  .gcg-preloader::before,
  .gcg-preloader::after,
  .gcg-preloader-orb,
  .gcg-preloader-line span {
    animation: none;
  }

  .gcg-preloader {
    transition-duration: 0.15s;
  }
}


/* Responsive */

@media (max-width: 768px) {
  .gcg-preloader-core {
    width: min(220px, calc(100% - 40px));
    min-height: 220px;
  }

  .gcg-preloader-orb {
    width: 118px;
    height: 118px;
  }

  .gcg-preloader-orb img {
    width: 74px;
    height: 74px;
  }

  .gcg-preloader-line {
    width: 148px;
  }
}