/**
 * Hero / Shared-Element (Logo morph) — App launch overlay.
 * مرن وسلس: مدد أطول قليلًا + easing ناعم.
 * Respects prefers-reduced-motion.
 */
:root {
  --hero-dur-fast: 160ms;
  --hero-dur-normal: 260ms;
  --hero-dur-slow: 420ms;
  --hero-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hero-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

#app-launch-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--hero-dur-slow) var(--hero-ease-out);
}

#app-launch-overlay.ui-hero-exit {
  opacity: 0;
  pointer-events: none;
}

#app-launch-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--hero-dur-slow) var(--hero-ease);
}

#app-launch-overlay.ui-hero-morph #app-launch-logo {
  transform: translate(var(--hero-dx, 0), var(--hero-dy, 0)) scale(var(--hero-sx, 1), var(--hero-sy, 1));
}

@media (prefers-reduced-motion: reduce) {
  #app-launch-overlay {
    transition: none;
  }
  #app-launch-overlay.ui-hero-exit {
    transition: none;
  }
  #app-launch-logo {
    transition: none;
  }
}