/* School Box Africa — Donate page.
   Self-contained, brand tokens mirrored from the main site (same approach as blog.css).
   Deep Space base with Signal Cyan structure; the single red accent is reserved
   for the donate action itself so it stays the loudest thing on the page. */

:root {
  --deep-space: #060810;
  --surface: #0C0F1A;
  --surface-2: #0F1322;
  --border: #141828;
  --mid: #4A5570;
  --light: #E8EEF8;
  --cyan: #00E5FF;
  --violet: #9B6FFF;
  --ghost-stroke: #1E2438;
  --danger: #FF6B6B;
  --give: #FF2D55;
  --give-2: #FF6B2C;

  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 68px;
  --measure: 60rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--deep-space);
  color: var(--light);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--deep-space); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--cyan);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.eyebrow__index {
  font-weight: 400;
  color: var(--mid);
  letter-spacing: 0.14em;
}
.eyebrow__index::after {
  content: ''; display: inline-block;
  width: 28px; height: 1px;
  background: var(--ghost-stroke);
  vertical-align: middle;
  margin-left: 14px;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.pnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(6, 8, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.pnav__inner {
  max-width: var(--measure);
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.pnav__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.pnav__mark { width: 30px; height: 30px; flex: none; }
.pnav__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pnav__divider { width: 1px; height: 18px; background: var(--ghost-stroke); }
.pnav__full {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mid);
}
.pnav__back {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}
.pnav__back:hover { color: var(--cyan); }

/* ==========================================================================
   Stage — the video owns the first screen
   Sized so the video plus its feedback row fit within one viewport height,
   which is what keeps the donate button below the fold on purpose.
   ========================================================================== */

.stage {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 20px 24px 0;
}
.stage__inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.stage__frame {
  position: relative;
  width: 100%;
  /* Cap by height so a landscape clip never pushes the vote row off-screen.
     16/9 of the available height keeps the frame exactly on the video. */
  max-height: calc(100svh - var(--nav-h) - 150px);
  aspect-ratio: 16 / 9;
  max-width: calc((100svh - var(--nav-h) - 150px) * 16 / 9);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* ---- sound toggle ---- */

.sound {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(6, 8, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--light);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s;
  /* Glow rather than scale: a control that keeps changing size is a moving
     target for a trackpad and never settles for assistive tooling. */
  animation: sound-nudge 3s ease-in-out infinite;
}
.sound:hover { background: rgba(6, 8, 16, 0.9); border-color: var(--cyan); }
.sound__icon { display: grid; place-items: center; width: 17px; height: 17px; }
.sound__icon svg { width: 17px; height: 17px; }

/* Once sound is on the control stops shouting and recedes. */
.sound.is-on {
  animation: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--mid);
}

@keyframes sound-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
  70%      { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); }
}

/* ---- feedback ---- */

.vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
}
.vote__q {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.vote__btns { display: flex; gap: 10px; }
.vote__btns[hidden] { display: none; }

.vote__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--mid);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s var(--ease-out);
}
.vote__btn svg { width: 15px; height: 15px; }
.vote__btn:hover { color: var(--light); border-color: var(--cyan); transform: translateY(-1px); }
.vote__btn[data-vote="down"]:hover { border-color: var(--danger); }

.vote__thanks {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---- scroll cue ---- */

.stage__cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 14px;
  text-decoration: none;
  color: var(--mid);
  transition: color 0.25s;
}
.stage__cue:hover { color: var(--cyan); }
.stage__cue-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.stage__cue-arrow {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--ghost-stroke), transparent);
  animation: cue-drop 1.9s var(--ease-out) infinite;
}
@keyframes cue-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ==========================================================================
   The button
   ========================================================================== */

.give {
  padding: 96px 32px;
  text-align: center;
}
.give__inner { max-width: var(--measure); margin: 0 auto; }

.give__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 22px;
}

.give__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFF3F4;
  padding: 32px 76px;
  border-radius: 3px;
  position: relative;
  isolation: isolate;
  overflow: hidden;              /* clips the sheen sweep to the button */
  background: linear-gradient(135deg, var(--give) 0%, #F5222D 48%, var(--give-2) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 90, 110, 0.5),
    0 20px 60px -12px rgba(255, 45, 85, 0.6);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  animation: give-pulse 2.6s ease-in-out infinite;
}
.give__btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}
.give__btn:hover::before { transform: translateX(120%); }
.give__btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 120, 135, 0.75),
    0 28px 80px -14px rgba(255, 45, 85, 0.8);
}
.give__btn:active { transform: translateY(0) scale(0.99); }
.give__btn:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }

.give__note {
  margin: 26px auto 0;
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--mid);
}

@keyframes give-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,90,110,0.5), 0 20px 60px -12px rgba(255,45,85,0.55); }
  50%      { box-shadow: 0 0 0 1px rgba(255,90,110,0.7), 0 26px 76px -12px rgba(255,45,85,0.9); }
}

/* ==========================================================================
   Other ways in + footer
   ========================================================================== */

.other { padding: 0 32px 96px; }
.other__inner {
  max-width: var(--measure);
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.other__text { color: var(--mid); font-size: 0.9375rem; }
.other__links { display: flex; flex-wrap: wrap; gap: 28px; }
.other__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  transition: opacity 0.25s;
}
.other__link:hover { opacity: 0.7; }

.dfoot {
  border-top: 1px solid var(--border);
  padding: 28px 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mid);
}
.dfoot a { color: var(--mid); text-decoration: none; }
.dfoot a:hover { color: var(--cyan); }

@media (max-width: 768px) {
  /* Same as the partner page: the full wordmark and its divider don't fit
     alongside the back link on a phone and wrap the nav to three lines. */
  .pnav__full, .pnav__divider { display: none; }
  .pnav__inner { padding-left: 20px; padding-right: 20px; }

  /* Full-bleed on phones: a 16:9 clip can only ever be a band on a portrait
     screen, so give it the entire width rather than insetting it. */
  .stage { padding: 0 0 0; }
  .stage__inner { gap: 22px; }
  .stage__frame {
    max-height: calc(100svh - var(--nav-h) - 170px);
    border-radius: 0;
    box-shadow: none;
  }
  .sound { left: 10px; bottom: 10px; padding: 9px 14px 9px 11px; font-size: 10px; }
  .vote { gap: 12px; }
  .vote__q { width: 100%; text-align: center; }
  .give { padding: 72px 22px; }
  .give__btn { padding: 26px 32px; width: 100%; }
  .other { padding-left: 22px; padding-right: 22px; }
  .other__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .give__btn, .sound, .stage__cue-arrow { animation: none; }
  .give__btn:hover { transform: none; }
}

/* ==========================================================================
   Unmute veil — the whole video is the tap target while it is silent
   ========================================================================== */

.veil {
  position: absolute;
  inset: 0;
  z-index: 3;                    /* above native controls, which sit at z-index 1-2 */
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(6, 8, 16, 0.15) 0%, rgba(6, 8, 16, 0.45) 100%);
  transition: background 0.3s var(--ease-out);
}
.veil[hidden] { display: none; }
.veil:hover { background: rgba(6, 8, 16, 0.18); }
.veil:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }

.veil__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(6, 8, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: veil-pulse 2.4s ease-in-out infinite;
}
.veil__icon { display: grid; place-items: center; width: 20px; height: 20px; }
.veil__icon svg { width: 20px; height: 20px; }

@keyframes veil-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.45); }
  70%      { box-shadow: 0 0 0 18px rgba(0, 229, 255, 0); }
}

/* The corner pill is the persistent control; the veil is the first-run prompt,
   so while the veil is up the pill would be saying the same thing twice. */
.veil:not([hidden]) ~ .sound { display: none; }
.sound { z-index: 4; }

@media (max-width: 768px) {
  .veil__badge { font-size: 11px; padding: 13px 22px; gap: 10px; }
  .veil__icon, .veil__icon svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .veil__badge { animation: none; }
}