/* ------------------------------------------------
 * ZosarX - Premium loader & animated logo mark
 * Loaded after zosarx.css so it wins over both
 * loader.min.css and main.min.css.
 * ------------------------------------------------
 *  01. Loader shell & ambient layers
 *  02. Technical corner frame
 *  03. Emblem - rings, pyramid SVG, scanner
 *  04. Wordmark & tagline
 *  05. Progress meter & readout
 *  06. Completion state
 *  07. Header logo mark
 *  08. Reduced motion
 * ------------------------------------------------ */

/* ------------------------------------------------
 * 01. Loader shell & ambient layers
 * ------------------------------------------------ */

.zx-loader {
  --zx-progress: 0%;
  --zx-mark-size: 15rem;
  --zx-accent: var(--accent);
  --zx-accent-rgb: var(--accent-rgb);
  --zx-second-rgb: var(--additional-rgb);
  --zx-sheen: rgba(255, 255, 255, 0.85);
}

@media only screen and (min-width: 768px) {
  .zx-loader {
    --zx-mark-size: 19rem;
  }
}

@media only screen and (min-width: 1200px) {
  .zx-loader {
    --zx-mark-size: 22rem;
  }
}

.zx-loader .loader__wrapper {
  overflow: hidden;
  background: var(--base);
}

.zx-loader.loaded {
  pointer-events: none;
}

/* stacked ambient layers - grid, aurora glow, scanlines, vignette */
.zx-loader__bg,
.zx-loader__bg > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zx-loader__bg {
  z-index: 0;
  overflow: hidden;
}

.zx-loader__grid {
  background-image:
    linear-gradient(
      to right,
      rgba(var(--zx-accent-rgb), 0.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(var(--zx-accent-rgb), 0.09) 1px,
      transparent 1px
    );
  background-size: 6rem 6rem;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 78%
  );
  opacity: 0;
  animation:
    zx-fade-in 1.6s ease forwards,
    zx-grid-drift 24s linear infinite;
}

.zx-loader__glow {
  background:
    radial-gradient(
      42rem 42rem at 50% 38%,
      rgba(var(--zx-accent-rgb), 0.09),
      transparent 68%
    ),
    radial-gradient(
      34rem 34rem at 22% 78%,
      rgba(var(--zx-second-rgb), 0.12),
      transparent 70%
    ),
    radial-gradient(
      30rem 30rem at 80% 20%,
      rgba(var(--zx-second-rgb), 0.09),
      transparent 70%
    );
  opacity: 0;
  animation:
    zx-fade-in 2s ease forwards,
    zx-breathe 6s ease-in-out infinite 2s;
}

.zx-loader__scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--base-rgb), 0) 0 2px,
    rgba(var(--zx-accent-rgb), 0.05) 2px 3px
  );
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.zx-loader__vignette {
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    transparent 40%,
    rgba(var(--base-rgb), 0.85) 100%
  );
}

/* ------------------------------------------------
 * 02. Technical corner frame
 * ------------------------------------------------ */

.zx-loader__frame {
  position: absolute;
  inset: 2.4rem;
  z-index: 1;
  pointer-events: none;
}

@media only screen and (min-width: 768px) {
  .zx-loader__frame {
    inset: 4rem;
  }
}

.zx-frame__corner {
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(var(--zx-accent-rgb), 0.45);
  opacity: 0;
  animation: zx-corner-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.15s;
}

@media only screen and (min-width: 768px) {
  .zx-frame__corner {
    width: 3.6rem;
    height: 3.6rem;
  }
}

.zx-frame__corner--tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.zx-frame__corner--tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  animation-delay: 0.25s;
}

.zx-frame__corner--bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  animation-delay: 0.35s;
}

.zx-frame__corner--br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  animation-delay: 0.45s;
}

/* ------------------------------------------------
 * 03. Emblem - rings, pyramid SVG, scanner
 * ------------------------------------------------ */

.zx-loader .loader__content {
  position: relative;
  left: auto;
  top: auto;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8rem 2.4rem;
  overflow: visible;
  z-index: 2;
}

.zx-loader__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 34rem;
}

@media only screen and (min-width: 768px) {
  .zx-loader__stage {
    max-width: 74rem;
  }
}

.zx-loader__mark {
  position: relative;
  width: var(--zx-mark-size);
  height: var(--zx-mark-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- orbit rings --- */

.zx-mark__ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(var(--zx-accent-rgb), 0.13);
  opacity: 0;
  animation: zx-ring-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

.zx-mark__ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0 58%,
    rgba(var(--zx-accent-rgb), 0.15) 72%,
    rgba(var(--zx-accent-rgb), 0.95) 88%,
    transparent 97%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 2px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 2px)
  );
  animation: zx-spin 3.4s linear infinite;
}

.zx-mark__ring--ticks {
  inset: -30%;
  border-color: rgba(var(--zx-accent-rgb), 0.06);
  animation-delay: 0.45s;
}

.zx-mark__ring--ticks::after {
  background: repeating-conic-gradient(
    rgba(var(--zx-accent-rgb), 0.55) 0deg 0.5deg,
    transparent 0.5deg 7.5deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px)
  );
  animation-duration: 30s;
  animation-direction: reverse;
}

/* --- orbiting satellite --- */

.zx-mark__orbit {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  opacity: 0;
  animation:
    zx-fade-in 0.8s ease forwards 1.1s,
    zx-spin 3.4s linear infinite;
}

.zx-mark__orbit::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: -0.35rem;
  border-radius: 50%;
  background: var(--zx-accent);
  box-shadow: 0 0 1.4rem rgba(var(--zx-accent-rgb), 0.9);
}

/* --- brand mark ---
 * The logo artwork drives two stacked layers through mask-image, so it is
 * recoloured by the theme instead of filtered, and stays pixel-true.
 * ------------------------------------------------ */

.zx-mark__halo {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--zx-accent-rgb), 0.2),
    rgba(var(--zx-second-rgb), 0.14) 45%,
    transparent 70%
  );
  opacity: 0;
  animation:
    zx-fade-in 1.4s ease forwards 0.5s,
    zx-breathe 5s ease-in-out infinite 1.9s;
}

/* wipes the mark up into view */
.zx-mark__reveal {
  position: absolute;
  inset: 6%;
  clip-path: inset(100% 0 0 0);
  animation: zx-reveal 1.3s cubic-bezier(0.76, 0, 0.24, 1) forwards 0.4s;
}

.zx-mark__ink,
.zx-mark__sweep {
  position: absolute;
  inset: 0;
  -webkit-mask: url(../../img/brand/zosarx-mark.png?v=455e1328) center / contain no-repeat;
  mask: url(../../img/brand/zosarx-mark.png?v=455e1328) center / contain no-repeat;
}

.zx-mark__ink {
  background: var(--t-bright);
}

/* an accent band travelling up the silhouette - the mark reads as lit,
   not tinted, because only a slice of it is coloured at any moment */
.zx-mark__sweep {
  background: linear-gradient(
    to top,
    transparent 0 40%,
    rgba(var(--zx-second-rgb), 0.55) 46%,
    var(--zx-accent) 50%,
    rgba(var(--zx-second-rgb), 0.55) 54%,
    transparent 60% 100%
  );
  background-size: 100% 320%;
  background-position: 50% 0%;
  opacity: 0;
  animation:
    zx-fade-in 0.6s ease forwards 1.5s,
    zx-sweep 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite 1.5s;
}

/* --- scanner sweep across the mark --- */

.zx-mark__scan {
  position: absolute;
  inset: -6% -14%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    #000 30%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 55% 55% at 50% 50%,
    #000 30%,
    transparent 75%
  );
}

.zx-mark__scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--zx-accent-rgb), 0.28) 45%,
    rgba(var(--zx-accent-rgb), 0.9) 50%,
    rgba(var(--zx-accent-rgb), 0.28) 55%,
    transparent
  );
  opacity: 0;
  animation: zx-scan 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite 1.6s;
}

/* ------------------------------------------------
 * 04. Wordmark & tagline
 * ------------------------------------------------ */

.zx-loader__word {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 3.2rem;
  font: normal var(--fw-bold) 3.6rem/1 var(--_font-accent);
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  color: var(--t-bright);
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) {
  .zx-loader__word {
    font-size: 4.8rem;
    letter-spacing: 0.7rem;
    text-indent: 0.7rem;
  }
}

.zx-word__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.9em);
  filter: blur(0.6rem);
  animation: zx-letter-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.zx-word__letter:nth-child(1) {
  animation-delay: 1.4s;
}
.zx-word__letter:nth-child(2) {
  animation-delay: 1.48s;
}
.zx-word__letter:nth-child(3) {
  animation-delay: 1.56s;
}
.zx-word__letter:nth-child(4) {
  animation-delay: 1.64s;
}
.zx-word__letter:nth-child(5) {
  animation-delay: 1.72s;
}
.zx-word__letter:nth-child(6) {
  animation-delay: 1.8s;
}

.zx-word__letter--accent {
  color: var(--zx-accent);
  text-shadow: 0 0 2.4rem rgba(var(--zx-accent-rgb), 0.55);
}

.zx-loader__tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  font: normal var(--fw-medium) 1rem/1.5 var(--_font-default);
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--t-muted);
  text-align: center;
  opacity: 0;
  animation: zx-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards 2s;
}

.zx-tagline__sep {
  display: none;
}

@media only screen and (min-width: 768px) {
  .zx-loader__tagline {
    flex-direction: row;
    gap: 1.8rem;
    font-size: 1.15rem;
    letter-spacing: 0.26rem;
    white-space: nowrap;
  }

  .zx-tagline__sep {
    display: block;
  }
}

/* the dividers are drawn rather than typed, so they stay hairline-thin
   at any size and pick up the accent */
.zx-tagline__sep {
  width: 1px;
  height: 1.1rem;
  background: rgba(var(--zx-accent-rgb), 0.55);
  transform: skewX(-12deg);
}

/* ------------------------------------------------
 * 05. Progress meter & readout
 * ------------------------------------------------ */

.zx-loader__meter {
  width: 100%;
  max-width: 34rem;
  margin-top: 4rem;
  opacity: 0;
  animation: zx-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 2.2s;
}

.zx-meter__track {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--zx-accent-rgb), 0.13);
  overflow: hidden;
}

.zx-meter__fill {
  position: relative;
  display: block;
  width: var(--zx-progress);
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgba(var(--zx-second-rgb), 0.9),
    var(--zx-accent)
  );
  box-shadow: 0 0 1.2rem rgba(var(--zx-accent-rgb), 0.8);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* travelling sheen on the filled portion */
.zx-meter__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, var(--zx-sheen), transparent);
  width: 40%;
  animation: zx-sheen 1.8s ease-in-out infinite;
}

.zx-meter__readout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.2rem;
}

.zx-meter__status {
  font: normal var(--fw-medium) 1.1rem/1.6 var(--_font-default);
  letter-spacing: 0.24rem;
  text-transform: uppercase;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zx-meter__status::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.8rem;
  border-radius: 50%;
  background: var(--zx-accent);
  vertical-align: middle;
  animation: zx-blink 1.2s steps(1, end) infinite;
}

/* Arabic copy: no uppercase, no tracking - both fight the script */
.zx-loader__tagline--ar,
.zx-meter__status--ar {
  font-family: var(--_font-arabic, "Cairo", sans-serif);
  font-size: 1.3rem;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
}


.zx-meter__status--ar::before {
  margin-right: 0;
  margin-left: 0.8rem;
}

/* mask keeps the template's slide-out of .loader__count reading as a wipe */
.zx-meter__count-mask {
  display: block;
  overflow: hidden;
  line-height: 1;
}

.zx-loader .loader__count {
  justify-content: flex-end;
  align-items: baseline;
  line-height: 1;
}

.zx-loader .loader__count span {
  font: normal var(--fw-bold) 2.4rem/1 var(--_font-accent);
  letter-spacing: -0.04rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--t-bright);
}

.zx-loader .loader__count .count__percent {
  font-size: 1.3rem;
  margin-left: 0.3rem;
  color: var(--zx-accent);
}

@media only screen and (min-width: 768px) {
  .zx-loader .loader__count span {
    font-size: 3rem;
  }
  .zx-loader .loader__count .count__percent {
    font-size: 1.5rem;
  }
}

/* ------------------------------------------------
 * 06. Completion state
 * ------------------------------------------------ */

.zx-loader.is-complete .zx-mark__halo {
  animation: none;
  opacity: 1;
  transform: scale(1.12);
  transition: transform 0.7s ease;
}

.zx-loader.is-complete .zx-mark__scan::before,
.zx-loader.is-complete .zx-meter__fill::after {
  animation: none;
  opacity: 0;
}

.zx-loader.is-complete .zx-meter__status::before {
  animation: none;
}

.zx-loader__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 45% 45% at 50% 42%,
    rgba(var(--zx-accent-rgb), 0.35),
    transparent 70%
  );
}

.zx-loader.is-complete .zx-loader__flash {
  animation: zx-bloom 1s ease-out forwards;
}

/* ------------------------------------------------
 * 07. Header logo mark
 * ------------------------------------------------ */

.zx-logo {
  position: relative;
  gap: 1.1rem;
}

.zx-logo__emblem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  overflow: visible;
  flex: 0 0 auto;
}

.zx-logo__mark {
  position: absolute;
  inset: 0;
  -webkit-mask: url(../../img/brand/zosarx-mark.png?v=455e1328) center / contain no-repeat;
  mask: url(../../img/brand/zosarx-mark.png?v=455e1328) center / contain no-repeat;
  background: var(--t-bright);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.zx-logo__mark--sweep {
  background: linear-gradient(
    to top,
    transparent 0 40%,
    rgba(var(--additional-rgb), 0.6) 46%,
    var(--accent) 50%,
    rgba(var(--additional-rgb), 0.6) 54%,
    transparent 60% 100%
  );
  background-size: 100% 320%;
  background-position: 50% 0%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* hover - the mark powers up */
.zx-logo:hover .zx-logo__mark {
  transform: rotate(-3deg) scale(1.07);
}

.zx-logo:hover .zx-logo__mark--sweep {
  opacity: 1;
  animation: zx-sweep 1.2s cubic-bezier(0.45, 0, 0.55, 1) 2;
}

.zx-logo__word {
  position: relative;
  font: normal var(--fw-semibold) 2.2rem/1 var(--_font-accent);
  letter-spacing: -0.03rem;
  color: var(--t-bright);
}

.zx-logo__x {
  position: relative;
  color: var(--accent);
}

/* underline sweeps in beneath the wordmark on hover */
.zx-logo__word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--accent),
    rgba(var(--additional-rgb), 0.6)
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.zx-logo:hover .zx-logo__word::after {
  transform: scaleX(1);
}

/* ------------------------------------------------
 * Keyframes
 * ------------------------------------------------ */

@keyframes zx-reveal {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes zx-sweep {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

@keyframes zx-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zx-ring-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zx-corner-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zx-letter-in {
  from {
    opacity: 0;
    transform: translateY(0.9em);
    filter: blur(0.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes zx-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes zx-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zx-scan {
  0% {
    opacity: 0;
    transform: translateY(-120%);
  }
  12%,
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(560%);
  }
}

@keyframes zx-sheen {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(320%);
  }
}

@keyframes zx-breathe {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.06);
  }
}

@keyframes zx-grid-drift {
  to {
    background-position:
      6rem 6rem,
      6rem 6rem;
  }
}

@keyframes zx-blink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.15;
  }
}

@keyframes zx-bloom {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* ------------------------------------------------
 * 08. Reduced motion - show the finished composition
 * ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .zx-loader__grid,
  .zx-loader__glow,
  .zx-frame__corner,
  .zx-mark__ring,
  .zx-mark__orbit,
  .zx-loader__tagline,
  .zx-loader__meter,
  .zx-mark__ink,
  .zx-word__letter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .zx-mark__ring::after,
  .zx-mark__ring--ticks::after,
  .zx-mark__scan::before,
  .zx-meter__fill::after,
  .zx-loader__flash,
  .zx-mark__sweep {
    animation: none !important;
    opacity: 0 !important;
  }

  .zx-mark__reveal {
    animation: none !important;
    clip-path: none !important;
  }

  .zx-mark__halo {
    animation: none !important;
    opacity: 1 !important;
  }
}