/*
 * SIMT Space landing. Hand-written; published verbatim at /styles/landing.css.
 *
 * Performance contract: everything that moves forever moves with `transform` or
 * `opacity` on its own element, so the compositor carries it. Nothing animates
 * a filter, a blur, a size or a layout property. Loops pause when their section
 * leaves the viewport ([data-animate] without [data-in-view]) and stop entirely
 * under prefers-reduced-motion. Layout is written in logical properties, so the
 * Arabic page mirrors without a stylesheet of its own.
 */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cosmos/space-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cosmos/space-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/cosmos/source-sans-3-latin-wght-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/cosmos/source-sans-3-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cosmos/el-messiri-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/cosmos/el-messiri-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  color-scheme: dark;
  --void: #07040a;
  --ink: #fff8f2;
  --muted: #cdbfcc;
  --faint: #a798a6;
  --line: rgb(255 248 242 / 0.12);
  --gold: #ffc766;
  --ember: #ff8c42;
  --rose: #ff7e8a;
  --violet: #c9a0ff;
  --cyan: #00e5ff;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --text: 'Source Sans 3', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
  --label: var(--mono);
  --tracking: 0.18em;
  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Arabic is cursive: no tracking, no case, and one family that carries both weights. */
:root:lang(ar) {
  --display: 'El Messiri', 'Space Grotesk', system-ui, sans-serif;
  --text: 'El Messiri', 'Source Sans 3', system-ui, sans-serif;
  --label: var(--display);
  --tracking: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* The fallback sky: a few tiled stars painted by the root, for a page without script. */
html {
  background-color: var(--void);
  background-image:
    radial-gradient(1.2px 1.2px at 24px 38px, rgb(255 248 242 / 0.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 130px 92px, rgb(255 222 186 / 0.7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 210px 170px, rgb(201 160 255 / 0.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 70px 230px, rgb(255 248 242 / 0.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgb(150 236 255 / 0.7) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 90px 120px, rgb(255 199 102 / 0.8) 50%, transparent 52%);
  background-size:
    340px 300px,
    340px 300px,
    340px 300px,
    340px 300px,
    340px 300px,
    520px 460px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:root:lang(ar) body {
  font-size: 1.125rem;
  line-height: 1.8;
}

a {
  color: inherit;
}
img,
svg {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: 30;
  inset-inline-start: 16px;
  top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--void);
  font: 600 0.9375rem/1 var(--display);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* ------------------------------------------------------------------ layers */

.sky {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: none;
}
.js .sky {
  display: block;
}

.nebula {
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 78% 20%, rgb(201 160 255 / 0.14), transparent 70%),
    radial-gradient(34% 30% at 14% 72%, rgb(255 126 138 / 0.09), transparent 70%),
    radial-gradient(52% 38% at 50% 112%, rgb(255 140 66 / 0.11), transparent 70%),
    radial-gradient(28% 24% at 30% 18%, rgb(0 229 255 / 0.05), transparent 70%);
  animation: k-nebula 70s ease-in-out infinite alternate;
}

.hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hud__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgb(255 248 242 / 0.3);
}
/* The HUD frame is drawn on all four corners, so each corner is named by the
   edge it belongs to rather than by a side: in Arabic the inline start edge is
   the right one and the frame mirrors with the language instead of staying
   pinned to the left of a right-to-left page. */
.hud__corner:nth-child(1) {
  inset-block-start: 14px;
  inset-inline-start: 14px;
  border-block-start-width: 1px;
  border-inline-start-width: 1px;
}
.hud__corner:nth-child(2) {
  inset-block-start: 14px;
  inset-inline-end: 14px;
  border-block-start-width: 1px;
  border-inline-end-width: 1px;
}
.hud__corner:nth-child(3) {
  inset-block-end: 14px;
  inset-inline-end: 14px;
  border-block-end-width: 1px;
  border-inline-end-width: 1px;
}
.hud__corner:nth-child(4) {
  inset-block-end: 14px;
  inset-inline-start: 14px;
  border-block-end-width: 1px;
  border-inline-start-width: 1px;
}
.hud__readout {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  display: none;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: rgb(255 248 242 / 0.5);
  white-space: nowrap;
}
.js .hud__readout {
  display: block;
}
.hud__readout > span {
  display: flex;
  gap: 18px;
}
.hud__readout.is-start {
  inset-inline-start: 48px;
}
.hud__readout.is-end {
  inset-inline-end: 48px;
}
.hud b {
  font-weight: 500;
  color: rgb(255 248 242 / 0.85);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 500 1.0625rem/1 var(--display);
}
.brand img {
  border-radius: 10px;
}
.brand b {
  font-weight: 600;
  color: var(--gold);
}
.brand:focus-visible,
.langs a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 12px;
}
.langs ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(7 4 10 / 0.6);
}
.langs a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font: 500 0.8125rem/1.1 var(--display);
  transition:
    color 0.2s,
    background-color 0.2s;
}
.langs a:lang(ar) {
  font-family: 'El Messiri', var(--display);
}
.langs__code {
  display: none;
  font-family: var(--mono);
  letter-spacing: 0.08em;
}
.langs a:hover {
  color: var(--ink);
  background: rgb(255 248 242 / 0.08);
}
.langs a[aria-current='page'] {
  color: var(--void);
  background: var(--ink);
}

/* ------------------------------------------------------------------ shared */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 500 0.75rem/1.3 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold));
}
[dir='rtl'] .eyebrow::before {
  background: linear-gradient(to right, transparent, var(--gold));
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgb(255 248 242 / 0.24);
  border-radius: 999px;
  background: rgb(255 248 242 / 0.06);
  color: var(--ink);
  font: 500 1rem/1 var(--display);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.button:hover {
  background: rgb(255 248 242 / 0.12);
  border-color: rgb(255 248 242 / 0.42);
}
.button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.button.is-ghost {
  background: transparent;
}
.button__icon {
  display: inline-block;
  animation: k-bob 2.4s ease-in-out infinite;
}

/* -------------------------------------------------------------------- hero */

.stage {
  position: relative;
  overflow-x: clip;
}

.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1440px;
  margin-inline: auto;
  padding: 104px var(--gutter) 72px;
  overflow-x: clip;
}
.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
/* Sized so the longest translated line (≈7.4em) never breaks inside the column. */
.hero__title {
  margin: 18px 0 22px;
  font: 600 clamp(2.5rem, 11vw, 5.25rem)/0.94 var(--display);
  letter-spacing: -0.045em;
}
:lang(ar) .hero__title {
  line-height: 1.22;
  letter-spacing: 0;
}
.hero__line {
  display: block;
}
.word {
  display: inline-block;
  padding-block: 0.06em 0.16em;
  margin-block: -0.06em -0.16em;
}
.hero__line.is-accent .word {
  background: linear-gradient(100deg, var(--gold), var(--ember) 35%, var(--rose) 65%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
}
.samt {
  font-family: 'El Messiri', serif;
  font-size: 1.12em;
  font-weight: 600;
  color: var(--gold);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__art {
  order: -1;
  position: relative;
  justify-self: center;
  width: min(84vw, 46svh, 700px);
  aspect-ratio: 1;
  perspective: 1100px;
}
.hero__scroll {
  position: absolute;
  inset-block-end: 26px;
  inset-inline-start: 50%;
  display: none;
  margin: 0;
  justify-items: center;
  gap: 12px;
  transform: translateX(-50%);
  font: 500 0.6875rem/1 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.hero__scroll::after {
  content: '';
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: k-drip 2.4s var(--ease-out) infinite;
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 0;
  }
  .hero__title {
    font-size: clamp(2.75rem, 5.8vw, 5.25rem);
  }
  .hero__art {
    order: 0;
    width: min(100%, 78vh, 700px);
  }
}
@media (min-width: 960px) and (min-height: 680px) {
  .hero__scroll {
    display: grid;
  }
}

/* ------------------------------------------------------------------ quasar */

.quasar {
  position: absolute;
  inset: 0;
}
.quasar__body {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.quasar__body > * {
  position: absolute;
}

.quasar__halo {
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(255 214 150 / 0.34),
    rgb(255 140 66 / 0.16) 26%,
    rgb(255 126 138 / 0.08) 48%,
    rgb(201 160 255 / 0.05) 68%,
    transparent
  );
  animation: k-breathe 9s ease-in-out infinite;
}

.quasar__jets {
  inset: 0;
  transform: rotate(-12deg);
}
.quasar__jet {
  position: absolute;
  inset-inline-start: 49%;
  inset-block-end: 50%;
  width: 2%;
  height: 92%;
  transform-origin: 50% 100%;
}
.quasar__jet.is-south {
  transform: rotate(180deg);
}
.quasar__jet i {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50% / 6%;
  transform-origin: 50% 100%;
  background: linear-gradient(
    to top,
    rgb(255 248 242 / 0.95),
    rgb(201 160 255 / 0.6) 14%,
    rgb(0 229 255 / 0.26) 52%,
    transparent 96%
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent);
  animation: k-jet 4s ease-in-out infinite alternate;
}
.quasar__jet.is-south i {
  animation-delay: -2s;
}
.quasar__jet i::after {
  content: '';
  position: absolute;
  inset: 0 0 -80px;
  background: repeating-linear-gradient(
    to top,
    transparent 0 26px,
    rgb(255 255 255 / 0.75) 26px 30px,
    transparent 30px 80px
  );
  animation: k-knots 1.3s linear infinite;
}

.quasar__disk {
  inset: 5%;
}
.quasar__disk.is-front {
  clip-path: polygon(0 60.6%, 100% 39.4%, 100% 100%, 0 100%);
}
.quasar__tilt {
  position: absolute;
  inset: 0;
  transform: rotate(-12deg) scaleY(0.22);
}
.quasar__tilt::after,
.quasar__swirl {
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 31%,
    #000 35%,
    #000 48%,
    rgb(0 0 0 / 0.5) 66%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 31%,
    #000 35%,
    #000 48%,
    rgb(0 0 0 / 0.5) 66%,
    transparent 100%
  );
}
.quasar__swirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 7deg, rgb(255 255 255 / 0.32) 8deg, transparent 9deg 17deg),
    conic-gradient(
      from 0deg,
      #ff8c42,
      #ffd08a 8%,
      #fff4e0 14%,
      #ffc766 22%,
      #ff7e8a 36%,
      #c9a0ff 50%,
      #ff7e8a 62%,
      #ff8c42 74%,
      #ffe2b0 86%,
      #ff8c42
    );
  animation: k-spin 18s linear infinite;
}
/* Doppler beaming: the approaching side stays brighter while the disk turns under it. */
.quasar__tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, rgb(255 250 235 / 0.6), transparent 55%);
}

.quasar__lens {
  inset: 30%;
  border-radius: 50%;
  background: conic-gradient(
    from -12deg,
    #fff4e0,
    #ffc766 18%,
    rgb(255 140 66 / 0.6) 30%,
    #ffc766 46%,
    #fff4e0 52%,
    #ffc766 66%,
    rgb(255 126 138 / 0.55) 80%,
    #fff4e0
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 67%,
    #000 71%,
    #000 75%,
    rgb(0 0 0 / 0.3) 84%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 67%,
    #000 71%,
    #000 75%,
    rgb(0 0 0 / 0.3) 84%,
    transparent 100%
  );
  animation: k-spin 30s linear infinite reverse;
}
.quasar__core {
  inset: 38.5%;
  border-radius: 50%;
  background: #000;
  box-shadow:
    0 0 0 1px rgb(255 238 214 / 0.8),
    0 0 14px 2px rgb(255 199 102 / 0.7),
    0 0 48px 10px rgb(255 140 66 / 0.28);
}
.quasar__pulse {
  position: absolute;
  inset: 35%;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quasar__pulse:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
}
.quasar__shock {
  position: absolute;
  inset: 38.5%;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgb(255 214 150 / 0.9);
  box-shadow:
    0 0 30px rgb(255 199 102 / 0.45),
    inset 0 0 30px rgb(255 199 102 / 0.3);
}

/* ----------------------------------------------------------------- compass */

.compass {
  inset: -7%;
  pointer-events: none;
}
.compass > div {
  position: absolute;
  inset: 0;
}
.compass svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.compass__bezel,
.compass__marker {
  will-change: transform;
}
.compass__legend-text {
  direction: ltr;
  font: 500 12px var(--mono);
  letter-spacing: 0.3em;
  fill: rgb(255 248 242 / 0.3);
}
:lang(ar) .compass__legend-text {
  font: 600 14px var(--display);
  letter-spacing: 0;
}
.compass__rim {
  fill: none;
  stroke: rgb(255 248 242 / 0.16);
}
.compass__tick {
  fill: none;
  stroke: rgb(255 248 242 / 0.2);
}
.compass__tick.is-mid {
  stroke: rgb(255 248 242 / 0.36);
}
.compass__tick.is-major {
  stroke: rgb(255 248 242 / 0.62);
  stroke-width: 1.5;
}
.compass__deg,
.compass__cardinal {
  text-anchor: middle;
  dominant-baseline: central;
}
.compass__deg {
  font: 500 11px var(--mono);
  fill: rgb(255 248 242 / 0.5);
}
.compass__cardinal {
  font: 600 17px var(--display);
  fill: rgb(255 248 242 / 0.82);
}
.compass__cardinal.is-north {
  fill: var(--gold);
}
.compass__dash {
  fill: none;
  stroke: rgb(255 199 102 / 0.3);
  stroke-dasharray: 1 7;
}
.compass__needle {
  stroke: rgb(255 199 102 / 0.55);
  stroke-dasharray: 2 5;
}
.compass__lubber {
  fill: var(--gold);
}
@media (max-width: 600px) {
  .compass__deg {
    display: none;
  }
}

/* ------------------------------------------------------------- motion kit */

.art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.spin {
  animation: k-spin var(--t, 30s) linear var(--d, 0s) infinite var(--dir, normal);
}
.flip,
.ping,
.breathe {
  transform-box: fill-box;
  transform-origin: center;
}
.flip {
  animation: k-flip var(--t) ease-in-out var(--d, 0s) infinite;
}
.ping {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  animation: k-ping var(--t) cubic-bezier(0.2, 0.6, 0.35, 1) var(--d, 0s) infinite;
}
.twinkle {
  animation: k-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}
.breathe {
  animation: k-breathe var(--t, 6s) ease-in-out var(--d, 0s) infinite;
}
.draw {
  stroke-dasharray: 1;
  animation: k-draw var(--t) ease-in-out var(--d, 0s) infinite;
}
.bit {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-opacity: 1;
  stroke-dasharray: 0.04 1.2;
  animation: k-bit var(--t) linear var(--d, 0s) infinite;
}
.fall {
  animation: k-fall var(--t) cubic-bezier(0.55, 0, 0.8, 0.4) var(--d, 0s) infinite;
}

/* --------------------------------------------------------------- emblems */

.orb {
  position: relative;
  aspect-ratio: 1;
  color: var(--accent);
}
.orb > *,
.tilt > *,
.spin > *,
.half > * {
  position: absolute;
  inset: 0;
}
.tilt {
  transform: rotate(var(--tilt)) scaleY(var(--squash));
}
.tilt > .half {
  inset: 50% 0 0;
  overflow: hidden;
}
.half > .spin {
  inset: -100% 0 0;
}

.halo {
  border-radius: 50%;
  transform: scale(1.3);
  opacity: 0.75;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--accent) 9%, transparent) 50%,
    transparent
  );
  transition:
    opacity 0.8s,
    transform 0.8s var(--ease-out);
}
.world.is-reached .halo,
.world:hover .halo {
  opacity: 1;
  transform: scale(1.42);
}

.ln {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-opacity: 0.45;
}
.ln.is-faint {
  stroke-opacity: 0.2;
}
.ln.is-bright {
  stroke-opacity: 0.8;
}
.ln.is-rim {
  stroke-width: 1;
  stroke-opacity: 0.9;
}
.ln.is-dotted {
  stroke-dasharray: 0.5 3.5;
  stroke-linecap: round;
  stroke-opacity: 0.65;
}
.ln.is-dashed {
  stroke-dasharray: 6 4;
}
.ln.is-gold {
  stroke: var(--gold);
}
.dot {
  fill: currentColor;
}
.dot.is-gold {
  fill: var(--gold);
}
.ping.is-gold {
  stroke: var(--gold);
}
.glow {
  fill: currentColor;
  opacity: 0.14;
}
.ring {
  fill: none;
  stroke-width: 2.4;
}
.jet {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.8;
}

.orb > .orb__sweep {
  inset: 5%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 68%,
    color-mix(in srgb, var(--accent) 6%, transparent) 80%,
    color-mix(in srgb, var(--accent) 40%, transparent) 99.4%,
    var(--accent)
  );
}
.spin > .orb__sat {
  inset-block: 50% auto;
  inset-inline: 90% auto;
  width: 3%;
  height: 8.8%;
  margin-block: -4.4% 0;
  margin-inline: -1.5% 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 10px 2px var(--accent);
  animation:
    k-spin var(--t) linear infinite reverse,
    k-occult var(--t) linear infinite;
}
.orb > .orb__scan {
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
}
.orb__scan i {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 49.5%, color-mix(in srgb, var(--accent) 75%, transparent) 50%, transparent 50.5%),
    linear-gradient(transparent 28%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 50.1%);
  animation: k-scan var(--t) ease-in-out infinite alternate;
}

/* ------------------------------------------------------------- trajectory */

.trajectory {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
}
.js .trajectory.is-ready {
  display: block;
}
.trajectory svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.trajectory path {
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 0.55;
}
.probe i {
  /* The origin here is not a placement, it is the SVG path's user-space origin:
     the script measures the curve from the container's left edge and translates
     each marker by that coordinate, in every language. Anchoring the marker to
     the inline start edge would move the origin to the right in Arabic and send
     every marker off the screen. Named as an exemption in the gate rather than
     left as a physical property nobody accounted for. */
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin-block: -4px 0;
  margin-inline: -4px 0;
  border-radius: 50%;
  background: var(--probe, var(--gold));
  opacity: 0.5;
  will-change: transform;
}
.probe i:first-child {
  width: 12px;
  height: 12px;
  margin-block: -6px 0;
  margin-inline: -6px 0;
  opacity: 1;
  background: var(--ink);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--probe, var(--gold)) 40%, transparent),
    0 0 24px 6px var(--probe, var(--gold));
}
.probe i:nth-child(2) {
  opacity: 0.7;
}
.probe i:nth-child(n + 5) {
  opacity: 0.25;
}

/* ---------------------------------------------------------------- registry */

.registry {
  position: relative;
  z-index: 1;
  padding: clamp(96px, 16vh, 180px) 0 clamp(96px, 14vh, 160px);
  overflow-x: clip;
}
.registry__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.registry__head {
  max-width: 44rem;
}
.registry__head h2 {
  margin: 14px 0 18px;
  font: 600 clamp(2.2rem, 5vw, 4rem)/1.02 var(--display);
  letter-spacing: -0.035em;
}
:lang(ar) .registry__head h2 {
  line-height: 1.3;
  letter-spacing: 0;
}
.registry__head p:last-child {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.125rem;
}

.worlds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(96px, 18vh, 200px);
  margin: clamp(56px, 10vh, 120px) 0 0;
  padding: 0;
  list-style: none;
}
.world {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.world__ghost {
  position: absolute;
  z-index: -1;
  top: 50%;
  inset-inline-start: -2%;
  margin: 0;
  translate: 0 -50%;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font: 700 clamp(4rem, 13vw, 12rem)/0.9 var(--display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
:lang(ar) .world__ghost {
  letter-spacing: 0;
  line-height: 1.3;
}
.world__orb {
  width: min(100%, 440px);
  justify-self: center;
  will-change: transform;
}
.world__index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
  font: 500 0.75rem/1.2 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.world__code {
  color: var(--accent);
  font-family: var(--mono);
}
.world__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  color: var(--accent);
}
.world__state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: k-beacon 2.4s ease-out infinite;
}
[data-state='forming'] .world__state::before {
  animation: k-twinkle 1.1s steps(2, jump-none) infinite;
}
.world__name {
  margin: 18px 0 16px;
  font: 600 clamp(2.5rem, 6vw, 4.75rem)/0.98 var(--display);
  letter-spacing: -0.035em;
}
:lang(ar) .world__name {
  line-height: 1.3;
}
[data-scramble] {
  display: inline-block;
}
.world__summary {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.125rem;
}
.world__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  max-width: 36rem;
  margin: 28px 0 32px;
  border-block-start: 1px solid var(--line);
}
.world__facts div {
  padding-block: 14px;
  padding-inline-end: 16px;
  border-block-end: 1px solid var(--line);
}
.world__facts dt {
  font: 500 0.6875rem/1.4 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.world__facts dd {
  margin: 4px 0 0;
  font: 500 0.9375rem/1.4 var(--display);
}
.world__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--void);
  font: 600 1rem/1 var(--display);
  text-decoration: none;
  box-shadow: 0 12px 40px -14px var(--accent);
  transition: box-shadow 0.4s var(--ease-out);
}
/* The whole world is the target; the focus ring stays on the named link. */
.world__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.world__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.world:hover .world__cta {
  box-shadow: 0 16px 56px -10px var(--accent);
}
.world__arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.world:hover .world__arrow,
.world__cta:focus-visible .world__arrow {
  transform: translateX(5px);
}
[dir='rtl'] .world__arrow {
  transform: scaleX(-1);
}
[dir='rtl'] .world:hover .world__arrow,
[dir='rtl'] .world__cta:focus-visible .world__arrow {
  transform: scaleX(-1) translateX(5px);
}
.world__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0;
}
/* Sits above the CTA's whole-world target, so it stays a link of its own. */
.world__shortcut {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  color: var(--muted);
  font: 500 0.9375rem/1 var(--display);
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.world__shortcut:hover {
  color: var(--ink);
}
.world__shortcut:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
[dir='rtl'] .is-mirrored {
  display: inline-block;
  transform: scaleX(-1);
}

/* The visual takes the narrower column on whichever side the world declares, so
   an end-side world is the exact mirror of a start-side one. */
@media (min-width: 860px) {
  .world {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .world[data-side='end'] {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .world[data-side='end'] .world__orb {
    order: 2;
  }
}
@media (max-width: 859px) {
  .world__orb {
    width: min(82vw, 380px);
  }
}

/* ------------------------------------------------------------------ finale */

.finale {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 28px;
  min-height: 86vh;
  padding: 120px var(--gutter) max(56px, env(safe-area-inset-bottom));
  text-align: center;
  overflow: clip;
}
.finale__horizon {
  position: absolute;
  z-index: -1;
  inset-block-start: 64%;
  inset-inline-start: 50%;
  width: max(180vw, 1600px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #0a0610 96%, transparent 100%);
  box-shadow:
    0 -1px 0 rgb(255 199 102 / 0.6),
    inset 0 40px 80px -40px rgb(255 199 102 / 0.35);
}
.finale__horizon::after {
  content: '';
  position: absolute;
  inset: -6% 10% auto;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 100%, rgb(255 140 66 / 0.4), rgb(255 126 138 / 0.12) 50%, transparent 75%);
  animation: k-dawn 10s ease-in-out infinite alternate;
}
.finale__title {
  max-width: 14ch;
  margin: 0;
  font: 600 clamp(2.4rem, 6.5vw, 5.5rem)/1 var(--display);
  letter-spacing: -0.04em;
  background: linear-gradient(100deg, var(--ink) 15%, var(--gold) 45%, var(--rose) 72%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: 0.06em 0.12em;
}
:lang(ar) .finale__title {
  line-height: 1.35;
  letter-spacing: 0;
}
.finale__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 500 1rem/1 var(--display);
  text-decoration: none;
  padding: 12px 4px;
}
.finale__back:hover {
  color: var(--ink);
}
.finale__back:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}
.finale__meta {
  display: grid;
  gap: 6px;
  margin-top: clamp(48px, 12vh, 120px);
  color: var(--faint);
  font: 500 0.8125rem/1.5 var(--display);
}
.finale__meta p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0;
}
.finale__meta a {
  color: var(--muted);
  text-underline-offset: 3px;
}
.finale__meta a:hover {
  color: var(--ink);
}

/* ----------------------------------------------------------------- rtl */

/* Centring is the one placement CSS cannot spell logically. Both elements are
   anchored to the inline start edge and then walked back half their own width,
   which is the right correction on a left-to-right page and the wrong one once
   the inline start edge is the right edge. Every other placement in this file is
   logical, so these two are the whole of the direction-dependent work. */
:dir(rtl) .hero__scroll {
  transform: translateX(50%);
}
:dir(rtl) .finale__horizon {
  transform: translateX(50%);
}

/* ------------------------------------------------------------- destination */

/* A destination is the inside of a space: an introduction, the scene the space
   is drawn as, and the sites it points at. The scene takes the wide column; the
   universe is a panorama and takes the whole width. */
.voyage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 6vh, 64px);
  max-width: 1440px;
  margin-inline: auto;
  padding: 112px var(--gutter) clamp(72px, 12vh, 140px);
}
.voyage__intro,
.beacons {
  max-width: 34rem;
}
.voyage__back,
.finale__back {
  -webkit-tap-highlight-color: transparent;
}
.voyage__back {
  display: flex;
  inline-size: fit-content;
  align-items: center;
  gap: 10px;
  margin-block-end: 28px;
  padding-block: 10px;
  color: var(--muted);
  font: 500 0.9375rem/1 var(--display);
  text-decoration: none;
}
.voyage__back:hover {
  color: var(--ink);
}
.voyage__back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.voyage__back span,
.finale__back span {
  transition: translate 0.4s var(--ease-out);
}
.voyage__back:hover span,
.finale__back:hover span {
  translate: -4px 0;
}
[dir='rtl'] .voyage__back:hover span,
[dir='rtl'] .finale__back:hover span {
  translate: 4px 0;
}
.voyage .eyebrow {
  color: var(--accent);
}
.voyage .eyebrow::before {
  background: linear-gradient(to left, transparent, var(--accent));
}
[dir='rtl'] .voyage .eyebrow::before {
  background: linear-gradient(to right, transparent, var(--accent));
}
.voyage__title {
  margin: 16px 0 10px;
  font: 600 clamp(2.75rem, 7.5vw, 5.75rem)/0.95 var(--display);
  letter-spacing: -0.045em;
}
:lang(ar) .voyage__title {
  line-height: 1.25;
  letter-spacing: 0;
}
.voyage__kind {
  margin: 0 0 22px;
  font: 500 0.8125rem/1.4 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.voyage__lede {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}
.voyage__hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  color: var(--faint);
  font: 500 0.875rem/1.4 var(--display);
}
.voyage__hint::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  color: var(--accent);
  background: currentColor;
  animation: k-beacon 2.4s ease-out infinite;
}

.scene {
  position: relative;
  min-width: 0;
}
.scene__frame {
  position: relative;
  container-type: inline-size;
  width: min(100%, 78svh, 780px);
  aspect-ratio: 1;
  margin-inline: auto;
  will-change: transform;
}
.paint {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 960px) {
  .voyage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: clamp(24px, 4vw, 72px);
    min-height: 100vh;
    min-height: 100svh;
  }
  .voyage__intro {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
  .scene {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .beacons {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .voyage[data-scene='universe'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .voyage[data-scene='universe'] > * {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ------------------------------------------------------------------ bodies */

.bodies {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A body is a point; its mark hangs from it so the figure's centre sits on it. */
.body {
  position: absolute;
  width: 0;
  height: 0;
}
.body__mark {
  --fig: 44px;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  translate: -50% calc(var(--fig) / -2);
  -webkit-tap-highlight-color: transparent;
}
button.body__mark,
a.body__mark {
  cursor: pointer;
}
.body__mark:focus-visible {
  outline: none;
}
.body__figure {
  position: relative;
  display: block;
  width: var(--fig);
  height: var(--fig);
  isolation: isolate;
  transition: scale 0.6s var(--ease-out);
}
.body__figure > * {
  position: absolute;
  inset: 0;
}
.body__mark:hover .body__figure,
.body__mark.is-open .body__figure {
  scale: 1.14;
}
.body__mark:focus-visible .body__figure::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}
.body__label {
  display: grid;
  justify-items: center;
  gap: 3px;
  white-space: nowrap;
  text-shadow:
    0 0 14px var(--void),
    0 0 4px var(--void);
}
.body__name {
  font: 600 1rem/1.2 var(--display);
  color: var(--ink);
}
.body__meta {
  font: 500 0.6875rem/1.3 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.body__state {
  margin-block-start: 5px;
  padding: 3px 9px;
  border: 1px dashed color-mix(in srgb, var(--tone, var(--accent)) 60%, transparent);
  border-radius: 999px;
  font: 500 0.625rem/1.2 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}

/* A star: a glow, a bright core and a ring that keeps sending out its signal. A
   star still forming has a dimmer core and an accretion ring instead. */
.star__glow {
  border-radius: 50%;
  scale: 2.2;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--tone) 60%, #fff),
    color-mix(in srgb, var(--tone) 30%, transparent) 38%,
    transparent
  );
}
.star__ring {
  border: 1px solid color-mix(in srgb, var(--tone) 75%, transparent);
  border-radius: 50%;
  animation: k-ping 3.4s cubic-bezier(0.2, 0.6, 0.35, 1) calc(var(--i) * -1.1s) infinite;
}
.body__figure > .star__core {
  inset: 33%;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px 3px var(--tone),
    0 0 28px 8px color-mix(in srgb, var(--tone) 45%, transparent);
}
[data-state='forming'] .star__glow {
  opacity: 0.5;
}
[data-state='forming'] .star__ring {
  scale: 1.3;
  border-style: dashed;
  animation: k-spin 9s linear infinite;
}
[data-state='forming'] .body__figure > .star__core {
  inset: 40%;
  background: color-mix(in srgb, var(--tone) 55%, #fff);
  animation: k-twinkle 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------------ galaxy */

/* The disk turns the way a spiral's arms trail, and each mark turns back by as
   much about its own figure, so the labels ride the arms and stay upright. */
.galaxy {
  --tone: var(--accent);
}
.galaxy > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.galaxy > .galaxy__halo {
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 20%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent) 55%,
    transparent
  );
  animation: k-breathe 14s ease-in-out infinite;
}
.galaxy > .galaxy__disk {
  border-radius: 50%;
  animation: k-spin var(--spin) linear infinite reverse;
}
.galaxy__fallback {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  opacity: 0.55;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    repeating-conic-gradient(from 20deg, color-mix(in srgb, var(--accent) 24%, transparent) 0deg, transparent 50deg 80deg, color-mix(in srgb, var(--accent) 24%, transparent) 90deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
  mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.galaxy__disk:has(> .is-painted) > .galaxy__fallback {
  display: none;
}
.galaxy .bodies {
  pointer-events: auto;
}
.galaxy > .galaxy__core {
  inset: 45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--accent) 50%, #fff) 35%, transparent);
  box-shadow: 0 0 70px 24px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: k-breathe 7s ease-in-out infinite;
}
.galaxy .body {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: rotate(var(--angle)) translateY(calc(var(--orbit) * -50cqi)) rotate(calc(-1 * var(--angle)));
}
.galaxy .body__mark {
  --fig: clamp(36px, 7.5cqi, 56px);
  transform-origin: 50% calc(var(--fig) / 2);
  animation: k-spin var(--spin) linear infinite;
}
.galaxy:hover :is(.galaxy__disk, .body__mark),
.galaxy:focus-within :is(.galaxy__disk, .body__mark),
.voyage:has(.card:popover-open) .galaxy :is(.galaxy__disk, .body__mark) {
  animation-play-state: paused;
}

/* ----------------------------------------------------------------- cluster */

/* Each galaxy stands where its country is on the map, at a size that follows
   the cities it charts; the threads between them carry a signal across. */
.cluster .body {
  inset-block-start: var(--y);
  inset-inline-start: var(--x);
}
.cluster .body__mark {
  --fig: calc(var(--size) * 1cqi);
}
.cluster__fallback {
  z-index: -1;
  border-radius: 50%;
  scale: 1.2;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--tone) 50%, #fff),
    color-mix(in srgb, var(--tone) 26%, transparent) 26%,
    transparent 72%
  );
  opacity: 0.8;
}
.cluster__web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  color: var(--accent);
  pointer-events: none;
}
.cluster__web .ln.is-dotted {
  stroke-width: 2.6;
  stroke-dasharray: 1 13;
  stroke-opacity: 0.5;
}
.cluster__web .bit {
  stroke: color-mix(in srgb, var(--accent) 35%, #fff);
  stroke-width: 3.5;
}

/* ---------------------------------------------------------------- universe */

/* The universe is read against a celestial grid over the cosmic web. A charted
   constellation is a body of rules you can travel to; the others are forming. */
.scene__frame.universe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.universe__deep {
  position: absolute;
  inset: -4%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
.universe__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--accent);
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
  mask-image: radial-gradient(closest-side, #000 50%, transparent);
}
.universe__grid :is(ellipse, path) {
  vector-effect: non-scaling-stroke;
}
.universe__ecliptic {
  stroke: var(--gold);
  stroke-opacity: 0.4;
}
.universe .body {
  inset-block-start: var(--wy);
  inset-inline-start: var(--wx);
}
.universe .body__mark {
  --fig: calc(var(--wsize) * 1cqi);
}
/* A constellation is its own container, so its star names show only where they are legible. */
.universe .body__figure {
  --tone: var(--accent);
  container-type: inline-size;
}
.constellation {
  color: var(--accent);
}
.constellation svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.constellation .glow {
  opacity: 0.22;
}
.constellation__dust {
  fill: color-mix(in srgb, var(--accent) 60%, #fff);
  opacity: 0.55;
}
.constellation__code {
  font: 600 7px var(--mono);
  letter-spacing: 0.1em;
  fill: var(--ink);
}
.constellation__part {
  font: 500 5.5px var(--display);
  fill: var(--muted);
}
.body__mark:hover .constellation .ln,
.body__mark:focus-visible .constellation .ln {
  stroke-opacity: 1;
}
[data-state='forming'] .constellation {
  opacity: 0.7;
}
@container (max-width: 320px) {
  .constellation text {
    display: none;
  }
}
@media (max-width: 719px) {
  .scene__frame.universe {
    aspect-ratio: 4 / 5;
  }
  .universe .body {
    inset-block-start: var(--ny);
    inset-inline-start: var(--nx);
  }
  .universe .body__mark {
    --fig: calc(var(--nsize) * 1cqi);
  }
}
/* On a wide screen the universe is the page: the introduction is laid over its start corner. */
@media (min-width: 1200px) {
  .voyage[data-scene='universe'] > :is(.voyage__intro, .scene) {
    grid-row: 1;
  }
  .voyage[data-scene='universe'] > .voyage__intro {
    position: relative;
    z-index: 2;
    align-self: start;
    max-width: 31rem;
  }
}

/* ------------------------------------------------------------------- cards */

/* The details of a body are a popover: centred by default and moved beside its
   body by the script on a wide screen, a sheet docked to the bottom otherwise. */
.cards {
  display: contents;
}
.card {
  inline-size: min(23rem, calc(100vw - 32px));
  max-block-size: min(36rem, calc(100svh - 32px));
  margin: auto;
  padding: 20px 22px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 14%, #100a16), #0a060e 62%);
  color: var(--ink);
  box-shadow:
    0 30px 80px -30px color-mix(in srgb, var(--tone) 60%, transparent),
    inset 0 1px 0 rgb(255 248 242 / 0.06);
}
.card::backdrop {
  background: transparent;
}
.card.is-placing {
  opacity: 0 !important;
}
@media (max-width: 859px) {
  .card:popover-open {
    inset: auto 12px max(12px, env(safe-area-inset-bottom));
    inline-size: auto;
    max-block-size: 72svh;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition:
      opacity 0.3s ease,
      scale 0.5s var(--ease-out),
      display 0.3s allow-discrete,
      overlay 0.3s allow-discrete;
  }
  .card:not(:popover-open) {
    opacity: 0;
    scale: 0.94;
  }
  @starting-style {
    .card:popover-open {
      opacity: 0;
      scale: 0.94;
    }
  }
}
@supports not selector(:popover-open) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 16px;
    grid-column: 1 / -1;
  }
  .card {
    inline-size: auto;
    max-block-size: none;
    margin: 0;
  }
  .card__close {
    display: none;
  }
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__kicker {
  margin: 0;
  font: 500 0.6875rem/1.3 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--tone);
}
.card__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block: -10px;
  margin-inline: 0 -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 400 1.5rem/1 var(--display);
  cursor: pointer;
}
.card__close:hover {
  color: var(--ink);
  background: rgb(255 248 242 / 0.08);
}
.card__close:focus-visible,
.card__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.card__name {
  margin: 10px 0 6px;
  font: 600 1.75rem/1.1 var(--display);
  letter-spacing: -0.02em;
}
:lang(ar) .card__name {
  line-height: 1.4;
  letter-spacing: 0;
}
.card__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font: 500 0.6875rem/1.2 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.card__state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  color: var(--tone);
  background: currentColor;
  animation: k-beacon 2.4s ease-out infinite;
}
.card[data-state='forming'] .card__state::before {
  border: 1px solid currentColor;
  background: transparent;
  animation: k-twinkle 1.1s steps(2, jump-none) infinite;
}
.card__summary {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.card__facts {
  display: grid;
  margin: 0;
  border-block-start: 1px solid var(--line);
}
.card__facts div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 12px;
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
}
.card__facts dt {
  padding-block-start: 2px;
  font: 500 0.6875rem/1.5 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.card__facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  font: 500 0.9375rem/1.4 var(--display);
}
.card__facts small {
  flex-basis: 100%;
  color: var(--faint);
  font: 500 0.75rem/1.4 var(--mono);
}
.card__code {
  font: 500 0.875rem/1.4 var(--mono);
}
.card__clock {
  color: var(--tone);
  font: 500 0.8125rem/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
.card__actions {
  margin: 18px 0 0;
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--tone);
  color: var(--void);
  font: 600 0.9375rem/1 var(--display);
  text-decoration: none;
}

/* ----------------------------------------------------------------- beacons */

.beacons__title {
  margin: 0 0 14px;
  font: 500 0.75rem/1.3 var(--label);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--faint);
}
.beacons__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beacon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'host arrow'
    'label arrow';
  align-items: center;
  column-gap: 16px;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(255 248 242 / 0.03);
  text-decoration: none;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}
.beacon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  translate: -100% 0;
  transition: translate 0.9s var(--ease-out);
  pointer-events: none;
}
.beacon:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.beacon:hover::before {
  translate: 100% 0;
}
.beacon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.beacon__host {
  grid-area: host;
  font: 600 1.0625rem/1.3 var(--display);
}
.beacon__label {
  grid-area: label;
  color: var(--muted);
  font-size: 0.9375rem;
}
.beacon__arrow {
  grid-area: arrow;
  color: var(--accent);
  font-size: 1.25rem;
  transition: translate 0.4s var(--ease-out);
}
.beacon:hover .beacon__arrow {
  translate: 3px -3px;
}
[dir='rtl'] .beacon__arrow {
  scale: -1 1;
}
[dir='rtl'] .beacon:hover .beacon__arrow {
  translate: -3px -3px;
}

/* ----------------------------------------------------------- choreography */

@media (prefers-reduced-motion: no-preference) {
  .word {
    animation: k-rise 1.1s var(--ease-out) both;
    animation-delay: calc(0.12s + var(--i) * 0.08s);
  }
  .hero__eyebrow {
    animation: k-fade 1s var(--ease-out) both;
  }
  .hero__lede {
    animation: k-lift 1s var(--ease-out) 0.5s both;
  }
  .hero__actions {
    animation: k-lift 1s var(--ease-out) 0.62s both;
  }
  .hero__art {
    animation: k-emerge 1.8s var(--ease-out) both;
  }

  .js [data-enter] {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 1s var(--ease-out),
      transform 1s var(--ease-out);
  }
  .js [data-enter].is-in {
    opacity: 1;
    transform: none;
  }

  @supports (animation-timeline: view()) {
    .world__ghost {
      animation: k-ghost linear both;
      animation-timeline: view();
    }
  }

  /* Arriving in a space, its bodies ignite one after another. */
  .body__figure {
    animation: k-ignite 1.3s var(--ease-out) calc(0.45s + var(--i) * 0.22s) backwards;
  }
  .body__label {
    animation: k-fade 1s ease calc(0.75s + var(--i) * 0.22s) backwards;
  }
  .cluster__web,
  .universe__grid {
    animation: k-fade 2s ease 0.3s backwards;
  }

  /* Travel between the registry and a space is one continuous move. Deeper is
     forward: the page you leave rushes past and the space approaches from far
     away. Shallower is backward, which is the way to the Cosmos: you pull out
     and the universe settles from in front of you. The emblem you chose is the
     one element that carries across, and becomes the scene it stood for. */
  @view-transition {
    navigation: auto;
  }
  .hud {
    view-transition-name: hud;
  }
  [data-voyage-anchor] {
    view-transition-name: voyage;
  }
  ::view-transition-group(voyage) {
    animation-duration: 1.05s;
    animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
  }
  ::view-transition-old(voyage),
  ::view-transition-new(voyage) {
    animation-duration: 1.05s;
  }
  html:active-view-transition-type(forward)::view-transition-old(root) {
    animation: k-pass 0.85s cubic-bezier(0.55, 0, 0.9, 0.45) both;
  }
  html:active-view-transition-type(forward)::view-transition-new(root) {
    animation: k-approach 1.1s var(--ease-out) 0.1s both;
  }
  html:active-view-transition-type(backward)::view-transition-old(root) {
    animation: k-recede 0.85s cubic-bezier(0.55, 0, 0.9, 0.45) both;
  }
  html:active-view-transition-type(backward)::view-transition-new(root) {
    animation: k-settle 1.1s var(--ease-out) 0.1s both;
  }

  /* Without view transitions the arrival is played by the page itself. */
  html[data-travel='forward']:not([data-transit]) :is(.stage, .finale) {
    animation: k-arrive-near 1.1s var(--ease-out) backwards;
  }
  html[data-travel='backward']:not([data-transit]) :is(.stage, .finale) {
    animation: k-arrive-far 1.1s var(--ease-out) backwards;
  }
}

.js [data-animate]:not([data-in-view]) * {
  animation-play-state: paused !important;
}

/* The jump between spaces: the stage falls away while the sky streaks in the space's colour. */
.warp-flash {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--warp, var(--ink)), transparent 62%);
}
.is-warping .warp-flash {
  animation: k-flash 0.65s ease-in forwards;
}
.is-warping .stage,
.is-warping .finale,
.is-warping .masthead {
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.45s ease-in,
    transform 0.6s ease-in;
}
.is-warping[data-departing='backward'] :is(.stage, .finale, .masthead) {
  transform: scale(0.9);
}

@media (max-width: 720px) {
  .hud__wide {
    display: none;
  }
  .hud__corner {
    width: 14px;
    height: 14px;
  }
}
/* On a phone the readouts would sit over the copy; the corners keep the frame. */
@media (max-width: 520px) {
  .js .hud__readout {
    display: none;
  }
  .brand span {
    display: none;
  }
  .langs a {
    padding: 8px 9px;
  }
}
@media (max-width: 374px) {
  .langs__name {
    display: none;
  }
  .langs__code {
    display: inline;
  }
  .langs a {
    padding: 8px 11px;
  }
}

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

/* --------------------------------------------------------------- keyframes */

@keyframes k-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes k-flip {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
@keyframes k-ping {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(3.4);
    opacity: 0;
  }
}
@keyframes k-twinkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
@keyframes k-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes k-draw {
  0% {
    stroke-dashoffset: 1;
  }
  35%,
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1;
  }
}
@keyframes k-bit {
  from {
    stroke-dashoffset: 0.04;
  }
  to {
    stroke-dashoffset: -1.04;
  }
}
@keyframes k-fall {
  0% {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
  }
}
@keyframes k-occult {
  0%,
  61% {
    opacity: 1;
  }
  64%,
  86% {
    opacity: 0;
  }
  89%,
  100% {
    opacity: 1;
  }
}
@keyframes k-scan {
  from {
    transform: translateY(-44%);
  }
  to {
    transform: translateY(44%);
  }
}
@keyframes k-jet {
  from {
    transform: scaleY(0.84);
    opacity: 0.7;
  }
  to {
    transform: scaleY(1.04);
    opacity: 1;
  }
}
@keyframes k-knots {
  to {
    transform: translateY(-80px);
  }
}
@keyframes k-nebula {
  from {
    transform: translate3d(-2%, -1%, 0);
  }
  to {
    transform: translate3d(2%, 1.5%, 0) scale(1.06);
  }
}
@keyframes k-beacon {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  to {
    box-shadow: 0 0 0 8px transparent;
  }
}
@keyframes k-bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}
@keyframes k-drip {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  70% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
@keyframes k-dawn {
  from {
    opacity: 0.55;
    transform: scaleX(0.92);
  }
  to {
    opacity: 1;
    transform: scaleX(1.05);
  }
}
@keyframes k-rise {
  from {
    opacity: 0;
    transform: translateY(0.55em);
  }
}
@keyframes k-lift {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@keyframes k-fade {
  from {
    opacity: 0;
  }
}
@keyframes k-emerge {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
}
@keyframes k-ghost {
  from {
    transform: translateX(8%);
  }
  to {
    transform: translateX(-8%);
  }
}
@keyframes k-ignite {
  from {
    opacity: 0;
    scale: 0.2;
  }
  60% {
    opacity: 1;
    scale: 1.25;
  }
}
@keyframes k-pass {
  to {
    opacity: 0;
    transform: scale(2.3);
  }
}
@keyframes k-approach {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes k-recede {
  to {
    opacity: 0;
    transform: scale(0.42);
  }
}
@keyframes k-settle {
  from {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes k-arrive-near {
  from {
    opacity: 0;
    transform: translateY(6vh) scale(0.96);
  }
}
@keyframes k-arrive-far {
  from {
    opacity: 0;
    transform: translateY(-4vh) scale(1.04);
  }
}
@keyframes k-flash {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}