/* ==========================================================================
   Great Dubai - page preloader ("Halo")
   --------------------------------------------------------------------------
   Drawn entirely on html::before / html::after, so it needs no markup in
   <body> and is on screen from the very first paint:

     html::before  white backdrop + logo + faint ring track
     html::after   the spinning purple -> blue gradient ring

   /scripts/gd-preloader.js adds .gd-pl-done to <html> once the DOM is ready,
   which fades both out. If that script never runs (blocked, offline, JS
   off), the gd-pl-cap animation hides the overlay on its own after 8s, so
   the page can never stay covered.

   It only covers the arriving page getting ready. Clicking a link does not
   bring it up on the page being left (removed: two overlays back to back made
   every page change feel slow).
   ========================================================================== */

html::before,
html::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .45s ease, visibility .45s ease;
          transition: opacity .45s ease, visibility .45s ease;
}

html::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    url("/images/logo.webp") center / 92px auto no-repeat,
    radial-gradient(circle, transparent 71px, #f1edf8 71.5px, #f1edf8 75px, transparent 75.5px) center / 100% 100% no-repeat,
    #ffffff;
  -webkit-animation: gd-pl-cap .45s ease 8s forwards;
          animation: gd-pl-cap .45s ease 8s forwards;
}

html::after {
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  z-index: 2147483001;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(124, 61, 174, 0) 0deg, #7c3dae 200deg, #0164b6 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-animation: gd-pl-spin 1.1s linear infinite, gd-pl-cap .45s ease 8s forwards;
          animation: gd-pl-spin 1.1s linear infinite, gd-pl-cap .45s ease 8s forwards;
}

html.gd-pl-done::before,
html.gd-pl-done::after {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes gd-pl-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes gd-pl-spin         { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@-webkit-keyframes gd-pl-cap { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes gd-pl-cap         { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html::after {
    -webkit-animation-duration: 3s, .45s;
            animation-duration: 3s, .45s;
  }
}

@media print {
  html::before,
  html::after {
    display: none !important;
  }
}