/* AUDA-NEPAD RDC — landing page
   We keep the dark, photo-led treatment and lift the craft: a clearer type scale,
   scrims tuned for legibility, and the official logo shown in its real colours. */

:root{
  --ink:#06110c;
  --gold:#D8A63C;
  --gold-deep:#C79328;
  --green:#8CC63F;
  --paper:#ffffff;

  /* We anchor the crop high enough that the seated figure stays in frame. */
  --focal-y:48%;
  --pad-x:clamp(20px,5vw,76px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:#fff;
  font-family:Poppins,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  padding:clamp(96px,14vh,150px) var(--pad-x) clamp(12px,1.9vh,24px);
}

.hero-media,.hero-veil,.hero-grain{position:absolute;inset:0;pointer-events:none}

.hero-media{
  z-index:0;
  background-position:50% var(--focal-y);
  background-size:cover;
  background-repeat:no-repeat;
  /* We serve WebP where supported and fall back to JPEG elsewhere. */
  background-image:url("assets/hero-v2.jpg");
  background-image:image-set(url("assets/hero-v2.webp") type("image/webp"),url("assets/hero-v2.jpg") type("image/jpeg"));
  /* A gentler drift than before, so the crop never clips the head on wide screens. */
  animation:drift 32s ease-in-out infinite alternate;
  will-change:transform;
}

/* Two scrims: one to seat the masthead, one to carry the text block. */
.hero-veil{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(3,10,7,.88) 0%,rgba(3,10,7,.55) 12%,rgba(3,10,7,.18) 22%,rgba(3,10,7,0) 32%),
    radial-gradient(115% 54% at 50% 112%,rgba(3,10,7,.56) 0%,rgba(3,10,7,0) 68%),
    linear-gradient(180deg,rgba(3,10,7,0) 52%,rgba(3,10,7,.18) 70%,rgba(3,10,7,.60) 88%,rgba(3,10,7,.90) 100%);
}

.hero-grain{
  z-index:2;
  opacity:.085;
  mix-blend-mode:overlay;
  inset:-8%;
  animation:grain 9s steps(2,end) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- Masthead ---------- */

.masthead{
  position:absolute;
  top:0;left:0;right:0;
  z-index:4;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:clamp(14px,2.2vh,24px) var(--pad-x) 0;
}

/* The logo sits directly on the photo, so we lean on the top scrim plus a
   soft shadow to separate it rather than a plate. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px,0.42vw,7px);
}
.brand-logo,.brand-emblem{
  width:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.7)) drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.brand-logo{height:clamp(46px,5.9vw,96px)}
/* The seal is circular, so it needs a little more height to feel the same weight. */
.brand-emblem{height:clamp(53px,6.9vw,112px)}

/* The national colours, in the same thirds as the supplied charte. */
.brand-divider{
  width:clamp(3px,.28vw,5px);
  height:clamp(34px,4.3vw,71px);
  border-radius:3px;
  flex:none;
  background:linear-gradient(180deg,#377DF7 0 33.5%,#F2D74C 33.5% 67%,#BD2D2F 67% 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.65);
}

.agenda{margin:0;text-align:right;line-height:1.22;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.agenda b{
  display:block;white-space:nowrap;
  font-size:clamp(13px,1.6vw,22px);font-weight:800;letter-spacing:.07em;color:var(--green);
}
.agenda span{
  display:block;
  font-size:clamp(9.5px,1.1vw,15px);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.92);
}

/* ---------- Hero copy ---------- */

.hero-content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(7px,1.15vh,14px);
  width:100%;
}

.kicker{
  margin:0;
  font-size:clamp(10.5px,1.1vw,16px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 2px 18px rgba(0,0,0,.85);
}

h1{
  margin:0;
  /* The line breaks are set in the markup, so we only cap the overall width. */
  max-width:min(100%,1180px);
  font-size:clamp(25px,3.9vw,54px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-shadow:0 3px 10px rgba(0,0,0,.85),0 8px 34px rgba(0,0,0,.75);
}
h1 em{font-style:normal;color:var(--gold)}

/* The headline writes itself on, one line at a time, after a short hold that
   leaves the photograph unobstructed. We wipe with clip-path in steps rather
   than animating width, so it works with the proportional typeface and keeps
   the text selectable and readable to screen readers throughout. */
h1 .w{
  display:block;
  clip-path:inset(0 100% 0 0);
  animation:write .8s steps(17,end) forwards;
}
h1 .w1{animation-delay:1.2s}
h1 .w2{animation-delay:2.05s;animation-timing-function:steps(21,end)}
h1 .w3{animation-delay:2.9s}

.pillars{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px clamp(22px,3.4vw,54px);
  font-size:clamp(11.5px,1.15vw,16.5px);
  font-weight:400;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.8);
}
.pillars li{display:flex;align-items:center;gap:11px}
.pillars li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);flex:none;box-shadow:0 0 12px rgba(216,166,60,.8);
}

/* The page is not live yet, so this reads as a status marker rather than a button. */
.status{
  margin:clamp(4px,.8vh,10px) 0 0;
  display:inline-flex;align-items:center;gap:12px;
  padding:clamp(9px,1.2vh,13px) clamp(22px,3vw,38px);
  border:1.5px solid rgba(216,166,60,.85);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  font-size:clamp(11.5px,1.25vw,16px);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.14);
}
.status i{
  width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;
  animation:beacon 2.6s ease-out infinite;
}

.tagline{
  margin:0;
  font-size:clamp(9.5px,.95vw,14px);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}

/* ---------- Footer ---------- */

/* We keep the footer dark so it continues the hero instead of cutting it off,
   and mark the join with a hairline in the AUDA-NEPAD lettering colours. */
.footer{
  position:relative;
  background:#070f0b;
  color:rgba(255,255,255,.82);
  padding:clamp(11px,1.7vh,19px) var(--pad-x) clamp(11px,1.7vh,18px);
}
.footer-rule{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6B4E2E 0%,#8CC63F 32%,#4FC1E9 58%,#F5871F 84%,var(--gold) 100%);
}

.footer-inner{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;align-items:center;
  gap:clamp(8px,1.2vh,13px);
  text-align:center;
  font-size:clamp(12px,1vw,15.5px);
  line-height:1.4;
}

.f-item{
  display:inline-flex;align-items:center;gap:10px;
  font-style:normal;font-weight:400;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  transition:color .25s ease;
}
.f-item span{border-bottom:1px solid transparent;transition:border-color .25s ease}
a.f-item:hover{color:#fff}
a.f-item:hover span{border-color:var(--gold)}

.f-icon{
  width:clamp(15px,1.3vw,17px);height:auto;flex:none;
  color:var(--gold);
  stroke-linecap:round;stroke-linejoin:round;
}
.footer sup{font-size:.68em}

/* Three across once there is room, with the address centred between the links. */
@media (min-width:900px){
  .footer-inner{grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px)}
  .footer-inner > :first-child{justify-self:start}
  .footer-inner > :last-child{justify-self:end}
}

/* ---------- Motion ---------- */

/* We drift gently downward, not up: an upward drift eats the headroom above
   the seated figure and is what pushes his head out of frame on wide screens. */
@keyframes drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.03) translateY(.4%)}}
@keyframes grain{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-1.5%,1%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(216,166,60,.6)}70%{box-shadow:0 0 0 13px rgba(216,166,60,0)}100%{box-shadow:0 0 0 0 rgba(216,166,60,0)}}

.reveal{opacity:0;animation:rise .85s cubic-bezier(.22,.7,.2,1) forwards}
.kicker.reveal{animation-delay:.55s}

.pillars.reveal{animation-delay:3.85s}
.status.reveal{animation-delay:4.2s}
.tagline.reveal{animation-delay:4.5s}

/* ---------- Responsive ---------- */

/* The photo is 3:2. The wider the window, the more the crop bites off the top,
   so the focal point has to step back to keep the seated figure's head in frame.
   Each value sits just under the measured clipping limit for that shape. */
@media (min-aspect-ratio:17/10){ :root{--focal-y:34%} }
@media (min-aspect-ratio:2/1){   :root{--focal-y:22%} }
@media (min-aspect-ratio:23/10){ :root{--focal-y:19%} }

@media (max-width:760px){
  .pillars{flex-direction:column;gap:9px}
  .agenda b{font-size:13px}
  .hero{padding-top:clamp(88px,13vh,120px)}
}

/* On the narrowest phones we let the strapline wrap rather than drop it. */
@media (max-width:400px){
  .agenda{max-width:46vw}
  .agenda span{font-size:9px;letter-spacing:.03em;line-height:1.25}
}

@media (prefers-reduced-motion:reduce){
  .hero-media,.hero-grain,.status i{animation:none!important}
  .reveal{animation:none!important;opacity:1!important;transform:none!important}
  h1 .w{animation:none!important;clip-path:none!important}
}