/* AnasLabs hub: anaslabs.com, the page that lists every live app. Same night palette as the waiting page. */

:root {
  --bg: #070a1f;
  --bg-2: #0d1236;
  --ink: #dadef0;
  --ink-soft: #b9bfe8;
  --ink-faint: #8a91c4;
  --line: rgba(255, 255, 255, .09);
  --glass: rgba(14, 18, 52, .62);
  --accent: #7c5cff;
  --accent-2: #45c4ff;
  --warn: #ffcf6e;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Readex Pro", "Inter", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-ar-display: "Sora", "Almarai", "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b1f5e 0%, rgba(27, 31, 94, 0) 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body { font-family: var(--font-ar); }

[hidden] { display: none !important; }

a { color: inherit; }

/* Slow colour clouds behind everything */
.aurora { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.aurora span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .26;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: #5b3cff; top: -18vmax; left: -12vmax; }
.aurora span:nth-child(2) { background: #1fb6ff; bottom: -22vmax; right: -14vmax; animation-duration: 32s; }
.aurora span:nth-child(3) { background: #ff5c9a; top: 40%; left: 50%; width: 30vmax; height: 30vmax; opacity: .12; animation-duration: 38s; }
@keyframes drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }

/* Top bar */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 8px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; filter: drop-shadow(0 6px 18px rgba(124, 92, 255, .45)); }
.brand-name { font: 800 18px/1 var(--font-display); letter-spacing: -.01em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font: 600 14px/1 var(--font);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
html[lang="ar"] .pill { font-family: var(--font-ar); }
.lang-toggle { font-family: var(--font-ar); }
html[lang="ar"] .lang-toggle { font-family: var(--font); }
.pill:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.pill:focus-visible, .brand:focus-visible, .card:focus-visible, .notice-action:focus-visible, .footer-links a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* Page */
.page {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 24px 40px;
  padding-block: 36px 30px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
html[dir="rtl"] .eyebrow { padding: 7px 10px 7px 14px; letter-spacing: 0; font-size: 14px; }
.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52e3a4;
  box-shadow: 0 0 12px rgba(82, 227, 164, .8);
}
.hero-title {
  margin: 0;
  white-space: pre-line;
  font: 800 clamp(36px, 5.4vw, 64px)/1.04 var(--font-display);
  letter-spacing: -.028em;
  text-wrap: balance;
  /* Soft colours drift across the title all the time, and a short pale shine passes over it once a cycle.
     The base gradient repeats three times across its width and each cycle moves it by two repeats, so the loop has no seam.
     The gradients only paint inside the box, so the padding gives marks above and below the lines room */
  background-image:
    linear-gradient(105deg, transparent 40%, rgba(226, 229, 246, .92) 47%, rgba(226, 229, 246, .92) 53%, transparent 60%),
    linear-gradient(90deg, #c3b6ff 0%, #9fb4ff 8.333%, #84d2ff 16.667%, #93e9cf 25%, #c3b6ff 33.333%, #9fb4ff 41.667%, #84d2ff 50%, #93e9cf 58.333%, #c3b6ff 66.667%, #9fb4ff 75%, #84d2ff 83.333%, #93e9cf 91.667%, #c3b6ff 100%);
  background-size: 300% 100%, 300% 100%;
  background-position: 100% 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: .06em .12em;
  margin-block: -.06em -.12em;
  /* On arrival the title rises out of a blur while a soft wipe reveals it in reading order */
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation:
    title-rise 1s cubic-bezier(.2, .7, .2, 1) both,
    title-reveal 1.6s cubic-bezier(.45, 0, .2, 1) both,
    title-flow 8s linear 1.2s infinite;
}
html[dir="rtl"] .hero-title {
  background-image:
    linear-gradient(255deg, transparent 40%, rgba(226, 229, 246, .92) 47%, rgba(226, 229, 246, .92) 53%, transparent 60%),
    linear-gradient(270deg, #c3b6ff 0%, #9fb4ff 8.333%, #84d2ff 16.667%, #93e9cf 25%, #c3b6ff 33.333%, #9fb4ff 41.667%, #84d2ff 50%, #93e9cf 58.333%, #c3b6ff 66.667%, #9fb4ff 75%, #84d2ff 83.333%, #93e9cf 91.667%, #c3b6ff 100%);
  background-position: 0 0, 0 0;
  -webkit-mask-image: linear-gradient(270deg, #000 44%, transparent 56%);
  mask-image: linear-gradient(270deg, #000 44%, transparent 56%);
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation-name: title-rise, title-reveal-rtl, title-flow-rtl;
}
@keyframes title-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes title-reveal {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes title-reveal-rtl {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes title-flow {
  0% { background-position: 100% 0, 100% 0; }
  16% { background-position: 0 0, 84% 0; }
  100% { background-position: 0 0, 0 0; }
}
@keyframes title-flow-rtl {
  0% { background-position: 0 0, 0 0; }
  16% { background-position: 100% 0, 16% 0; }
  100% { background-position: 100% 0, 100% 0; }
}
html[lang="ar"] .hero-title {
  font-family: var(--font-ar-display);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  padding-block: .22em .1em;
  margin-block: -.22em -.1em;
}
.hero-sub {
  margin: 18px 0 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.hero-art { justify-self: center; width: 100%; max-width: 400px; }
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-art * { transform-box: fill-box; }
.hs { animation: twinkle 3.2s ease-in-out infinite; }
.hs2 { animation-duration: 2.6s; animation-delay: -.8s; }
.hs3 { animation-duration: 4.1s; animation-delay: -1.9s; }
.hs4 { animation-duration: 3.6s; animation-delay: -2.6s; }
.hs-big { transform-origin: center; animation-name: twinkle-big; }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes twinkle-big { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.hero-moon { animation: moon-glow 6s ease-in-out infinite; }
@keyframes moon-glow { 50% { opacity: .88; } }
.hero-robot { animation: bob 2.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.hero-thrust { transform-origin: 50% 0%; animation: thrust .35s ease-in-out infinite alternate; }
@keyframes thrust { from { transform: scaleY(.82); opacity: .7; } to { transform: scaleY(1.08); opacity: 1; } }
.hero-wave { transform-origin: 0% 100%; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-12deg); } }
.hero-antenna { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.hero-heart { transform-origin: center; animation: heart 1.4s ease-in-out infinite; }
@keyframes heart { 50% { transform: scale(1.25); } }

/* A wrong address: point to the closest app */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  max-width: 620px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 207, 110, .08);
  border: 1px solid rgba(255, 207, 110, .28);
}
.notice-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--warn); }
.notice-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.notice-text { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.55; }
.notice-text strong { color: #ffe3a3; }
.notice-text .host { font-weight: 600; color: #ffe3a3; overflow-wrap: anywhere; }
.notice-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(92deg, #ffd37a, #ffb36b);
  color: #1d1305;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.notice-action::after { content: "\2192"; }
html[dir="rtl"] .notice-action::after { content: "\2190"; }

/* The apps */
.apps { padding-block: 10px 64px; }
.apps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.apps-title { margin: 0; font: 700 22px/1.2 var(--font-display); letter-spacing: -.01em; }
html[lang="ar"] .apps-title { font-family: var(--font-ar-display); letter-spacing: 0; }
.apps-count { margin: 0; color: var(--ink-faint); font-size: 14px; font-variant-numeric: tabular-nums; }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.grid > li { display: flex; min-width: 0; }

.card {
  --hue: 250;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 22px 22px 18px;
  border-radius: 20px;
  text-decoration: none;
  background:
    radial-gradient(420px 160px at 0% 0%, hsla(var(--hue), 90%, 65%, .1), transparent 70%),
    var(--glass);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .8);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s;
}
html[dir="rtl"] .card {
  background:
    radial-gradient(420px 160px at 100% 0%, hsla(var(--hue), 90%, 65%, .1), transparent 70%),
    var(--glass);
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: hsla(var(--hue), 90%, 72%, .45);
  box-shadow: 0 26px 60px -26px hsla(var(--hue), 90%, 55%, .55);
}
.card.is-suggested { border-color: rgba(255, 207, 110, .55); box-shadow: 0 0 0 1px rgba(255, 207, 110, .25), 0 26px 60px -30px rgba(255, 190, 90, .5); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.app-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--hue), 82%, 62%), hsl(calc(var(--hue) + 34), 82%, 52%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -10px hsla(var(--hue), 90%, 55%, .8);
  filter: saturate(.75) brightness(.92);
  transition: filter .3s, transform .3s;
}
.app-icon svg { width: 26px; height: 26px; }
.card:hover .app-icon, .card:focus-visible .app-icon { filter: none; transform: scale(1.05) rotate(-3deg); }

/* Each app naps until someone points at it */
.zzz { display: flex; gap: 1px; color: var(--ink-faint); font: 700 13px/1 var(--font-display); transition: opacity .3s; }
.zzz .z1 { transform: translateY(6px); animation: nap 2.8s ease-in-out infinite; }
.zzz .z2 { font-size: 17px; animation: nap 2.8s ease-in-out infinite .4s; }
@keyframes nap { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.card:hover .zzz, .card:focus-visible .zzz { opacity: 0; }

.card-name { font: 700 21px/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
html[lang="ar"] .card-name { font-family: var(--font-ar-display); letter-spacing: 0; }
.card-category {
  color: hsl(var(--hue), 90%, 80%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[lang="ar"] .card-category { letter-spacing: 0; font-size: 13px; text-transform: none; }
.card-desc { flex: 1; margin: 4px 0 12px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-foot .host { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: 13px; }
.card-open { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink); font-weight: 700; font-size: 14px; }
.card-open::after { content: "\2197"; transition: transform .25s; }
html[dir="rtl"] .card-open::after { content: "\2196"; }
.card:hover .card-open::after { transform: translate(2px, -2px); }
html[dir="rtl"] .card:hover .card-open::after { transform: translate(-2px, -2px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.plain-list { margin: 0; padding-inline-start: 20px; line-height: 2; }

/* Footer */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 14px;
}
.footer-text { margin: 0; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--ink); }

/* Tablets and phones */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-block: 20px 24px; }
  .hero-art { order: -1; max-width: 230px; justify-self: start; }
  html[dir="rtl"] .hero-art { justify-self: end; }
}
@media (max-width: 560px) {
  .topbar { padding: 14px 16px 6px; }
  .brand-name { font-size: 16px; }
  .pill { padding: 9px 13px; font-size: 13px; }
  .page { padding: 0 16px; }
  .hero-art { max-width: 180px; }
  .hero-title { font-size: min(36px, 9.2vw); }
  .hero-sub { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .footer { padding: 20px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .hero-art *, .zzz span { animation: none !important; }
  .hero-title, html[dir="rtl"] .hero-title { animation: none; -webkit-mask-image: none; mask-image: none; }
  .card, .app-icon, .card-open::after { transition: none; }
}