/* African Footprint at Shed Afrique: the theatre.
   A fixed WebGL stage sits behind the page. Each act holds while its words sit in a clean
   column on the left and the stage plays to the right, then the camera swoops to the next act.
   Without WebGL or with reduced motion, every act shows its own picture instead. */

:root {
  --night: #0B0807;
  --night-2: #17100C;
  --brown: #2A1A10;
  --ember: #F2A03D;
  --sa-accent: #F2A03D;
  --ember-2: #E0622B;
  --hide: #EDE3CF;
  --hide-2: rgba(237, 227, 207, .8);
  --ash: #A39B86;
  --ochre: #B5652A;
  --line: rgba(237, 227, 207, .16);
  --display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --body: "Onest", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --bar-h: 72px;
  --rope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 1 L7 13 L14 1 L21 13 L28 1' fill='none' stroke='%23F2A03D' stroke-width='1.6' stroke-linejoin='round' opacity='.85'/%3E%3Cpath d='M0 13 L7 1 L14 13 L21 1 L28 13' fill='none' stroke='%23EDE3CF' stroke-width='1' opacity='.35'/%3E%3C/svg%3E");
  --hem: repeating-linear-gradient(90deg, var(--ember) 0 18px, #0B0807 18px 21px, var(--hide) 21px 27px, #0B0807 27px 30px, var(--ochre) 30px 46px, #0B0807 46px 49px, var(--ember-2) 49px 58px, #0B0807 58px 61px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; -webkit-text-size-adjust: 100%; }
html:not(.has-3d) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.has-3d) { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--night); color: var(--hide);
  font: 400 17px/1.6 var(--body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ember); color: var(--night); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the title card: the first thing, alone, before the scene ---------- */
.titlecard { margin: 0; text-align: center; font: 400 clamp(64px, 10vw, 168px)/.9 var(--display); letter-spacing: .02em; color: var(--hide); }
.titlecard span { display: block; }
.titlecard em { display: block; font-style: normal; color: var(--ember); font-size: .62em; letter-spacing: .34em; margin-top: .14em; padding-left: .34em; }
html:not(.has-3d) .titlecard { position: relative; z-index: 12; padding: calc(var(--bar-h) + 56px) 20px 40px; background: var(--night); }
.has-3d .titlecard {
  position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; pointer-events: none; opacity: 0;
  text-shadow: 0 0 40px rgba(242,160,61,.25);
}
.has-3d .is-ready .titlecard { animation: title-in 1.7s cubic-bezier(.2,.7,.2,1) .25s both, title-out 1s ease 3.3s forwards; }
.has-3d .titlecard.is-gone { animation: none; opacity: 0; transition: opacity .4s ease; }
@keyframes title-in { from { opacity: 0; letter-spacing: .32em; filter: blur(14px); transform: scale(1.06); } to { opacity: 1; letter-spacing: .02em; filter: blur(0); transform: none; } }
@keyframes title-out { to { opacity: 0; filter: blur(8px); transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .has-3d .is-ready .titlecard { animation: none; opacity: 0; } }

.scroll-cue { display: none; }
.has-3d .scroll-cue {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 20; margin: 0; display: grid; justify-items: center; gap: 12px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--hide-2); opacity: 0; transition: opacity .8s ease;
}
.has-3d .scroll-cue::after { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--ember), transparent); animation: cue 2s ease-in-out infinite; }
.has-3d body.scene-alone .scroll-cue { opacity: 1; }

/* Lenis owns smooth scrolling when the stage runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- the stage, the grain, the curtain ---------- */
#theatre { position: fixed; inset: 0; width: 100%; height: 100%; display: none; z-index: 0; }
.has-3d #theatre { display: block; }
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

.curtain { display: none; }
.has-3d .curtain {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: var(--night); transition: opacity 1.1s ease, visibility 1.1s;
}
.curtain img { width: 60px; height: auto; filter: drop-shadow(0 0 30px rgba(242,160,61,.35)); animation: breathe 2.4s ease-in-out infinite; }
.curtain__bar { width: 140px; height: 2px; background: var(--line); overflow: hidden; }
.curtain__bar i { display: block; height: 100%; width: var(--p, 8%); background: var(--ember); transition: width .4s ease; }
.is-ready .curtain { opacity: 0; visibility: hidden; }
@keyframes breathe { 50% { transform: scale(1.05); filter: drop-shadow(0 0 44px rgba(242,160,61,.55)); } }

/* ---------- the bar: unmistakably the menu ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 3vw, 36px);
  background: rgba(11, 8, 7, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--hem); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand__mark { width: 22px; height: auto; }
.brand__word { width: 150px; height: auto; }
.bar__nav { display: flex; gap: 6px; margin-left: auto; }
.bar__nav a {
  text-decoration: none; font: 500 15px/1 var(--body); color: var(--hide); padding: 11px 14px; border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.bar__nav a:hover { background: rgba(242,160,61,.14); color: var(--ember); }
.bar__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--hide); border: 0; color: var(--night);
  font: 600 14px/1 var(--body); padding: 12px 16px; border-radius: 999px; cursor: pointer;
}
.menu-btn i { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; transition: transform .3s; }
.menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
.menu-btn[aria-expanded="true"] i { transform: scaleY(.3); }

/* every commercial action is a ticket stub */
.ticket {
  --notch: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
           radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ember); color: var(--night); text-decoration: none; border: 0; cursor: pointer;
  font: 600 14px/1 var(--body); padding: 14px 24px; white-space: nowrap;
  -webkit-mask: var(--notch); mask: var(--notch); transition: background .25s ease;
}
.ticket:hover { background: #FFB75A; }
.ticket--lg { padding: 17px 32px; font-size: 15px; }
.link {
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--hide); text-decoration: none;
  font: 500 15px/1.3 var(--body); border-bottom: 1px solid rgba(242,160,61,.6);
}
.link:hover { color: var(--ember); }

/* ---------- the menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 55; overflow-y: auto; padding: calc(var(--bar-h) + 48px) clamp(16px, 4vw, 64px) 48px;
  background: radial-gradient(1200px 600px at 80% 0%, rgba(120,62,24,.4), transparent 60%), rgba(11,8,7,.98);
}
.menu[hidden] { display: none; }
.menu__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.menu__col { display: grid; align-content: start; gap: 12px; }
.menu__col h2 { margin: 0 0 8px; font: 400 46px/0.9 var(--display); letter-spacing: .02em; color: var(--ember); }
.menu__col a:not(.link) { text-decoration: none; font: 500 19px/1.3 var(--body); color: var(--hide); }
.menu__col a:not(.link):hover { color: var(--ember); }
.menu__col p { margin: 0; color: var(--hide-2); font-size: 15px; }
.menu__col .link { justify-self: start; }
body.menu-open { overflow: hidden; }

/* ---------- the programme: where you are in the story ---------- */
.programme { position: fixed; right: clamp(10px, 1.6vw, 22px); top: 50%; transform: translateY(-50%); z-index: 30; }
.programme ol {
  list-style: none; margin: 0; padding: 10px 11px; display: grid; gap: 1px;
  background: rgba(11,8,7,.5); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.programme a { position: relative; display: block; text-decoration: none; padding: 5px 0; text-align: right; }
.programme span { display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hide-2); transition: color .25s; }
.programme a:hover span { color: var(--hide); }
.programme b {
  position: absolute; right: calc(100% + 18px); top: 50%; transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  font: 500 12.5px/1 var(--body); white-space: nowrap; color: var(--hide); background: rgba(11,8,7,.85); padding: 6px 10px; border-radius: 999px;
  transition: opacity .3s, transform .3s;
}
.programme a[aria-current="true"] span { color: var(--ember); }
.programme a[aria-current="true"] b, .programme a:hover b, .programme a:focus-visible b { opacity: 1; transform: translate(0, -50%); }
.programme a[aria-current="true"] b { color: var(--ember); }

/* ---------- the drone film: pinned, played by scroll, fades away to the theatre ---------- */
.film { position: relative; height: 470vh; }
.film__canvas, .film__caption { position: fixed; z-index: 15; pointer-events: none; opacity: var(--film-o, 1); transition: opacity .9s ease; }
.has-3d body:not(.title-done) .film__canvas, .has-3d body:not(.title-done) .film__caption { opacity: 0; }
.film__canvas { inset: 0; width: 100%; height: 100%; background: var(--night); }
.film__glitter { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 16; pointer-events: none; opacity: var(--film-o, 1); transition: opacity .9s ease; }
.has-3d body:not(.title-done) .film__glitter { opacity: 0; }
.film__caption { left: clamp(20px, 4vw, 56px); bottom: 24px; margin: 0; font: 400 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hide-2); }
body:not(.film-ready) .film__canvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .film { height: 100vh; } }

/* ---------- the acts ----------
   Each act holds for the first half of its scroll, then the camera swoops to the next.
   Its words sit in one clean column on the left while the stage plays to the right. */
#performance { position: relative; z-index: 10; }
.act { position: relative; }
.act__poster { display: none; }
.has-3d .act:not(.act--final) { height: 118vh; }
.has-3d .act--long { height: 200vh; }
.act__stick { position: relative; min-height: 100vh; display: grid; align-items: center; padding: calc(var(--bar-h) + 30px) clamp(20px, 6vw, 96px) 60px; }
.has-3d .act__stick { position: fixed; inset: 0; height: 100vh; min-height: 0; pointer-events: none; } /* surtitles: they fade, they never slide, so no edge ever crosses the screen */
.has-3d .act__stick::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(90deg, rgba(11,8,7,0.950) 0.0%, rgba(11,8,7,0.934) 4.9%, rgba(11,8,7,0.887) 9.7%, rgba(11,8,7,0.813) 14.6%, rgba(11,8,7,0.717) 19.4%, rgba(11,8,7,0.606) 24.3%, rgba(11,8,7,0.489) 29.1%, rgba(11,8,7,0.373) 34.0%, rgba(11,8,7,0.265) 38.9%, rgba(11,8,7,0.173) 43.7%, rgba(11,8,7,0.100) 48.6%, rgba(11,8,7,0.048) 53.4%, rgba(11,8,7,0.016) 58.3%, rgba(11,8,7,0.003) 63.1%, rgba(11,8,7,0.000) 68.0%);
}
.has-3d .act.is-live .act__stick::before { opacity: 1; }
.act__copy { position: relative; max-width: 520px; }
.has-3d .act__copy { opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s; }
.has-3d .act.is-live .act__copy { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }

.act h1, .act .hero-line {
  margin: 0 0 24px; max-width: 13ch; font: 400 clamp(52px, 6.2vw, 100px)/.9 var(--display); letter-spacing: .01em; color: var(--hide); text-wrap: balance;
}
.act h2:not(.hero-line) { margin: 0 0 18px; font: 400 clamp(46px, 5.2vw, 84px)/.9 var(--display); letter-spacing: .01em; color: var(--hide); text-wrap: balance; }
.act h1::after, .act h2::after { content: ""; display: block; height: 12px; width: min(300px, 70%); margin-top: 16px; background: var(--rope) repeat-x left center / 24px 12px; }
.act p { margin: 0 0 12px; color: var(--hide-2); font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; max-width: 44ch; }
.act .lede { color: var(--hide); font-size: clamp(17px, 1.4vw, 20px); }
.act .caption { font: 400 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); margin-top: 18px; }
.act .names { font: 500 11.5px/2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); margin-top: 14px; }
.act .names span { color: var(--ash); }
.cue { margin: 30px 0 0 !important; font: 500 10.5px/1 var(--mono) !important; letter-spacing: .24em; text-transform: uppercase; color: var(--ash) !important; display: flex; align-items: center; gap: 12px; }
.cue::before { content: ""; width: 1px; height: 30px; background: linear-gradient(var(--ember), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px); opacity: .5; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }

.facts { display: flex; flex-wrap: wrap; margin: 24px 0 0; padding-top: 22px; position: relative; }
.facts::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 0; }
.facts div { padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; margin-right: 0; }
.facts dt { font: 400 clamp(34px, 3.2vw, 50px)/1 var(--display); color: var(--ember); letter-spacing: .01em; }
.facts dd { margin: 4px 0 0; font-size: 13px; color: var(--hide-2); }

/* ---------- contact ---------- */
.act--final .contact {
  position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  max-width: 1180px; margin: 0 auto; padding: calc(var(--bar-h) + 48px) clamp(20px, 4vw, 40px) 80px;
}
.contact__intro h2 { margin: 0 0 18px; font: 400 clamp(56px, 6.6vw, 104px)/.9 var(--display); color: var(--hide); }
.contact__intro p { margin: 0; color: var(--hide-2); font-size: 18px; max-width: 40ch; }
.contact__intro .actions { justify-content: flex-start; }
.register {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: clamp(22px, 3vw, 36px);
  background: rgba(23,16,12,.95); border: 1px solid var(--line);
}
.register::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--hem); }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(11,8,7,.7); color: var(--hide); border: 1px solid var(--line); border-radius: 0;
  font: 400 16px/1.4 var(--body); padding: 13px 14px; appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ember) 50%), linear-gradient(135deg, var(--ember) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); }
.register__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.register__status { margin: 0; font-size: 14px; color: var(--hide-2); }
.register__status.is-err { color: #FFB38A; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 10; background: #080605; padding: 0 clamp(20px, 5vw, 80px) 36px; }
.foot__hem { height: 4px; background: var(--hem); margin: 0 calc(-1 * clamp(20px, 5vw, 80px)); }
.foot__grid { max-width: 1280px; margin: 0 auto; padding: 56px 0 40px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; }
.foot__brand img { width: 190px; height: auto; margin-bottom: 14px; }
.foot__brand p { margin: 0; color: var(--hide-2); font-size: 14px; max-width: 34ch; }
.foot__col { display: grid; align-content: start; gap: 10px; }
.foot__col h2 { margin: 0 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.foot__col a { text-decoration: none; color: var(--hide-2); font-size: 14.5px; }
.foot__col a:hover { color: var(--hide); }
.concept { max-width: 1280px; margin: 0 auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ash); }
.concept a { color: var(--hide-2); }

/* ---------- without WebGL (or with reduced motion): each view is a picture ---------- */
html:not(.has-3d) .act:not(.act--final) { min-height: 100vh; overflow: hidden; }
html:not(.has-3d) .act__poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:not(.has-3d) .act:not(.act--final)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,8,7,.95), rgba(11,8,7,.55) 50%, rgba(11,8,7,.15)); pointer-events: none; }
html:not(.has-3d) .act__stick { z-index: 2; }
html:not(.has-3d) .programme { display: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
  .menu__inner { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .programme { display: none; }
  .act--final .contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --bar-h: 62px; }
  .bar { gap: 10px; }
  .brand__word { width: 112px; }
  .bar__cta .ticket { padding: 11px 14px; font-size: 13px; }
  .menu-btn span { display: none; }
  .menu-btn { padding: 12px; }
  .menu__inner { grid-template-columns: 1fr; gap: 30px; }
  .has-3d .act__stick::before { background: linear-gradient(to top, rgba(11,8,7,0.960) 0.0%, rgba(11,8,7,0.944) 5.6%, rgba(11,8,7,0.896) 11.1%, rgba(11,8,7,0.821) 16.7%, rgba(11,8,7,0.724) 22.3%, rgba(11,8,7,0.613) 27.9%, rgba(11,8,7,0.494) 33.4%, rgba(11,8,7,0.377) 39.0%, rgba(11,8,7,0.268) 44.6%, rgba(11,8,7,0.175) 50.1%, rgba(11,8,7,0.101) 55.7%, rgba(11,8,7,0.048) 61.3%, rgba(11,8,7,0.017) 66.9%, rgba(11,8,7,0.003) 72.4%, rgba(11,8,7,0.000) 78.0%); }
  .act__stick { align-items: end; padding-bottom: 40px; }
  .facts div { padding: 0 14px; }
  .register { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}