/* Noxera cinematic page transitions */
:root {
  --noxera-transition-accent: #2388ff;
  --noxera-transition-accent-rgb: 35, 136, 255;
}

body.red-page,
body.page-vps,
body.page-game-hosting {
  --noxera-transition-accent: #ff3b55;
  --noxera-transition-accent-rgb: 255, 59, 85;
}

body.green-page,
body.page-domains,
body.knowledgebase-page {
  --noxera-transition-accent: #2bd88f;
  --noxera-transition-accent-rgb: 43, 216, 143;
}

body.purple-page,
body.page-dedicated,
body.page-web-hosting {
  --noxera-transition-accent: #9c67ff;
  --noxera-transition-accent-rgb: 156, 103, 255;
}

.noxera-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 47%, rgba(var(--noxera-transition-accent-rgb), .13), transparent 23rem),
    linear-gradient(180deg, #050a11 0%, #08111c 52%, #050910 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  overflow: hidden;
  transition: opacity .36s ease, visibility .36s ease;
}

.noxera-page-loader::before {
  content: "";
  position: absolute;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--noxera-transition-accent-rgb), .24);
  box-shadow: 0 0 0 0 rgba(var(--noxera-transition-accent-rgb), .28);
  opacity: 0;
}

.noxera-loader-core {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
}

.noxera-loader-ring,
.noxera-loader-ring::before,
.noxera-loader-ring::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  content: "";
}

.noxera-loader-ring {
  border: 2px solid rgba(255, 255, 255, .08);
  border-top-color: var(--noxera-transition-accent);
  border-right-color: rgba(var(--noxera-transition-accent-rgb), .42);
  filter: drop-shadow(0 0 9px rgba(var(--noxera-transition-accent-rgb), .58));
  animation: noxera-spin .78s linear infinite;
}

.noxera-loader-ring::before {
  inset: 7px;
  border: 1px solid rgba(var(--noxera-transition-accent-rgb), .21);
  border-bottom-color: var(--noxera-transition-accent);
  animation: noxera-spin 1.16s linear infinite reverse;
}

.noxera-loader-ring::after {
  inset: 18px;
  background: radial-gradient(circle, rgba(var(--noxera-transition-accent-rgb), .22), rgba(var(--noxera-transition-accent-rgb), .035) 58%, transparent 60%);
  box-shadow: inset 0 0 18px rgba(var(--noxera-transition-accent-rgb), .22);
}

.noxera-loader-logo {
  position: relative;
  z-index: 2;
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(var(--noxera-transition-accent-rgb), .72));
  animation: noxera-logo-breathe 1.05s ease-in-out infinite alternate;
}

.noxera-loader-caption {
  position: absolute;
  top: calc(50% + 67px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(225, 236, 250, .6);
  font: 600 10px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}

.noxera-page-loader.is-bursting .noxera-loader-core {
  animation: noxera-core-burst .48s cubic-bezier(.16,.82,.34,1) forwards;
}

.noxera-page-loader.is-bursting::before {
  animation: noxera-shockwave .62s cubic-bezier(.11,.72,.27,1) forwards;
}

.noxera-page-loader.is-bursting .noxera-loader-caption {
  animation: noxera-caption-out .24s ease forwards;
}

.noxera-page-loader.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Page content arrives in a controlled wave after the central pulse. */
.noxera-reveal-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.975);
  filter: blur(7px);
  transition:
    opacity .66s cubic-bezier(.16,.8,.22,1),
    transform .78s cubic-bezier(.16,.8,.22,1),
    filter .66s ease;
  transition-delay: var(--noxera-reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

body.noxera-content-ready .noxera-reveal-item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

body.noxera-leaving .noxera-reveal-item {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(.988);
  filter: blur(4px);
  transition-duration: .28s;
  transition-delay: 0ms !important;
}

body.noxera-leaving .noxera-page-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

body.noxera-leaving .noxera-loader-core {
  animation: noxera-core-enter .32s cubic-bezier(.16,.82,.34,1) both;
}

@keyframes noxera-spin { to { transform: rotate(360deg); } }
@keyframes noxera-logo-breathe { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@keyframes noxera-shockwave {
  0% { opacity: .75; transform: scale(.35); box-shadow: 0 0 0 0 rgba(var(--noxera-transition-accent-rgb), .42); }
  55% { opacity: .52; }
  100% { opacity: 0; transform: scale(8.2); box-shadow: 0 0 65px 26px rgba(var(--noxera-transition-accent-rgb), .02); }
}
@keyframes noxera-core-burst {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(.78); opacity: 1; }
  100% { transform: scale(1.95); opacity: 0; }
}
@keyframes noxera-caption-out { to { opacity: 0; transform: translate(-50%, 9px); } }
@keyframes noxera-core-enter { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 700px) {
  .noxera-loader-core { width: 72px; height: 72px; }
  .noxera-loader-logo { width: 26px; height: 26px; }
  .noxera-loader-caption { top: calc(50% + 57px); }
  .noxera-reveal-item { transform: translate3d(0, 22px, 0) scale(.982); filter: blur(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .noxera-loader-ring,
  .noxera-loader-ring::before,
  .noxera-loader-logo,
  .noxera-page-loader::before,
  .noxera-loader-core,
  .noxera-reveal-item {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}