/* EGYPools water loader + image placeholders. GPU: transform/opacity only. */

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #8fd0ee;
}

.page-loader-caustic {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse 42% 32% at 28% 18%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 78% 42%, rgba(27, 127, 234, 0.28) 0%, transparent 62%),
    radial-gradient(ellipse 36% 28% at 52% 78%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #dff4fc 0%, #7ec8ea 46%, #1b7fea 100%);
  animation: caustic-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-loader-inner {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 16px 28px;
}

.page-loader-orb {
  position: relative;
  width: 100%;
  min-height: 168px;
  display: grid;
  place-items: center;
}

.page-loader-orb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 280px;
  height: 140px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(12, 63, 110, 0.12), transparent 74%);
  pointer-events: none;
}

.page-loader-logo {
  position: relative;
  z-index: 2;
  width: min(86%, 340px);
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(7, 26, 51, 0.28)) drop-shadow(0 12px 24px rgba(7, 26, 51, 0.2));
  animation: logo-float 3.6s ease-in-out infinite;
}

.page-loader-ripple {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 2px solid rgba(27, 127, 234, 0.38);
  border-radius: 50%;
  opacity: 0;
  animation: ripple-out 3.2s ease-out infinite;
  pointer-events: none;
}

.page-loader-ripple:nth-child(2) {
  animation-delay: 1.05s;
}

.page-loader-ripple:nth-child(3) {
  animation-delay: 2.1s;
}

.page-loader-wave {
  width: min(92vw, 520px);
  height: 58px;
  margin-top: -4px;
  overflow: hidden;
  color: rgba(27, 127, 234, 0.58);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.page-loader-wave svg {
  display: block;
  width: 200%;
  height: 100%;
  animation: wave-shift 8s linear infinite;
}

.page-loader-bubbles {
  position: absolute;
  inset: auto 18% 22% 18%;
  height: 90px;
  pointer-events: none;
}

.page-loader-bubbles span {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: bubble-rise 4.4s ease-in infinite;
}

.page-loader-bubbles span:nth-child(1) { left: 12%; animation-delay: 0s; }
.page-loader-bubbles span:nth-child(2) { left: 38%; width: 6px; height: 6px; animation-delay: 1.1s; }
.page-loader-bubbles span:nth-child(3) { left: 61%; animation-delay: 0.5s; }
.page-loader-bubbles span:nth-child(4) { left: 82%; width: 5px; height: 5px; animation-delay: 1.8s; }
.page-loader-bubbles span:nth-child(5) { left: 50%; width: 7px; height: 7px; animation-delay: 2.4s; }

.page-loader-progress {
  width: min(78%, 280px);
  height: 8px;
  margin-top: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  overflow: hidden;
}

.page-loader-progress-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #5eb6e6, #1b7fea 55%, #0c5fb8);
}

.page-loader-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translate3d(-60%, 0, 0);
  animation: sheen 2.2s ease-in-out infinite;
}

html[dir="rtl"] .page-loader-progress-fill {
  transform-origin: right center;
}

.page-loader-label {
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0c3a66;
}

.page-loader-pct {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0c3a66;
  font-variant-numeric: tabular-nums;
}

html[dir="rtl"] .page-loader-label {
  letter-spacing: 0.04em;
}

.page-loader.is-leaving {
  pointer-events: none;
  animation: loader-out 1.2s ease forwards;
}

.page-loader.is-leaving .page-loader-ripple {
  animation: ripple-exit 1.2s ease forwards;
}

.page-loader.is-gone {
  display: none;
}

@keyframes caustic-drift {
  from { transform: translate3d(-1.6%, -1%, 0) scale(1); }
  to { transform: translate3d(1.8%, 1.4%, 0) scale(1.03); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ripple-out {
  0% { transform: scale(0.55); opacity: 0.55; }
  70% { opacity: 0.18; }
  100% { transform: scale(2.8); opacity: 0; }
}

@keyframes ripple-exit {
  to { transform: scale(6); opacity: 0; }
}

@keyframes wave-shift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes bubble-rise {
  0% { transform: translate3d(0, 12px, 0); opacity: 0; }
  18% { opacity: 0.7; }
  100% { transform: translate3d(6px, -78px, 0); opacity: 0; }
}

@keyframes loader-out {
  to { opacity: 0; }
}

@keyframes sheen {
  0% { transform: translate3d(-60%, 0, 0); }
  100% { transform: translate3d(60%, 0, 0); }
}

@media (max-width: 720px) {
  .page-loader-ripple:nth-child(3),
  .page-loader-bubbles span:nth-child(n + 4) {
    display: none;
  }

  .page-loader-logo {
    width: min(88%, 280px);
  }

  .page-loader-caustic {
    animation-duration: 16s;
  }

  .page-loader-progress-fill::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-caustic,
  .page-loader-logo,
  .page-loader-ripple,
  .page-loader-wave svg,
  .page-loader-bubbles span {
    animation: none !important;
  }

  .page-loader-progress-fill::after,
  .page-loader.is-leaving {
    animation: none !important;
    transition: none !important;
  }
}