/* nool.ae — the business comes to you. A road sign on asphalt: the brand yellow as the sign,
   ink as the road, the Driver app's chrome for the quiet text. Arabic first. No third parties. */

@font-face { font-family: "Rubik"; src: url("/fonts/Rubik_900Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("/fonts/ReadexPro_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url("/fonts/ReadexPro_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --yellow: #FAFD54;       /* tokens: accent-fill */
  --ink: #151515;          /* tokens: text-primary / on-accent */
  --asphalt: #1C1C1B;
  --chrome: #C9CCD1;       /* the Driver app's silver */
  --chrome-dim: #8E9197;
  --lane: #FAFD54;
  --display: "Rubik", "Segoe UI", system-ui, sans-serif;
  --body: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --radius: clamp(18px, 3vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(250, 253, 84, 0.07), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.2px) 0 0 / 5px 5px,
    var(--asphalt);
  color: var(--chrome);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* one language at a time — Arabic by default, English by toggle */
html[data-lang="ar"] .en, html[data-lang="en"] .ar { display: none !important; }
html[data-lang="en"] body { letter-spacing: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--yellow); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 10; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

/* ── top bar ── */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
}
.mark { font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--yellow); line-height: 1; display: inline-flex; align-items: baseline; gap: 8px; }
.mark-en { font-size: 14px; color: var(--chrome-dim); letter-spacing: 0.04em; }
.lang {
  font: 600 14px/1 var(--body); color: var(--ink); background: var(--chrome);
  border: 0; border-radius: 999px; padding: 11px 18px; min-height: 44px; cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.lang:hover { background: var(--yellow); }
.lang:active { transform: scale(0.97); }

/* ── the sign ── */
.sign-wrap { position: relative; margin: 8px var(--gutter) 0; }
/* the light under the sign — its own layer so it can beat: lub, dub, then fade to rest.
   Only opacity and transform animate, so it stays on the compositor (no repaint per frame). */
.glow {
  position: absolute; inset-inline: 1%; bottom: -78px; height: 230px; z-index: 0;
  background: radial-gradient(52% 50% at 50% 42%, rgba(250, 253, 84, 0.95), rgba(250, 253, 84, 0.35) 50%, transparent 74%);
  filter: blur(30px);
  opacity: 0.5;
  pointer-events: none;
  animation: heartbeat 2.8s ease-in-out 1.2s infinite;
  will-change: opacity, transform;
}
.sign {
  position: relative; z-index: 1;
  padding: clamp(28px, 6vw, 72px) clamp(22px, 5vw, 64px) calc(clamp(28px, 6vw, 64px) + 18px);
  background: var(--yellow);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 6px var(--yellow), inset 0 0 0 10px var(--ink);
  overflow: hidden;
  animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sign::after {                              /* the hazard strip along the foot of the sign */
  content: ""; position: absolute; inset-inline: 10px; bottom: 10px; height: 16px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 12px, var(--yellow) 12px 24px);
  border-radius: 0 0 calc(var(--radius) - 10px) calc(var(--radius) - 10px);
}
.eyebrow {
  display: inline-block; margin: 0 0 18px;
  font: 600 15px/1 var(--body);
  background: var(--ink); color: var(--yellow);
  padding: 9px 14px; border-radius: 999px;
}
h1 {
  margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3.1rem, 12vw, 9rem);
  line-height: 1.12;
  max-width: 12ch;
}
html[data-lang="en"] h1 { line-height: 0.98; letter-spacing: -0.03em; max-width: 11ch; }
h1 .w { display: inline-block; animation: word 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
h1 .w:nth-child(1) { animation-delay: 180ms; }
h1 .w:nth-child(2) { animation-delay: 300ms; }
h1 .w:nth-child(3) { animation-delay: 420ms; }
.lede {
  margin: clamp(18px, 3vw, 28px) 0 0;
  font-size: clamp(17px, 2.2vw, 22px); font-weight: 600; max-width: 34ch;
  animation: fade 600ms 600ms ease both;
}

/* ── the route ── */
.route { padding: clamp(36px, 7vw, 80px) var(--gutter) 0; }
/* fixed shape = uniform scaling: circles stay round and the stops land on the 1/6 · 1/2 · 5/6
   column centres of the labels below at every width */
.road { position: relative; width: 100%; aspect-ratio: 1000 / 120; }
.road svg { width: 100%; height: 100%; overflow: visible; display: block; }
html[dir="rtl"] .road svg { transform: scaleX(-1); }   /* the van drives the way Arabic reads */
.lane { fill: none; stroke: var(--lane); stroke-width: 4; stroke-dasharray: 18 14; stroke-linecap: round; opacity: 0.85; vector-effect: non-scaling-stroke; animation: fade 500ms 500ms ease both; }
.stop { fill: var(--asphalt); stroke: var(--yellow); stroke-width: 3; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.stop:nth-of-type(1) { animation-delay: 1.35s; }
.stop:nth-of-type(2) { animation-delay: 2.3s; }
.stop:nth-of-type(3) { animation-delay: 3.25s; }
.van { opacity: 0; transition: opacity 200ms ease; }
.van.go { opacity: 1; }
.van rect { fill: var(--chrome); }
.van .glass { fill: var(--asphalt); }
.van .wheel { fill: var(--ink); stroke: var(--chrome); stroke-width: 1.5; }

.stops {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
}
.stops li { display: flex; flex-direction: column; gap: 4px; animation: fade 500ms both; }
.stops li:nth-child(1) { animation-delay: 1.45s; }
.stops li:nth-child(2) { animation-delay: 2.4s; }
.stops li:nth-child(3) { animation-delay: 3.35s; }
.place { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 4.2vw, 40px); color: var(--yellow); line-height: 1.15; }
.who { font-size: clamp(13px, 1.7vw, 17px); color: var(--chrome); }

/* ── vendors ── */
.vendors {
  margin: clamp(56px, 10vw, 120px) var(--gutter) 0;
  padding-top: clamp(28px, 5vw, 48px);
  border-top: 1px solid rgba(201, 204, 209, 0.18);
  max-width: 760px;
}
.vendors h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 5vw, 48px); color: #FFFFFF; line-height: 1.15; }
.vendors p { margin: 0 0 24px; max-width: 46ch; }
.cta {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 12px 22px; border-radius: 14px;
  background: var(--yellow); color: var(--ink); text-decoration: none;
  font: 600 17px/1.2 var(--body);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(250, 253, 84, 0.6); }
.cta .addr { direction: ltr; unicode-bidi: isolate; font-weight: 400; opacity: 0.8; }

.foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: clamp(48px, 8vw, 96px) var(--gutter) 28px;
  color: var(--chrome-dim); font-size: 14px;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes word { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* lub (strong) · dub (softer) · a long fade back to rest — then again */
@keyframes heartbeat {
  0%   { opacity: 0.5;  transform: scale(1); }
  9%   { opacity: 1;    transform: scale(1.08); }
  18%  { opacity: 0.62; transform: scale(1.02); }
  27%  { opacity: 0.92; transform: scale(1.06); }
  55%  { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0.5;  transform: scale(1); }
}
@keyframes pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .glow { opacity: 0.7; }    /* still glows — it just does not beat */
}
@media (max-width: 520px) {
  .stops { gap: 6px; }
  .who { font-size: 12px; line-height: 1.4; }
}