@import url("./mazufa-tokens.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--mz-color-canvas);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 6%, rgb(27 79 156 / 24%), transparent 28rem),
    var(--mz-color-canvas);
  color: var(--mz-color-text);
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-base);
  line-height: var(--mz-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--mz-color-selection);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 0.2rem solid var(--mz-color-focus);
  outline-offset: 0.25rem;
}

.mz-container {
  width: min(var(--mz-size-content), calc(100% - 2rem));
  margin-inline: auto;
}

.mz-skip-link {
  position: fixed;
  inset-block-start: var(--mz-space-3);
  inset-inline-start: var(--mz-space-3);
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: var(--mz-radius-sm);
  background: var(--mz-color-action);
  color: var(--mz-color-action-text);
  font-weight: 850;
  transform: translateY(-180%);
  transition: transform var(--mz-duration-fast) ease-out;
}

.mz-skip-link:focus {
  transform: translateY(0);
}

.mz-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  border-block-end: 1px solid var(--mz-color-border);
  background: rgb(5 8 15 / 84%);
  -webkit-backdrop-filter: blur(1rem) saturate(1.25);
  backdrop-filter: blur(1rem) saturate(1.25);
}

.mz-header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mz-space-5);
  min-height: 5rem;
}

.mz-brand {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  text-decoration: none;
}

.mz-brand-logo {
  width: auto;
  height: clamp(2.4rem, 5vw, 3rem);
  object-fit: contain;
}

.mz-primary-nav {
  justify-self: center;
}

.mz-primary-nav ul,
.mz-footer-nav,
.mz-social-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--mz-space-4), 2vw, var(--mz-space-8));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-primary-nav a,
.mz-footer-nav a {
  position: relative;
  color: var(--mz-color-text-muted);
  font-size: var(--mz-text-sm);
  font-weight: 750;
  text-decoration: none;
  transition: color var(--mz-duration-fast) ease-out;
}

.mz-primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.45rem;
  block-size: 0.14rem;
  border-radius: var(--mz-radius-pill);
  background: var(--mz-gradient-action);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--mz-duration-medium) var(--mz-ease-out);
}

.mz-primary-nav a:hover,
.mz-primary-nav a[aria-current="page"],
.mz-footer-nav a:hover {
  color: var(--mz-color-text);
}

.mz-primary-nav a:hover::after,
.mz-primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.mz-header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--mz-space-2);
}

.mz-language,
.mz-menu-button {
  min-height: 2.75rem;
  border: 1px solid var(--mz-color-border);
  border-radius: var(--mz-radius-pill);
  background: rgb(255 255 255 / 5%);
  color: var(--mz-color-text);
  font: inherit;
  font-size: var(--mz-text-sm);
  font-weight: 850;
  cursor: pointer;
}

.mz-language {
  padding-inline: 1rem;
}

.mz-menu-button {
  display: none;
  inline-size: 2.75rem;
  padding: 0;
  place-items: center;
}

.mz-menu-button svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.mz-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(37rem, 78svh, 56rem);
  padding-block: clamp(var(--mz-space-16), 10vw, 8rem);
  overflow: hidden;
}

.mz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
  align-items: center;
  gap: clamp(var(--mz-space-10), 6vw, 5rem);
}

.mz-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--mz-space-3);
  margin: 0;
  color: var(--mz-brand-cyan-400);
  font-size: var(--mz-text-xs);
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mz-kicker::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 0.16rem;
  border-radius: var(--mz-radius-pill);
  background: var(--mz-gradient-action);
}

[dir="rtl"] .mz-kicker {
  letter-spacing: 0;
}

.mz-hero h1 {
  max-width: 11ch;
  margin: var(--mz-space-5) 0 var(--mz-space-6);
  color: var(--mz-color-text);
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-hero);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: var(--mz-leading-tight);
  text-wrap: balance;
}

[dir="rtl"] .mz-hero h1 {
  letter-spacing: -0.025em;
}

.mz-gradient-text {
  background: linear-gradient(110deg, var(--mz-brand-cyan-400), var(--mz-brand-cyan-500) 54%, var(--mz-brand-teal-500));
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.mz-hero-lead {
  max-width: 36rem;
  margin: 0;
  color: var(--mz-color-text-muted);
  font-size: var(--mz-text-lg);
}

.mz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mz-space-3);
  margin-block-start: var(--mz-space-8);
}

.mz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding-inline: 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--mz-radius-pill);
  background: var(--mz-gradient-action);
  box-shadow: var(--mz-shadow-glow);
  color: var(--mz-color-action-text);
  font-weight: 900;
  text-decoration: none;
  transition:
    transform var(--mz-duration-medium) var(--mz-ease-out),
    box-shadow var(--mz-duration-medium) var(--mz-ease-out);
}

.mz-button--secondary {
  border-color: var(--mz-color-border-strong);
  background: rgb(255 255 255 / 4%);
  box-shadow: none;
  color: var(--mz-color-text);
}

.mz-button:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 1.7rem 4rem -1.6rem rgb(41 171 226 / 75%);
}

.mz-button--secondary:hover {
  box-shadow: var(--mz-shadow-sm);
}

/* CSS-only release world. It is decorative and remains legible when 3D is absent. */
.mz-release-world {
  position: relative;
  min-height: clamp(22rem, 44vw, 33rem);
  border: 1px solid var(--mz-color-border);
  border-radius: var(--mz-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgb(41 171 226 / 28%), transparent 34%),
    radial-gradient(circle at 20% 86%, rgb(27 79 156 / 45%), transparent 45%),
    var(--mz-gradient-ink);
  box-shadow: var(--mz-shadow-lg);
}

.mz-release-world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 22%) 0.06rem, transparent 0.07rem);
  background-size: 1.45rem 1.45rem;
  opacity: 0.17;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
}

.mz-orbit,
.mz-core,
.mz-note {
  position: absolute;
  pointer-events: none;
}

.mz-core {
  inset: 50% auto auto 50%;
  inline-size: clamp(8rem, 18vw, 13rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 72%), transparent 10%),
    conic-gradient(from 210deg, var(--mz-brand-royal-600), var(--mz-brand-cyan-500), var(--mz-brand-teal-500), var(--mz-brand-amber-500), var(--mz-brand-royal-600));
  box-shadow:
    inset 0 0 3rem rgb(5 8 15 / 52%),
    0 0 4rem rgb(41 171 226 / 35%);
  transform: translate(-50%, -50%);
}

.mz-core::after {
  content: "";
  position: absolute;
  inset: 38%;
  border: 0.25rem solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  background: var(--mz-neutral-1000);
}

.mz-orbit {
  inset: 50% auto auto 50%;
  inline-size: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgb(95 196 238 / 34%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-tilt));
}

.mz-orbit::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -0.35rem;
  inline-size: 0.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orbit-color);
  box-shadow: 0 0 1.6rem var(--orbit-color);
}

.mz-orbit--one {
  --orbit-size: 58%;
  --orbit-tilt: 18deg;
  --orbit-color: var(--mz-brand-cyan-400);
}

.mz-orbit--two {
  --orbit-size: 78%;
  --orbit-tilt: -29deg;
  --orbit-color: var(--mz-brand-amber-500);
}

.mz-orbit--three {
  --orbit-size: 94%;
  --orbit-tilt: 64deg;
  --orbit-color: var(--mz-brand-teal-500);
}

.mz-note {
  inset-block-end: var(--note-y);
  inset-inline-start: var(--note-x);
  display: grid;
  place-items: center;
  inline-size: 2.7rem;
  aspect-ratio: 1;
  border: 1px solid var(--mz-color-border);
  border-radius: 50%;
  background: rgb(13 23 40 / 82%);
  color: var(--mz-brand-cyan-400);
  box-shadow: var(--mz-shadow-sm);
  font-size: 1.3rem;
}

.mz-note--one { --note-x: 8%; --note-y: 16%; }
.mz-note--two { --note-x: 80%; --note-y: 70%; }
.mz-note--three { --note-x: 74%; --note-y: 10%; }

/* 3D is an enhancement only: the base composition above remains complete. */
@supports (transform-style: preserve-3d) and (perspective: 1px) {
  .mz-release-world {
    perspective: 70rem;
    transform-style: preserve-3d;
  }

  .mz-world-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: mz-world-drift 12s var(--mz-ease-out) infinite alternate;
  }

  .mz-core {
    transform: translate3d(-50%, -50%, 4rem) rotateX(58deg);
    animation: mz-core-turn 24s linear infinite;
  }

  .mz-orbit {
    transform: translate3d(-50%, -50%, var(--orbit-z, 0)) rotateX(70deg) rotateZ(var(--orbit-tilt));
    transform-style: preserve-3d;
    animation: mz-orbit-turn var(--orbit-speed, 18s) linear infinite;
  }

  .mz-orbit--one { --orbit-z: 1rem; --orbit-speed: 13s; }
  .mz-orbit--two { --orbit-z: -1rem; --orbit-speed: 19s; }
  .mz-orbit--three { --orbit-z: -3rem; --orbit-speed: 27s; }

  .mz-note {
    transform: translateZ(5rem);
    animation: mz-note-float 5s var(--mz-ease-out) infinite alternate;
  }

  .mz-note--two { animation-delay: -2s; }
  .mz-note--three { animation-delay: -3.5s; }
}

@keyframes mz-world-drift {
  to { transform: rotateY(-5deg) rotateX(2deg) scale(1.02); }
}

@keyframes mz-core-turn {
  to { transform: translate3d(-50%, -50%, 4rem) rotateX(58deg) rotateZ(360deg); }
}

@keyframes mz-orbit-turn {
  to { transform: translate3d(-50%, -50%, var(--orbit-z, 0)) rotateX(70deg) rotateZ(calc(var(--orbit-tilt) + 360deg)); }
}

@keyframes mz-note-float {
  to { transform: translate3d(0, -0.8rem, 6rem); }
}

.mz-demo-section {
  padding-block: var(--mz-space-20);
}

.mz-demo-section h2 {
  margin: 0 0 var(--mz-space-5);
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-xl);
  line-height: var(--mz-leading-tight);
}

.mz-demo-section p {
  max-width: 60ch;
  color: var(--mz-color-text-muted);
}

.mz-site-footer {
  position: relative;
  border-block-start: 1px solid var(--mz-color-border);
  background: linear-gradient(180deg, rgb(13 23 40 / 72%), var(--mz-neutral-1000));
}

.mz-footer-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  gap: var(--mz-space-10);
  align-items: end;
  padding-block: var(--mz-space-12);
}

.mz-footer-brand {
  display: inline-flex;
  margin-block-end: var(--mz-space-5);
}

.mz-footer-copy {
  max-width: 38rem;
  margin: 0;
  color: var(--mz-color-text-subtle);
  font-size: var(--mz-text-sm);
}

.mz-footer-end {
  display: grid;
  justify-items: end;
  gap: var(--mz-space-5);
}

.mz-footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--mz-space-4);
  padding-block-start: var(--mz-space-6);
  border-block-start: 1px solid var(--mz-color-border);
  color: var(--mz-color-text-subtle);
  font-size: var(--mz-text-xs);
}

.mz-lang-ar {
  display: none;
}

html[lang="ar"] .mz-lang-en {
  display: none;
}

html[lang="ar"] .mz-lang-ar {
  display: revert;
}

@media (max-width: 52rem) {
  .mz-header-row {
    grid-template-columns: 1fr auto;
  }

  .mz-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .mz-header-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .mz-menu-button {
    display: grid;
  }

  .mz-primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    display: none;
    padding-block-end: var(--mz-space-5);
  }

  .mz-site-header[data-menu-open="true"] .mz-primary-nav {
    display: block;
  }

  .mz-primary-nav ul {
    display: grid;
    gap: 0;
  }

  .mz-primary-nav a {
    display: block;
    min-height: 2.75rem;
    padding-block: 0.55rem;
  }

  .mz-primary-nav a::after {
    display: none;
  }

  .mz-hero-grid,
  .mz-footer-grid {
    grid-template-columns: 1fr;
  }

  .mz-release-world {
    min-height: clamp(21rem, 86vw, 30rem);
  }

  .mz-footer-end {
    justify-items: start;
  }
}

@media (max-width: 34rem) {
  .mz-container {
    width: min(var(--mz-size-content), calc(100% - 1.25rem));
  }

  .mz-header-row {
    gap: var(--mz-space-2);
  }

  .mz-language {
    padding-inline: 0.72rem;
  }

  .mz-actions,
  .mz-button,
  .mz-footer-nav {
    inline-size: 100%;
  }

  .mz-footer-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--mz-space-3);
  }

  .mz-footer-meta {
    flex-direction: column;
  }
}

/* Users who request less motion or data get the complete static composition. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html.mz-save-data .mz-world-stage,
html.mz-save-data .mz-core,
html.mz-save-data .mz-orbit,
html.mz-save-data .mz-note {
  animation: none !important;
}

@media (forced-colors: active) {
  body {
    background: Canvas;
    color: CanvasText;
  }

  .mz-site-header {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mz-gradient-text {
    background: none;
    color: LinkText;
  }

  .mz-button,
  .mz-button--secondary,
  .mz-language,
  .mz-menu-button {
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    box-shadow: none;
    color: ButtonText;
    forced-color-adjust: auto;
  }

  .mz-release-world {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .mz-release-world::after,
  .mz-note {
    display: none;
  }

  .mz-core,
  .mz-orbit {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}