/* ModiPay page loader — letter flip (exact match) */
.mp-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 6vw, 48px);
  padding-top: max(clamp(20px, 6vw, 48px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(20px, 6vw, 48px), env(safe-area-inset-bottom, 0px));
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.mp-page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.mp-loading {
  overflow: hidden;
}

.mp-page-loader .loader {
  perspective: 700px;
  -webkit-perspective: 700px;
  display: flex;
}

.mp-page-loader .loader > span {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 11vw, 90px);
  line-height: 1;
  display: inline-block;
  animation: mp-flip 2.6s infinite linear;
  transform-origin: 50% 70%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  color: #F2622A;
}

@keyframes mp-flip {
  35%  { transform: rotateX(360deg); }
  100% { transform: rotateX(360deg); }
}

.mp-page-loader .loader > span:nth-child(even) { color: #FFFFFF; }

.mp-page-loader .loader > span:nth-child(1) { animation-delay: 0s; }
.mp-page-loader .loader > span:nth-child(2) { animation-delay: 0.3s; }
.mp-page-loader .loader > span:nth-child(3) { animation-delay: 0.6s; }
.mp-page-loader .loader > span:nth-child(4) { animation-delay: 0.9s; }
.mp-page-loader .loader > span:nth-child(5) { animation-delay: 1.2s; }
.mp-page-loader .loader > span:nth-child(6) { animation-delay: 1.5s; }
.mp-page-loader .loader > span:nth-child(7) { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .mp-page-loader .loader > span { animation: none; }
}
