/* UmadRO animated logo glow
   Added as a separate layer so the original artwork stays sharp. */
#hero {
  position: relative;
  overflow: hidden;
}

#hero .main-char-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: url('../img/main-bg-char.png') top center no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 7;
  opacity: .72;
  transform: translateZ(0) scale(1.002);
  filter:
    brightness(1.22)
    saturate(1.35)
    drop-shadow(0 0 5px rgba(255,255,255,.95))
    drop-shadow(0 0 12px rgba(80,220,255,.95))
    drop-shadow(0 0 25px rgba(0,140,255,.90))
    drop-shadow(0 0 45px rgba(0,90,255,.65));
  animation: umadroNeonPulse 1.65s ease-in-out infinite alternate;
  will-change: filter, opacity, transform;
}

@keyframes umadroNeonPulse {
  0% {
    opacity: .48;
    transform: translateZ(0) scale(1.001);
    filter:
      brightness(1.10)
      saturate(1.15)
      drop-shadow(0 0 3px rgba(255,255,255,.80))
      drop-shadow(0 0 8px rgba(90,225,255,.80))
      drop-shadow(0 0 18px rgba(0,145,255,.72))
      drop-shadow(0 0 30px rgba(0,90,255,.45));
  }
  100% {
    opacity: .98;
    transform: translateZ(0) scale(1.006);
    filter:
      brightness(1.45)
      saturate(1.55)
      drop-shadow(0 0 7px rgba(255,255,255,1))
      drop-shadow(0 0 18px rgba(110,240,255,1))
      drop-shadow(0 0 38px rgba(0,165,255,.98))
      drop-shadow(0 0 70px rgba(0,90,255,.80));
  }
}

/* Extra pulse for the Download button */
#hero .download img {
  animation: umadroDownloadGlow 1.65s ease-in-out infinite alternate;
}

@keyframes umadroDownloadGlow {
  from { filter: drop-shadow(0 0 4px rgba(70,210,255,.55)); }
  to   { filter: drop-shadow(0 0 9px rgba(100,235,255,1)) drop-shadow(0 0 18px rgba(0,125,255,.85)); }
}

@media (max-width: 991px) {
  #hero .main-char-glow { height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  #hero .main-char-glow, #hero .download img { animation: none; }
}

/* ===== UmadRO compact 3D animated navigation logo ===== */
#header .logo {
  perspective: 900px;
  transform-style: preserve-3d;
}

#header .logo img {
  max-height: 52px !important; /* smaller desktop logo */
  width: auto;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 2px 0 rgba(0, 20, 45, .95))
    drop-shadow(0 4px 1px rgba(0, 0, 0, .75))
    drop-shadow(0 0 6px rgba(70, 210, 255, .60));
  animation: umadroLogo3D 3.2s ease-in-out infinite;
  will-change: transform, filter;
}

#header .logo:hover img {
  animation-duration: 1.35s;
}

@keyframes umadroLogo3D {
  0%, 100% {
    transform: rotateX(0deg) rotateY(-7deg) translateY(0) scale(.94);
    filter:
      drop-shadow(0 2px 0 rgba(0, 20, 45, .95))
      drop-shadow(0 5px 2px rgba(0, 0, 0, .78))
      drop-shadow(0 0 5px rgba(55, 190, 255, .52));
  }
  50% {
    transform: rotateX(3deg) rotateY(7deg) translateY(-2px) scale(.98);
    filter:
      drop-shadow(-2px 3px 0 rgba(0, 25, 55, .95))
      drop-shadow(2px 7px 3px rgba(0, 0, 0, .82))
      drop-shadow(0 0 11px rgba(90, 225, 255, .92))
      drop-shadow(0 0 20px rgba(0, 115, 255, .48));
  }
}

@media (max-width: 991px) {
  #header .logo img { max-height: 44px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #header .logo img { animation: none; transform: scale(.94); }
}