/* ============================================================
   Q STORE — Premium loader & page reveal for Salla
   Paste into: التصميم > تخصيص > الأكواد المخصصة > CSS

   CSS owns the loader so it is painted before deferred JS runs.
   JavaScript only dismisses it and reveals the page.
   ============================================================ */

:root {
  --qstore-loader-bg: #faf8f3;
  --qstore-gold: #c69b3c;
  --qstore-navy: #18243b;
  --qstore-ink: #303640;
  --qstore-ease: cubic-bezier(.16, 1, .3, 1);
  --qstore-loader-z: 2147483000;
}

/* Full-screen cover: exists as soon as the custom CSS is parsed. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--qstore-loader-z);
  display: block;
  background:
    radial-gradient(circle at 50% 44%, rgba(198, 155, 60, .08), transparent 30%),
    var(--qstore-loader-bg);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  animation: qstoreFailsafeOut .7s var(--qstore-ease) 4.5s forwards;
}

/* Gold Q mark. Text/CSS means there is no logo image to wait for. */
html::after {
  content: "Q";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--qstore-loader-z) + 2);
  width: 112px;
  height: 112px;
  margin: -94px 0 0 -56px;
  color: var(--qstore-gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 92px;
  font-weight: 400;
  line-height: 112px;
  letter-spacing: -8px;
  text-align: center;
  text-rendering: geometricPrecision;
  transform-origin: 50% 55%;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation:
    qstoreBreathe 2.2s ease-in-out .15s infinite,
    qstoreFailsafeOut .7s var(--qstore-ease) 4.5s forwards;
}

/* STORE wordmark. */
body::before {
  content: "STORE";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--qstore-loader-z) + 2);
  width: 180px;
  margin: 24px 0 0 -90px;
  color: var(--qstore-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 7px;
  text-align: center;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation:
    qstoreWordIn .8s var(--qstore-ease) .1s both,
    qstoreFailsafeOut .7s var(--qstore-ease) 4.5s forwards;
}

/* Fine premium progress line. */
body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--qstore-loader-z) + 2);
  width: 148px;
  height: 2px;
  margin: 61px 0 0 -74px;
  border-radius: 999px;
  background-color: rgba(24, 36, 59, .10);
  background-image: linear-gradient(90deg, var(--qstore-gold), #ddb95d);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  box-shadow: 0 1px 8px rgba(198, 155, 60, .10);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation:
    qstoreProgress 2.7s var(--qstore-ease) forwards,
    qstoreFailsafeOut .7s var(--qstore-ease) 4.5s forwards;
}

html[dir="rtl"] body::after {
  background-position: right center;
  background-image: linear-gradient(270deg, var(--qstore-gold), #ddb95d);
}

/*
   JavaScript adds .qstore-ready when the page is usable.
   One exit animation replaces all running intro animations, so the backdrop,
   Q, STORE and progress line leave on the exact same frame.
*/
html.qstore-ready::before,
html.qstore-ready::after,
html.qstore-ready body::before,
html.qstore-ready body::after {
  pointer-events: none;
  transition: none !important;
  animation: qstoreLoaderExit .58s var(--qstore-ease) forwards !important;
}

html.qstore-ready::before {
  animation-name: qstoreBackdropExit !important;
}

/* Later page loads in the same tab exit a little faster. */
html.qstore-quick.qstore-ready::before,
html.qstore-quick.qstore-ready::after,
html.qstore-quick.qstore-ready body::before,
html.qstore-quick.qstore-ready body::after {
  animation-duration: .36s !important;
}

/* Completely remove every loader layer after its exit animation. */
html.qstore-clean::before,
html.qstore-clean::after,
html.qstore-clean body::before,
html.qstore-clean body::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}

/* Lock scrolling only while JS is active. A JS failure cannot trap the page. */
html.qstore-loading,
html.qstore-loading body {
  overflow: hidden !important;
  height: 100%;
}

@keyframes qstoreProgress {
  0% { background-size: 0 100%; }
  55% { background-size: 68% 100%; }
  100% { background-size: 100% 100%; }
}

@keyframes qstoreBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 18px rgba(198, 155, 60, .06)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 10px 22px rgba(198, 155, 60, .14)); }
}

@keyframes qstoreWordIn {
  from { opacity: 0; transform: translateY(7px); letter-spacing: 10px; }
  to { opacity: 1; transform: none; letter-spacing: 7px; }
}

@keyframes qstoreFailsafeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes qstoreLoaderExit {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes qstoreBackdropExit {
  0% { opacity: 1; visibility: visible; transform: scale(1); }
  100% { opacity: 0; visibility: hidden; transform: scale(1.012); }
}

/* Page sections are hidden only after JS opts into the animation. */
html.qstore-motion .qstore-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

html.qstore-motion .qstore-reveal.qstore-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s var(--qstore-ease),
    transform .9s var(--qstore-ease);
}

html.qstore-motion header.qstore-reveal {
  transform: translateY(-12px);
}

html.qstore-motion .qstore-stagger > * {
  opacity: 0;
  transform: translateY(14px);
}

html.qstore-motion .qstore-stagger.qstore-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity .72s var(--qstore-ease),
    transform .72s var(--qstore-ease);
}

html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(1) { transition-delay: 0ms; }
html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(2) { transition-delay: 70ms; }
html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(3) { transition-delay: 140ms; }
html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(4) { transition-delay: 210ms; }
html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(5) { transition-delay: 280ms; }
html.qstore-motion .qstore-stagger.qstore-in > *:nth-child(6) { transition-delay: 350ms; }

@media (max-width: 640px) {
  html::after {
    width: 96px;
    height: 96px;
    margin: -84px 0 0 -48px;
    font-size: 80px;
    line-height: 96px;
  }

  body::before {
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 6px;
  }

  body::after { margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html::after,
  body::before,
  body::after {
    animation: none !important;
  }

  html.qstore-ready::before,
  html.qstore-ready::after,
  html.qstore-ready body::before,
  html.qstore-ready body::after {
    animation-duration: .01s !important;
  }

  html.qstore-motion .qstore-reveal,
  html.qstore-motion .qstore-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}