/* ============================================================
   GTG intro animation — loading ring -> galaxy -> logo reveal -> pulse -> merge
   Everything here is scoped to #gtg-intro-* / .gtg-intro-* selectors,
   so it will not touch any existing styles on the page it's dropped into.
   ============================================================ */

#gtg-intro-overlay, #gtg-intro-overlay *{ box-sizing: border-box; }

#gtg-intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, #0d0b10 0%, #050408 70%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
#gtg-intro-overlay.gtg-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#gtg-intro-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Position is set by JS (pixel-perfect match to canvas coords).
   transform-origin stays center so scale/rotate are always around the logo's
   own centre, regardless of where left/top place it on screen. */
#gtg-intro-logo{
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  transform-origin: center center;
  opacity: 0;
  z-index: 2;
  transition: opacity .3s linear;
  width: 180px;
}
#gtg-intro-logo img{
  display: block;
  width: 100%;
  height: auto;
}
#gtg-intro-logo.gtg-show{
  opacity: 1;
}
#gtg-intro-logo.gtg-pulse{
  animation: gtgIntroPulseOnce .45s ease;
}
@keyframes gtgIntroPulseOnce{
  0%  { transform: scale(1);   }
  40% { transform: scale(1.1); }
  100%{ transform: scale(1);   }
}