:root {
  color-scheme: light;
  --bg: #ffffff;
  --page: #eeede9; /* soft warm light gray behind everything */
  --ink: #222222;
  --muted: #5c5c5c;
  --line: #222222;
  --radius: 14px;
  --t0: 0s; /* when the page entrance starts (intro variants raise this) */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
}

.card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: min(38vw, 140px, 21dvh);
  aspect-ratio: 580 / 950;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* hides the JPG's off-white background */
  animation: logo-in .9s cubic-bezier(.2,.7,.2,1) var(--t0) backwards;
}

.name {
  margin: 18px 0 22px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  animation: fade-in .8s ease calc(var(--t0) + .2s) backwards;
}

.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  background-image: linear-gradient(var(--bg), var(--bg));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-size .4s cubic-bezier(.2,.7,.2,1), color .4s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
  animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards;
}

/* staggered entrance */
.btn:nth-child(1) { animation-delay: calc(var(--t0) + .45s); }
.btn:nth-child(2) { animation-delay: calc(var(--t0) + .6s); }
.btn:nth-child(3) { animation-delay: calc(var(--t0) + .75s); }
.btn:nth-child(4) { animation-delay: calc(var(--t0) + .9s); }

/* one-time light sheen after the buttons appear */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: sheen 1.1s ease calc(var(--t0) + 1.4s) 1 backwards;
}
.btn:nth-child(2)::after { animation-delay: calc(var(--t0) + 1.55s); }
.btn:nth-child(3)::after { animation-delay: calc(var(--t0) + 1.7s); }
.btn:nth-child(4)::after { animation-delay: calc(var(--t0) + 1.85s); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sheen {
  from { left: -40%; }
  to   { left: 130%; }
}
@keyframes logo-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.icon { width: 24px; height: 24px; flex: none; transition: transform .25s ease; }
.label { flex: 1; }
.chev { width: 20px; height: 20px; flex: none; transition: transform .15s ease; }

@media (hover: hover) {
  .btn:hover { background-size: 100% 100%; color: var(--ink); }
  .btn:hover .chev { transform: translateX(5px); }
  .btn:hover .icon { transform: scale(1.1); }
}
.btn:active { transform: scale(0.98); }

.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.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;
}

/* an element with the "hidden" attribute must stay hidden even if a class sets display */
[hidden] { display: none !important; }

/* ---------- animated soft background ---------- */
/* soft gray light that slowly drifts across the white page */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 22% 28%, rgba(34, 34, 34, .11), transparent 70%),
    radial-gradient(38% 32% at 80% 72%, rgba(34, 34, 34, .09), transparent 70%),
    radial-gradient(30% 28% at 75% 18%, rgba(34, 34, 34, .07), transparent 70%),
    radial-gradient(34% 30% at 18% 82%, rgba(34, 34, 34, .07), transparent 70%);
  will-change: transform;
  animation: fade-in 1.4s ease var(--t0) backwards, bg-drift 24s ease-in-out infinite alternate;
}

/* a grid of dots that drifts slowly and gently breathes */
html::before {
  content: "";
  position: fixed;
  inset: -44px;               /* a little larger than the screen so the drift never shows an edge */
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(34, 34, 34, .24) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 25%, transparent 85%);
  will-change: transform, opacity;
  animation: dots-drift 9s linear infinite, dots-breathe 5s ease-in-out infinite alternate;
}
@keyframes dots-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(22px, 22px, 0); }   /* exactly one dot spacing, so the loop is seamless */
}
@keyframes dots-breathe {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* a faint beam of light that passes across now and then */
body::after {
  content: "";
  position: fixed;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .8) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  will-change: transform;
  animation: bg-beam 12s ease-in-out calc(var(--t0) + 1.5s) infinite;
}

@keyframes bg-drift {
  from { transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.12); }
}
@keyframes bg-beam {
  0%       { transform: translateX(-130%) skewX(-18deg); }
  45%, 100% { transform: translateX(340%) skewX(-18deg); }
}

body { padding-top: 56px; }

/* ---------- language toggle ---------- */
.lang-toggle {
  position: fixed;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  min-height: 30px;
  padding: 0 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: 600 .72rem/1 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
  animation: fade-in .8s ease var(--t0) backwards;
}
.lang-toggle:active { transform: scale(.96); }
.lang-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .lang-toggle:hover { background: var(--ink); color: #fff; }
}

/* ---------- main button + secondary tiles ---------- */
.btn-main { min-height: 62px; font-size: 1.1rem; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 74px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
  animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards;
}
.tile-wide { grid-column: 1 / -1; flex-direction: row; min-height: 54px; gap: 10px; }
.tile:nth-child(1) { animation-delay: calc(var(--t0) + .65s); }
.tile:nth-child(2) { animation-delay: calc(var(--t0) + .75s); }
.tile:nth-child(3) { animation-delay: calc(var(--t0) + .85s); }
.tile:nth-child(4) { animation-delay: calc(var(--t0) + .95s); }
.tile:nth-child(5) { animation-delay: calc(var(--t0) + 1.05s); }
.tile svg { width: 24px; height: 24px; flex: none; }
.tile:active { transform: scale(.97); }
.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .tile:hover { background: var(--ink); color: #fff; }
}

/* ---------- tap ripple ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(128, 128, 128, .38);
  pointer-events: none;
  transform: scale(0);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- Arabic / right-to-left ---------- */
[dir="rtl"] .chev { transform: scaleX(-1); }
@media (hover: hover) {
  [dir="rtl"] .btn:hover .chev { transform: scaleX(-1) translateX(5px); }
}
/* letter spacing breaks Arabic letters apart, so switch it off for Arabic text */
html[lang="ar"] .name { letter-spacing: 0; font-size: 1.2rem; }
html[lang="ar"] .label,
html[lang="ar"] .tile,
html[lang="ar"] .lang-toggle { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .chev, .icon, .logo img, .name,
  .tile, .lang-toggle, body::before { animation: none; transition: none; }
  body::after { display: none; }
  html::before { animation: none; }
  .btn::after { display: none; }
  .ripple { display: none; }
}