/* Keep the map face visible while it rotates; grow and spin run independently. */
.md-page .md-map-stage {
  perspective: none;
  transform-style: flat;
}

@supports (rotate: y 360deg) {
  .md-page.md-intro-running[data-animation="rotation"] .md-map-stage .iranmap,
  .md-page.md-intro-running[data-animation="center"] .md-map-stage .iranmap {
    animation-duration: 5s, 5s !important;
    animation-timing-function: linear, cubic-bezier(.2, .75, .25, 1) !important;
    animation-delay: 0s, 0s !important;
    animation-iteration-count: 1, 1 !important;
    animation-fill-mode: both, both !important;
    rotate: z 0deg;
    backface-visibility: visible;
    will-change: transform, rotate, opacity;
  }

  .md-page.md-intro-running[data-animation="rotation"] .md-map-stage .iranmap {
    animation-name: md-map-spin-grow, md-map-grow-smooth !important;
  }

  .md-page.md-intro-running[data-animation="center"] .md-map-stage .iranmap {
    animation-name: md-map-center-grow, md-map-grow-smooth !important;
  }
}

@keyframes md-map-spin-grow {
  from { rotate: z 0deg; }
  to { rotate: z 360deg; }
}

/* Keep the configured center mode's animation-end signal while rotating steadily. */
@keyframes md-map-center-grow {
  from { rotate: z 0deg; }
  to { rotate: z 360deg; }
}

@keyframes md-map-grow-smooth {
  0% { opacity: 0; transform: rotateX(8deg) rotateZ(-2deg) scale(.008); }
  10% { opacity: 1; transform: rotateX(8deg) rotateZ(-2deg) scale(.055); }
  72% { opacity: 1; transform: rotateX(8deg) rotateZ(-2deg) scale(1.035); }
  100% { opacity: 1; transform: rotateX(8deg) rotateZ(-2deg) scale(1); }
}