/* Preloader — orbiting ring around the breathing GagaMuller mark on the
   brand gradient. External file so the strict CSP allows it. */
#intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #000 0%, #2E1065 74%, #5B21B6 100%);
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1);
  --m: clamp(64px, 11vmin, 116px);
}
#intro.fade { opacity: 0; pointer-events: none; }
.intro-orbit {
  position: relative;
  width: calc(var(--m) * 1.95); height: calc(var(--m) * 1.95);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.intro-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: gm-spin 1.5s linear infinite;
}
.intro-mark {
  width: var(--m); height: var(--m); flex: none;
  animation: gm-breathe 2.4s ease-in-out infinite;
}
.intro-footer {
  position: fixed; left: 0; right: 0; bottom: 11vmin;
  text-align: center;
  font-family: 'Plus Jakarta Sans Variable', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(14px, 2.3vmin, 26px);
  font-weight: 600; letter-spacing: .015em; color: #FFFFFF;
  padding: 0 24px;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }
@keyframes gm-breathe { 0%,100% { transform: scale(.9); opacity: .82; } 50% { transform: scale(1.08); opacity: 1; } }
@media (max-aspect-ratio: 3/4) {
  #intro { --m: clamp(72px, 26vmin, 150px); }
}

body.intro-active { overflow: hidden; }
#page {
  opacity: 0; transform: translateY(18px) scale(.995); filter: blur(3px);
}
#page.reveal {
  opacity: 1; transform: none; filter: none;
  transition:
    opacity 1.3s cubic-bezier(.4, 0, .2, 1) .15s,
    transform 1.3s cubic-bezier(.4, 0, .2, 1) .15s,
    filter 1.1s ease .15s;
}
@media (prefers-reduced-motion: reduce) {
  .intro-ring, .intro-mark { animation: none; }
  #page { opacity: 1; transform: none; filter: none; }
}