:root {
  --loader-bg: #050a10;
  --loader-line: rgba(143, 224, 236, 0.15);
  --loader-cyan: #55dff0;
  --loader-violet: #9487ff;
}

.avp-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(5, 10, 16, 0.9);
  backdrop-filter: blur(24px) saturate(0.8);
  opacity: 1;
  visibility: visible;
  transition: opacity 460ms ease, visibility 460ms ease;
}

.avp-loader::before {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: -2;
  background: url('/assets/aulama-vpn-secure-gateway-20260729.webp') center / cover no-repeat;
  filter: blur(18px) brightness(0.32) saturate(0.82);
  transform: scale(1.08);
}

.avp-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--loader-line) 1px, transparent 1px), linear-gradient(90deg, var(--loader-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  opacity: 0.23;
}

.avp-loader-stage {
  width: min(680px, calc(100% - 40px));
  display: grid;
  justify-items: center;
  gap: 28px;
}

.avp-loader-mark {
  position: relative;
  width: min(540px, 82vw);
  aspect-ratio: 3 / 1;
}

.avp-loader-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avp-loader-whole {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
  opacity: 1;
  transform: scale(1);
  transition: opacity 180ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.avp-loader-fragments {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.fragment {
  opacity: 0;
  transition: opacity 100ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 620ms ease;
}

.fragment-1 { clip-path: polygon(0 0, 38% 0, 31% 51%, 0 62%); }
.fragment-2 { clip-path: polygon(38% 0, 68% 0, 61% 56%, 31% 51%); }
.fragment-3 { clip-path: polygon(68% 0, 100% 0, 100% 58%, 61% 56%); }
.fragment-4 { clip-path: polygon(0 62%, 31% 51%, 54% 100%, 0 100%); }
.fragment-5 { clip-path: polygon(31% 51%, 61% 56%, 100% 58%, 100% 100%, 54% 100%); }

.avp-loader-ring {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--loader-cyan);
  border-right-color: var(--loader-violet);
  border-radius: 50%;
  animation: avp-spin 0.9s linear infinite;
}

.avp-loader-stage > p {
  margin: -8px 0 0;
  color: #b7c5d3;
  font-family: AulamaSans, "Noto Sans TC", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

.avp-loader.is-breaking .avp-loader-whole {
  opacity: 0;
  transform: scale(1.035);
}

.avp-loader.is-breaking .avp-loader-fragments {
  opacity: 1;
}

.avp-loader.is-breaking .fragment {
  opacity: 1;
  filter: blur(2px);
}

.avp-loader.is-breaking .fragment-1 { transform: translate(-46px, -22px) rotate(-5deg); }
.avp-loader.is-breaking .fragment-2 { transform: translate(-18px, -44px) rotate(3deg); }
.avp-loader.is-breaking .fragment-3 { transform: translate(48px, -28px) rotate(5deg); }
.avp-loader.is-breaking .fragment-4 { transform: translate(-40px, 38px) rotate(4deg); }
.avp-loader.is-breaking .fragment-5 { transform: translate(42px, 42px) rotate(-4deg); }

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

.vpn-gateway-page {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: var(--loader-bg);
  color: #fff;
}

.vpn-gateway {
  min-height: 100svh;
}

.vpn-gateway noscript {
  position: fixed;
  inset: auto 20px 24px;
  z-index: 10000;
  color: #dbe6ee;
  text-align: center;
}

.vpn-gateway noscript a {
  color: var(--loader-cyan);
}

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

@media (max-width: 640px) {
  .avp-loader-stage {
    gap: 22px;
  }

  .avp-loader-mark {
    width: min(420px, 88vw);
  }

  .avp-loader-ring {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avp-loader-ring {
    animation-duration: 1.8s;
  }

  .fragment,
  .avp-loader-whole,
  .avp-loader {
    transition-duration: 80ms;
  }
}