/* ============================================================
   MONETIZE AFRICA — SHARED BRAND SYSTEM
   One source of truth for the elephant mark, the pulsating
   header logo, and the branded loading state.

   Brand palette ONLY (no grey, ever):
     #710014  maroon   — primary brand red
     #4d000e  deep maroon (derived from the sign-in screen) —
              the brand-safe "neutral dark" that replaces grey
     #fff0cf  cream
     #ffffff  white
     #b38f6f  brown-gold accent
   ============================================================ */

/* ---- Brand typeface: Grift (variable) -----------------------------
   The brand body/display typeface. Shipped as a self-hosted variable
   font so every page that loads this stylesheet renders in Grift. */
@font-face{
  font-family:'Grift';
  src:url('/brand/Grift-VF.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ma-maroon:#710014;
  --ma-maroon-deep:#4d000e;
  --ma-cream:#fff0cf;
  --ma-white:#ffffff;
  --ma-gold:#b38f6f;
}

/* ---- Elephant mark -------------------------------------------------
   The real brand elephant is used as an alpha mask so the mark is
   ALWAYS transparent-backed (no white box) and can be recoloured to
   stay visible and on-brand on any surface. */
.ma-elephant{
  display:inline-block;
  background-color:var(--ma-gold);                 /* default: dark surfaces */
  -webkit-mask:url(/brand/elephant.png) center/contain no-repeat;
          mask:url(/brand/elephant.png) center/contain no-repeat;
}
.ma-elephant.on-dark { background-color:var(--ma-gold); }   /* #b38f6f on maroon */
.ma-elephant.on-light{ background-color:var(--ma-maroon); } /* #710014 on cream */

/* ---- Subtle, premium pulse ---------------------------------------- */
@keyframes maPulse{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.07); opacity:1;  }
}
@keyframes maPulseSoft{          /* reduced-motion: opacity only */
  0%,100%{ opacity:.78; }
  50%    { opacity:1;   }
}
.ma-pulse{ animation:maPulse 2.6s ease-in-out infinite; transform-origin:center; will-change:transform,opacity; }

@media (prefers-reduced-motion: reduce){
  .ma-pulse{ animation:maPulseSoft 3.2s ease-in-out infinite; }
}

/* ---- Header logo lockup ------------------------------------------- */
.ma-logo{ display:flex; align-items:center; gap:11px; }
.ma-logo .ma-elephant{ width:44px; height:44px; flex:none; }
.ma-logo-word{ display:flex; flex-direction:column; line-height:1; font-family:'Syne',sans-serif; }
.ma-logo-word b{ font-size:17px; font-weight:800; letter-spacing:.3px; color:var(--ma-maroon); }
.ma-logo-word span{ font-size:9px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--ma-gold); margin-top:3px; }

@media (max-width:560px){
  .ma-logo .ma-elephant{ width:38px; height:38px; }
  .ma-logo-word b{ font-size:15px; }
}

/* ---- Reusable branded loader -------------------------------------- */
/* Inline loader: drop a <span class="ma-elephant ma-pulse"> anywhere.
   Full-screen overlay: <div class="ma-loader-overlay"> … </div>      */
.ma-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.ma-loader .ma-elephant{ width:60px; height:60px; }
.ma-loader-label{ font-family:'Syne',sans-serif; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--ma-gold); opacity:.85; }

.ma-loader-overlay{
  position:fixed; inset:0; z-index:100001;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; background:var(--ma-maroon);   /* premium dark, never grey */
}
.ma-loader-overlay .ma-elephant{ width:90px; height:90px; background-color:var(--ma-gold); }
.ma-loader-overlay[hidden]{ display:none !important; }