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

.global-ui {
  position: absolute;
  inset: 0;
  z-index: 240;
  pointer-events: none;
}


.logo-anchor {
  position: absolute;
  top: 11px;
  left: 50%;

  display: flex;
  justify-content: center;

  transform: translateX(-50%);

  transition:
    top 0.45s cubic-bezier(.2,.8,.2,1),
}

/* LOGO for TOP MENU */
.logo-anchor.is-docked {
  top: 4px;
  z-index: 250;
}

.logo-anchor.is-docked .intro-logo {
  transform: translateY(0) scale(0.21);
}

.logo-anchor.is-docked .intro-logo img {
  content: url("../images/LOGO_1_hud.png");
}

.intro-logo {
  position: relative;
  width: min(80vw, 260px);
  margin: 0;

  --logo-y: -50px;
  --logo-scale: 1;

  opacity: 0;
  transform: translateY(var(--logo-y)) scale(var(--logo-scale));
  transform-origin: top center;

  transition:
    opacity 0.6s ease,
    transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.intro-logo.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* Appear */
.intro-logo.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}


.intro-logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-logo img {
  width: 100%;
  height: auto;
  align-items: center;
  opacity: 1;
  margin-bottom: 0;
  display: block;
  image-rendering: auto;
  backface-visibility: hidden;

  transform: perspective(850px) rotateX(1deg) rotateY(-2deg);
  animation: float-enhanced 4.5s ease-in-out infinite alternate;
}

@keyframes float-enhanced {
  0% {
    transform: perspective(850px) rotateX(1deg) rotateY(-2deg) translateY(0px) scale(1.00);
  }

  100% {
    transform: perspective(850px) rotateX(0.2deg) rotateY(-1deg) translateY(-12px) scale(1.025);
  }
}

.Logo-scan-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;

  background: linear-gradient(
    to bottom,
    rgba(0, 180, 255, 0) 0%,
    rgba(80, 180, 220, 0.018) 48.8%,
    rgba(100, 210, 255, 0.04) 49.4%,
    rgba(0, 255, 246, 0.8) 50%,
    rgba(100, 210, 255, 0.04) 50.6%,
    rgba(80, 180, 220, 0.018) 51.2%,
    rgba(0, 180, 255, 0) 100%
  );

  animation: scan-sweep 4.8s ease-in-out infinite;
  will-change: transform, opacity;

  filter: blur(1.6px);

  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 52%,
    rgba(0, 0, 0, 0.82) 68%,
    rgba(0, 0, 0, 0.35) 82%,
    rgba(0, 0, 0, 0) 100%
  );

  mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 1) 52%,
    rgba(0, 0, 0, 0.82) 68%,
    rgba(0, 0, 0, 0.35) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

@keyframes scan-sweep {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  12% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.75;
  }

  88% {
    opacity: 0.55;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}