html.landing-intro-pending,
html.landing-intro-pending body {
  overflow: hidden;
}

html.landing-intro-pending .landing-shell,
html.landing-intro-pending [data-landing-intro-shell] {
  opacity: 0;
  pointer-events: none;
}

html.landing-intro-pending.landing-intro-revealing .landing-shell,
html.landing-intro-pending.landing-intro-revealing [data-landing-intro-shell] {
  opacity: 1;
  transition: opacity 270ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The root marketing page has several decorative ambient animations. Pause them
   only while the shared intro is active so the logo/orb/panel handoff gets a
   stable compositor budget; they resume automatically when the intro finishes. */
html.landing-intro-pending #admin-signup-page.landing-home-page::before,
html.landing-intro-pending #admin-signup-page.landing-home-page .signup-floating-circle {
  animation-play-state: paused !important;
}

.landing-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
}

.landing-intro-logo {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(560px, 88vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.94);
  transform-origin: center;
  opacity: 0;
  background: rgba(255, 255, 255, 0.78);
  -webkit-mask: url("/images/kiinora_frosted_logo.png") center / contain no-repeat;
  mask: url("/images/kiinora_frosted_logo.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 15px rgba(20, 20, 20, 0.11));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.landing-intro-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/kiinora_frosted_logo.png") center / contain no-repeat;
  opacity: 0.34;
  filter: grayscale(1) blur(14px) brightness(1.28) contrast(0.9);
  mix-blend-mode: multiply;
}

.landing-intro-orb {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 176px;
  height: 176px;
  transform: translate(-50%, -50%) scale(0.22);
  transform-origin: center;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(35, 35, 35, 0.06),
    0 10px 28px rgba(20, 20, 20, 0.08);
  backdrop-filter: blur(24px) saturate(68%) brightness(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(68%) brightness(1.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, border-radius, opacity;
}


@media (max-width: 640px) {
  .landing-intro-logo {
    width: min(460px, 94vw);
  }

  .landing-intro-orb {
    width: 148px;
    height: 148px;
  }
}