/* Projects at the Lab — Open Call
   Palette tokens (--bg, --dark) are swapped at runtime by js/site.js (the poster colourways). */

/* Helvetica Neue LT Arabic carries both the Latin and Arabic glyphs, so the two scripts match. */
@font-face { font-family: "Helvetica Neue LT Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/hnlt-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Neue LT Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/hnlt-arabic-700.woff2") format("woff2"); }

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

:root {
  --bg: #748cb5;       /* poster ground (the final poster's colour) */
  --dark: #1b2730;     /* shadow tone (the poster photo's darkest slate) */
  --ink: #000000;
  --paper: #ffffff;

  /* Text roles: black primary, white secondary, as in the posters. */
  --fg: var(--ink);          /* primary text, rules, outlines */
  --fg2: var(--paper);       /* secondary text: English under Arabic, headings, notes */
  --fg-inv: var(--paper);    /* text on a surface filled with --fg (pressed toggles, hovered buttons) */
  --hair: rgba(0, 0, 0, .35);

  --gutter: clamp(1rem, 3.2vw, 3rem);
  --foot-h: 3.4rem;     /* the fixed footer band */
  --font: "Helvetica Neue LT Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.45;
  transition: background-color .6s var(--ease);
  overflow-x: hidden;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* ── Poster header ────────────────────────────────────── */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem var(--gutter);
  padding: var(--gutter) var(--gutter) 0;
  position: relative;
  z-index: 5;
}

.top__l, .top__r {
  display: flex; flex-direction: column;
  text-decoration: none;
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.top__l { align-items: flex-start; }
.top__r { align-items: flex-end; text-align: right; }
.top__l span:first-child, .top__r span:first-child { color: var(--fg); }
.top__l span:last-child,  .top__r span:last-child  { color: var(--fg2); }
/* Darat al Funun logo in place of the left lockup; sized to sit level with the two-line block opposite */
.top__logo { align-self: start; padding-top: .2em; }
.top__logo img { width: clamp(9rem, 24vw, 19rem); max-width: 100%; height: auto; }
.top [lang="ar"] { direction: rtl; unicode-bidi: isolate; }
.top__l [lang="ar"] { align-self: flex-start; }
.top__r [lang="ar"] { align-self: flex-end; }

.nav {
  display: flex; gap: clamp(.9rem, 2.2vw, 2.2rem);
  font-size: 1.05rem;
}
.nav a { text-decoration: none; display: flex; line-height: 1.2; }
.nav a small { font-size: 1.15rem; color: var(--fg); }   /* Arabic above, as in the corner headings */
.nav a span { color: var(--fg2); transition: color .25s var(--ease); }
.nav__label { display: flex; flex-direction: column; }

/* Desktop: a rail on the right edge — a thin line through one disc per page, as the rays run through the discs in the
   poster panels. Empty discs are outlined, hovering fills one, and the current page's disc is sliced half ink, half
   paper like the poster's circles. Labels sit to the left of their disc, Arabic above English. */
@media (min-width: 901px) {
  :root { --rail: 9.5rem; }
  .nav {
    position: fixed; z-index: 15;
    right: var(--gutter); top: 50%; translate: 0 -58%;
    flex-direction: column; align-items: flex-end; gap: 2.4rem;
  }
  .nav::before {
    content: ""; position: absolute; z-index: -1;
    right: calc(.5rem - .75px); top: -3.5rem; bottom: -3.5rem; width: 1.5px;
    background: linear-gradient(to bottom, transparent, var(--fg) 22%, var(--fg) 78%, transparent);
    opacity: .55;
  }
  .nav a { align-items: center; gap: .9rem; }
  .nav__label { align-items: flex-end; text-align: right; }
  .nav a::after {
    content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%;
    border: 1.5px solid var(--fg); background: var(--bg);
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .nav a:hover::after { background: var(--paper); transform: scale(1.15); }
  .nav a[aria-current="page"]::after { background: linear-gradient(135deg, var(--ink) 50%, var(--paper) 50%); transform: scale(1.3); }
  .nav a:hover span, .nav a[aria-current="page"] span { color: var(--paper); }

  .top__r { grid-column: 3; }   /* the menu has left the header's middle column */
}

/* Narrow screens: the menu runs across under the header */
@media (max-width: 900px) {
  .top { grid-template-columns: 1fr 1fr; }
  .nav { grid-column: 1 / -1; order: 3; justify-content: space-between; border-top: 1px solid var(--hair); padding-top: .8rem; }
  .nav a { padding-bottom: .3rem; border-bottom: 1.5px solid transparent; transition: border-color .25s var(--ease); }
  .nav__label { align-items: center; }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--fg); }
}

/* ── Footer ───────────────────────────────────────────────
   A band fixed to the bottom of the screen, in the ground colour. Its top edge feathers into the page, so text
   scrolling underneath dissolves into it the way the scene fades into the page colour at the screen's edges. */
body { padding-bottom: var(--foot-h); }
.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  height: var(--foot-h);
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  font-size: clamp(.95rem, 1.1vw, 1.1rem);
  line-height: 1.15;
  background: var(--bg);
  transition: background-color .6s var(--ease), opacity .8s var(--ease);
}
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.6rem;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.has-scene .foot { opacity: 0; }                  /* arrives with the page, once the room has rendered */
.has-scene.is-staged .foot { opacity: 1; }
/* The deadline, both languages on one line, running across the footer like a sign. Six identical copies: the track
   slides by exactly half its width (three copies) and starts again, so the loop has no seam. */
.ticker {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding-block: .15em;                 /* Arabic sits lower than Latin: keep its descenders inside the clip */
  contain: inline-size;                 /* the long track must never widen the page */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: flex; align-items: baseline; gap: 1.1em; padding-right: 1.1em; white-space: nowrap; line-height: 1.6; }
.ticker__item [lang="ar"] { color: var(--fg); unicode-bidi: isolate; }
.ticker__item > span:not([lang]):not(.ticker__sep) { color: var(--fg2); }
.ticker__sep { opacity: .6; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

.swatches { display: flex; gap: .55rem; align-items: center; font-size: .78rem; }
.swatches button {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1.5px solid var(--fg); cursor: pointer;
  background: var(--sw); padding: 0;
  transition: transform .2s var(--ease);
}
.swatches button:hover { transform: scale(1.2); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--fg); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .9rem;
  font: inherit; font-size: 1.05rem; line-height: 1;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--fg);
  padding: 1rem 1.5rem; cursor: pointer; text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; }
/* a two-language label, Arabic above English */
.btn__bi { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; line-height: 1.15; white-space: nowrap; }

/* ── Landing ──────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter);
}

.hero__copy {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.1rem, 3vh, 1.8rem);
  width: 100%;
}
.hero__title { width: min(86%, 640px); height: auto; margin-inline: auto; }
/* the title's shadow from the scene's sun (offset + blur set by lab-scene.js; no shadow without the scene) */
.hero__title { filter: drop-shadow(var(--title-shadow) color-mix(in srgb, var(--dark) 42%, transparent)); will-change: filter; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

@keyframes rise {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ── Sections ──────────────────────────────────────────── */
.page { flex: 1; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) 0; }

.page__head { margin-bottom: clamp(2rem, 5vw, 4rem); }
.page__head :is(h1, h2) {
  /* every section title: Arabic stacked above English, right-aligned */
  display: flex; flex-direction: column-reverse; align-items: flex-end; text-align: right; gap: .1em;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.03em;
}
.page__head :is(h1, h2) span:first-child { color: var(--fg2); }
.page__head :is(h1, h2) [lang="ar"] { color: var(--fg); direction: rtl; letter-spacing: 0; }
/* The Call uses the poster's title artwork in place of the text pair */
/* Side titles (Apply, The Lab): the content starts at the top on the left, level with the titles, which stack on the
   right and stay put while the content scrolls. */
.page--side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.page--side .page__head { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: 1.5rem; }
.page--side .page__body { grid-column: 1; grid-row: 1; }
@media (max-width: 800px) {
  .page--side { grid-template-columns: 1fr; }
  .page--side .page__head { grid-column: 1; position: static; margin-bottom: 1.5rem; }
  .page--side .page__body { grid-row: auto; }
}

/* ── Two languages ────────────────────────────────────────
   Everywhere both languages show together, Arabic above English: Arabic in black, English in white for titles and
   labels (.bi, .sub), both black for running text (.bilingual). Titles and labels share the column's left edge;
   Arabic paragraphs are justified, so they fill the same column edge to edge and still end their lines on the right. */
.bi { display: flex; flex-direction: column; }
.bi [lang="ar"] { text-align: left; }
.sub { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1rem; }
.sub [lang="ar"] { color: var(--fg); letter-spacing: 0; }
.sub span:not([lang]) { color: var(--fg2); }

.bilingual { display: grid; gap: 2.4rem; max-width: 46rem; }   /* the Arabic text, then the English */
.bilingual .prose[dir="rtl"] { text-align: justify; }
.prose p { font-size: clamp(1.02rem, 1.4vw, 1.2rem); margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }

/* ── The Call: an anchor menu beside the text ─────────── */
.cols { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }

/* one entry per part, numbered like the Apply steps */
.toc { position: sticky; top: 1.5rem; align-self: start; }
.toc ol { list-style: none; border-top: 1.5px solid var(--fg); }
.toc li { border-bottom: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; padding: .75rem 0; text-decoration: none; line-height: 1.25; }
.toc__n { opacity: .6; font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: .15rem; }
.toc [lang="ar"] { font-size: 1.05rem; transition: color .25s var(--ease); }
.toc .bi > span:not([lang]) { font-size: .95rem; color: var(--fg2); transition: color .25s var(--ease); }
/* hover swaps the two languages' colours: Arabic turns white, English black */
.toc a:hover [lang="ar"] { color: var(--fg2); }
.toc a:hover .bi > span:not([lang]) { color: var(--fg); }
@media (max-width: 800px) { .toc { position: static; } }

.call { max-width: 46rem; }
.call__part { scroll-margin-top: 1.5rem; }
.call__part + .call__part { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.call .sub { margin-bottom: 1.25rem; }

/* the deadline: label and date, each Arabic above English */
.dates { border-top: 1.5px solid var(--fg); margin-top: 1.4rem; }
.dates > div {
  display: flex; justify-content: space-between; align-items: start; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--hair);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.3;
}
.dates dd { align-items: flex-end; text-align: right; }
.dates dd [lang="ar"] { text-align: right; }
.dates .bi > span:not([lang]) { color: var(--fg2); }
.call__cta { margin-top: 2rem; }

/* ── Apply: how to apply + FAQ ─────────────────────────── */
.apply-info { max-width: 46rem; }

.steps { list-style: none; border-top: 1.5px solid var(--fg); margin-bottom: clamp(3rem, 8vh, 5rem); }
.steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--hair); }
.steps__n { font-variant-numeric: tabular-nums; opacity: .6; padding-top: .2rem; }
.steps h4 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.25; font-weight: 700; }
.steps h4:not([lang]) { color: var(--fg2); }
.steps p { font-size: clamp(1rem, 1.3vw, 1.1rem); margin-bottom: .4rem; }
.steps .steps__cta { margin-top: .9rem; }

.faq { border-top: 1.5px solid var(--fg); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.1rem 2.6rem 1.1rem 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span:not([lang]) { color: var(--fg2); }
/* a plus that turns into a minus — drawn, the font has no reliable glyph for it */
.faq__item summary::before, .faq__item summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.55rem; width: 1rem; height: 1.5px; background: var(--fg);
  transition: transform .3s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover span:not([lang]) { color: var(--paper); }
.faq__a { padding: 0 2.6rem 1.2rem 0; }
.faq__a p { font-size: clamp(1rem, 1.3vw, 1.1rem); margin-bottom: .4rem; }

/* Arrow drawn as a mask — the font has no → / ← glyphs */
.arrow {
  display: inline-block; width: 1.15rem; height: .85rem; font-size: 0; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M0 8h19M12 1l7 7-7 7' fill='none' stroke='black' stroke-width='1.8'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M0 8h19M12 1l7 7-7 7' fill='none' stroke='black' stroke-width='1.8'/></svg>") center / contain no-repeat;
}
[dir="rtl"] .arrow { transform: scaleX(-1); }
.btn .arrow { transition: translate .25s var(--ease); }
.btn:hover .arrow { translate: 4px 0; }
[dir="rtl"] .btn:hover .arrow { translate: -4px 0; }

/* ── Lab scene (every page) ───────────────────────────── */
.has-scene { position: relative; }
#scene {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
#scene.is-ready { opacity: 1; }
.has-scene .top, .has-scene .hero, .has-scene .page { position: relative; z-index: 2; }
/* the header carries the fixed menu rail, so it must sit above the page content (which runs underneath the rail) */
.has-scene .top { z-index: 10; }

/* A page opens on the room alone; its content rises in a moment later (the room dims back as it does).
   The animation waits, paused, until the room has rendered (lab-scene.js adds .is-staged) — or until site.js's
   fallback timer adds it, so content can never stay hidden if the 3D fails to load. */
.has-scene .reveal {
  opacity: 0;
  animation: rise 1s var(--ease) var(--reveal-delay, .7s) forwards;
  animation-play-state: paused;
}
.has-scene.is-staged .reveal { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .has-scene .reveal { animation: none; opacity: 1; }
}

/* ── Quick access: top / bottom / home (The Call, Apply) ─── */
.quick {
  position: fixed; right: var(--gutter); bottom: calc(var(--foot-h) + 1rem); z-index: 20;
  display: flex; flex-direction: column; gap: .5rem;
  opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
.is-staged .quick { opacity: 1; translate: 0 0; pointer-events: auto; }
.quick a {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.quick a:hover { background: var(--ink); color: var(--paper); transform: scale(1.06); }
.qi { width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--qi) center / contain no-repeat; mask: var(--qi) center / contain no-repeat; }
.qi--up   { --qi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15V2M2.5 7.5 8 2l5.5 5.5' fill='none' stroke='black' stroke-width='1.8'/></svg>"); }
.qi--down { --qi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1v13M2.5 8.5 8 14l5.5-5.5' fill='none' stroke='black' stroke-width='1.8'/></svg>"); }
.qi--home { --qi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.5 7.5 8 1.8l6.5 5.7M3.5 6v8.2h3.4V10h2.2v4.2h3.4V6' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>"); }
@media (prefers-reduced-motion: reduce) { .quick { transition: none; } }
@media (max-width: 900px) {
  .quick { bottom: calc(var(--foot-h) + .75rem); }
  .quick a:not([href="#top"]) { display: none; }
  .quick a { width: 2.25rem; height: 2.25rem; }
}

/* Keep content clear of the right-hand menu rail (desktop). Last in the file so it wins over the page paddings above. */
@media (min-width: 901px) {
  .page { padding-right: calc(var(--gutter) + var(--rail)); }
  .hero { padding-inline: calc(var(--gutter) + var(--rail)); }
}

/* ── One-page site ───────────────────────────────────────
   Home, The Call, The Lab and Apply as sections of one scroll; the Lab scene travels between their shots. */
.one-page .top { position: absolute; top: 0; left: 0; right: 0; }       /* overlays the home screen */
.sec--home { min-height: 100vh; min-height: 100svh; display: flex; }   /* the hero centred on the whole screen */
.sec--home .hero { flex: 1; }
.one-page .sec.page {
  min-height: 100vh; min-height: 100svh;
  padding-top: clamp(5rem, 14vh, 9rem); padding-bottom: clamp(3rem, 10vh, 6rem);
}
/* each section's content rises in as it arrives */
.one-page .sec.page > * { opacity: 0; translate: 0 28px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.one-page .sec.page.is-in > * { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .one-page .sec.page > * { opacity: 1; translate: none; transition: none; }
}