/* === MUSTANG MONEY fall fundraiser banner ===
   Self-contained: every rule is scoped to .mm-banner so the rest of the homepage is untouched.
   Remove the banner markup in /index.html (and these two asset links) when the campaign ends. */
.mm-banner{
  --mm-pink:#ff2bd6;
  --mm-orange:#ff7a1a;
  --mm-cyan:#2ef6ff;
  --mm-violet:#8f5bff;
  --mm-blue:#1f6bff;
  --mm-chrome:linear-gradient(180deg,#ffffff 0%,#eef3f9 30%,#9aa8b8 48%,#5e6c7c 52%,#e9eef4 64%,#ffffff 78%,#aab6c4 100%);
  position:relative; z-index:1;
  isolation:isolate;
  overflow:hidden;
  color:var(--white,#f8fbff);
  background:
    radial-gradient(ellipse 60% 70% at 78% 40%,rgba(143,91,255,.26),transparent 70%),
    radial-gradient(ellipse 50% 60% at 12% 20%,rgba(255,43,214,.16),transparent 70%),
    linear-gradient(180deg,#030308 0%,#07061a 55%,#020205 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
main > .mm-banner:first-child{ margin-top:74px; }           /* clears the fixed header if the announce strip is ever removed */
.mm-banner + .hero{ padding-top:clamp(28px,4vw,42px); }
.mm-banner::after{                                           /* neon spectrum edge, like the announce strip */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,var(--mm-cyan),var(--mm-violet),var(--mm-pink),var(--mm-orange));
  box-shadow:0 0 18px rgba(255,43,214,.7);
}
.mm-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* whole-banner click target for pointer users; keyboard + screen readers get the real button */
.mm-hitarea{ position:absolute; inset:0; z-index:1; cursor:pointer; }

/* ---------- stage atmosphere ---------- */
.mm-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.mm-beam{
  position:absolute; top:-12%; width:clamp(160px,20vw,320px); height:125%;
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  filter:blur(16px); mix-blend-mode:screen; opacity:.5;
  transform-origin:50% 0;
  animation:mm-sway 9s ease-in-out infinite alternate;
}
.mm-beam--pink  { left:4%;  background:linear-gradient(180deg,rgba(255,43,214,.85),rgba(255,43,214,0) 78%); transform:rotate(-18deg); }
.mm-beam--cyan  { left:30%; background:linear-gradient(180deg,rgba(46,246,255,.7),rgba(46,246,255,0) 75%);  transform:rotate(12deg); animation-duration:11s; animation-delay:-3s; }
.mm-beam--violet{ left:58%; background:linear-gradient(180deg,rgba(143,91,255,.85),rgba(143,91,255,0) 78%); transform:rotate(-10deg); animation-duration:10s; animation-delay:-6s; }
.mm-beam--orange{ left:82%; background:linear-gradient(180deg,rgba(255,122,26,.75),rgba(255,122,26,0) 72%); transform:rotate(16deg); animation-duration:12s; animation-delay:-2s; }
@keyframes mm-sway{ from{ rotate:-7deg; } to{ rotate:7deg; } }
.mm-haze{
  position:absolute; inset:auto 0 0 0; height:60%;
  background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(143,91,255,.32),transparent 70%),
             radial-gradient(ellipse 40% 50% at 15% 100%,rgba(255,43,214,.22),transparent 70%),
             radial-gradient(ellipse 40% 50% at 88% 100%,rgba(46,246,255,.18),transparent 70%);
}
.mm-eq{
  position:absolute; left:0; right:0; bottom:clamp(54px,8vw,110px); height:clamp(70px,11vw,150px);
  display:flex; align-items:flex-end; gap:clamp(3px,.5vw,7px); padding:0 2vw;
  opacity:.32;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mm-eq i{
  flex:1; height:100%; border-radius:3px 3px 0 0;
  background:linear-gradient(0deg,var(--mm-pink),var(--mm-violet) 45%,var(--mm-cyan));
  transform-origin:50% 100%; transform:scaleY(.3);
  animation:mm-eq 1.3s ease-in-out infinite alternate;
}
.mm-eq i:nth-child(2n){ animation-duration:.9s; animation-delay:-.4s; }
.mm-eq i:nth-child(3n){ animation-duration:1.6s; animation-delay:-.8s; }
.mm-eq i:nth-child(5n){ animation-duration:1.1s; animation-delay:-.2s; }
.mm-eq i:nth-child(7n){ animation-duration:.75s; animation-delay:-1s; }
@keyframes mm-eq{ 0%{ transform:scaleY(.12); } 60%{ transform:scaleY(.7); } 100%{ transform:scaleY(.95); } }
.mm-choir{
  position:absolute; left:0; right:0; bottom:0; height:clamp(80px,11vw,160px);
  background:url('/assets/fundraiser/choir-silhouettes.svg') center bottom / auto 100% repeat-x;
}
.mm-choir::before{                                            /* rim light on the singers' shoulders */
  content:""; position:absolute; inset:-30% 0 auto 0; height:60%;
  background:linear-gradient(90deg,rgba(46,246,255,.25),rgba(255,43,214,.3),rgba(255,122,26,.25));
  filter:blur(24px); z-index:-1;
}

/* ---------- layout ---------- */
.mm-inner{
  position:relative; z-index:2; pointer-events:none;
  max-width:1400px; margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(20px,5vw,80px) clamp(28px,3vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  grid-template-areas:
    "eyebrow  visual"
    "title    visual"
    "goal     visual"
    "support  visual"
    "cta      visual"
    "progress progress";
  column-gap:clamp(20px,4vw,64px);
  align-items:start;
}
.mm-inner > *{ min-width:0; }
.mm-cta{ pointer-events:auto; }

.mm-eyebrow{
  grid-area:eyebrow; margin:0 0 clamp(12px,1.6vw,20px);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-family:var(--font-body,'Montserrat',sans-serif); font-weight:800; text-transform:uppercase;
  letter-spacing:.26em; font-size:clamp(.72rem,1vw,.9rem); color:#e6ecf4;
}
.mm-eyebrow-accent{ color:var(--mm-cyan); text-shadow:0 0 14px rgba(46,246,255,.7); display:inline-flex; align-items:center; gap:14px; }
.mm-eyebrow-accent::before{ content:""; width:28px; height:2px; background:linear-gradient(90deg,var(--mm-pink),var(--mm-orange)); box-shadow:0 0 10px var(--mm-pink); }

.mm-title{ grid-area:title; margin:0; line-height:1; font-weight:900; }
.mm-chrome{
  display:block;
  font-family:'Montserrat',system-ui,sans-serif; font-style:italic; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; line-height:.86;
  font-size:clamp(3.2rem,8vw,8rem);
  padding-right:.08em;                                         /* room for the italic overhang */
  background:var(--mm-chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #3c4654) drop-shadow(0 0 14px rgba(255,43,214,.45)) drop-shadow(0 0 36px rgba(46,246,255,.25));
}
.mm-chrome > span{ display:block; }
.mm-live{
  display:block; width:max-content; max-width:100%;
  margin:-.12em 0 0 clamp(16px,24%,260px);
  font-family:'Kaushan Script',cursive; font-weight:400; text-transform:none; letter-spacing:0;
  font-size:clamp(2.6rem,6vw,6rem); line-height:1.1;
  color:#fff1fc;
  transform:rotate(-6deg);
  text-shadow:0 0 4px #fff,0 0 10px var(--mm-pink),0 0 22px var(--mm-pink),0 0 46px var(--mm-pink),0 0 80px rgba(255,43,214,.6);
  animation:mm-flicker 6s linear infinite;
}
@keyframes mm-flicker{ 0%,91%,94%,100%{ opacity:1; } 92%{ opacity:.55; } 93%{ opacity:.95; } 95%{ opacity:.7; } }

.mm-goal{
  grid-area:goal; margin:clamp(10px,1.4vw,18px) 0 0;
  font-family:'Montserrat',system-ui,sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,3.2rem); line-height:1.05; letter-spacing:.01em; color:#fff;
}
.mm-goal strong{
  background:linear-gradient(90deg,var(--mm-orange),#ffd36b 45%,var(--mm-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,122,26,.55));
  white-space:nowrap;
}
.mm-support{
  grid-area:support; margin:clamp(10px,1.2vw,16px) 0 0; max-width:40ch;
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.5; color:#cfd9e6; font-weight:500;
}
.mm-support strong{ color:#fff; font-weight:800; }

.mm-cta{
  grid-area:cta; justify-self:start; margin-top:clamp(18px,2vw,28px);
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:66px; padding:0 clamp(26px,3vw,40px);
  border-radius:999px;
  font-family:'Montserrat',system-ui,sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:.12em; font-size:clamp(1rem,1.4vw,1.22rem); text-decoration:none; text-align:center;
  color:#fff; text-shadow:0 1px 2px rgba(110,0,70,.6);
  background:linear-gradient(180deg,#ff6fe4 0%,#ff2bd6 48%,#d1009b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 2px rgba(255,255,255,.22),0 0 22px rgba(255,43,214,.85),0 0 60px rgba(255,43,214,.5),0 12px 30px rgba(0,0,0,.5);
  transition:transform .25s ease,box-shadow .25s ease;
  animation:mm-pulse 2.4s ease-in-out infinite;
}
.mm-cta-arrow{ font-size:1.25em; line-height:1; transition:transform .25s ease; }
@keyframes mm-pulse{ 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 2px rgba(255,255,255,.22),0 0 34px rgba(255,43,214,1),0 0 90px rgba(255,43,214,.65),0 12px 30px rgba(0,0,0,.5); } }
.mm-cta:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
@media (hover:hover){
  .mm-cta:hover,.mm-hitarea:hover ~ .mm-inner .mm-cta{ transform:translateY(-3px) scale(1.02); }
  .mm-cta:hover .mm-cta-arrow,.mm-hitarea:hover ~ .mm-inner .mm-cta-arrow{ transform:translateX(5px); }
}

/* ---------- mustang + blue-hair challenge ---------- */
.mm-visual{
  grid-area:visual; position:relative; align-self:center;
  display:grid; place-items:center; min-height:clamp(380px,38vw,540px);
}
.mm-mustang{
  position:absolute; top:50%; right:-6%; width:min(600px,112%); height:auto;
  transform:translateY(-54%) rotate(4deg);
  mix-blend-mode:screen; opacity:.92;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  filter:saturate(1.15) drop-shadow(0 0 40px rgba(255,43,214,.35));
}
.mm-challenge{
  position:relative; container-type:inline-size;
  width:min(390px,88%); aspect-ratio:430/390;
  justify-self:start; align-self:end;
  transform:rotate(-7deg) translate(-4%,10%);
  filter:drop-shadow(0 0 20px rgba(31,107,255,.75)) drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.mm-splash{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mm-challenge-text{
  position:absolute; inset:9% 12% 16% 8%; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:'Montserrat',system-ui,sans-serif; font-weight:900; text-transform:uppercase; line-height:1;
  color:#fff; text-shadow:0 2px 0 #06208f,0 0 12px rgba(0,20,120,.6);
}
.mm-ch-eq{ font-size:10cqw; letter-spacing:.02em; color:#ffe36b; text-shadow:0 2px 0 #06208f,0 0 14px rgba(255,227,107,.6); }
.mm-ch-name{ font-size:8.4cqw; margin-top:3cqw; letter-spacing:.01em; }
.mm-ch-dyes{ font-size:6.6cqw; margin-top:1.6cqw; letter-spacing:.06em; color:#d6ecff; }
.mm-ch-blue{
  font-size:23cqw; margin-top:1.5cqw; line-height:.9; font-style:italic; letter-spacing:-.01em;
  color:#3fd0ff;
  background:linear-gradient(180deg,#eafcff 0%,#7fe4ff 35%,#19a8ff 70%,#0b6bff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none;
  /* outline built from shadows, not text-stroke — a stroke traces the font's overlapping
     inner contours and leaves seams inside letters like B and E */
  filter:drop-shadow(.5cqw 0 0 #001a6e) drop-shadow(-.5cqw 0 0 #001a6e) drop-shadow(0 .5cqw 0 #001a6e) drop-shadow(0 -.5cqw 0 #001a6e)
         drop-shadow(0 .9cqw 0 #00125a) drop-shadow(0 0 3cqw rgba(63,208,255,.9));
  transform:rotate(-4deg);
  animation:mm-bounce 2.8s ease-in-out infinite;
}
@keyframes mm-bounce{ 0%,100%{ transform:rotate(-4deg) scale(1); } 50%{ transform:rotate(-2deg) scale(1.06); } }

/* ---------- progress bar ---------- */
.mm-progress{
  grid-area:progress; margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,28px) clamp(12px,1.6vw,16px);
  border-radius:20px;
  background:rgba(5,5,16,.55); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 24px rgba(143,91,255,.12),0 0 30px rgba(0,0,0,.45);
}
.mm-progress-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px;
  margin-bottom:46px;                                         /* leaves room for the goal flag above the track */
  font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:clamp(.72rem,1vw,.85rem);
}
.mm-progress-label{ color:var(--mm-cyan); text-shadow:0 0 12px rgba(46,246,255,.6); }
.mm-progress-amount{ color:#e6ecf4; letter-spacing:.08em; }
.mm-progress-amount strong{ color:#fff; font-size:1.25em; }
.mm-track{
  position:relative; height:clamp(18px,2vw,24px); border-radius:999px;
  background:linear-gradient(180deg,#0b0b1e,#14112e);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(143,91,255,.55),0 0 16px rgba(143,91,255,.35);
}
.mm-track::before{                                            /* idle light-chase until a total is entered */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,transparent 0,rgba(46,246,255,.35) 8%,transparent 16%) 0 0 / 200% 100% no-repeat;
  animation:mm-chase 3.2s linear infinite;
}
.mm-banner.has-progress .mm-track::before{ display:none; }
@keyframes mm-chase{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
.mm-fill{
  position:absolute; inset:0 auto 0 0; width:var(--mm-pct,0%); border-radius:inherit;
  background:linear-gradient(90deg,var(--mm-pink),var(--mm-orange) 55%,#ffd36b 80%,var(--mm-cyan));
  background-size:max(100%, 400px) 100%;
  box-shadow:0 0 14px rgba(255,43,214,.85),0 0 30px rgba(255,122,26,.45);
  transition:width 1.6s cubic-bezier(.2,.8,.2,1);
}
.mm-banner:not(.has-progress) .mm-fill{ display:none; }
.mm-marker{
  position:absolute; right:-2px; top:50%; width:4px; height:calc(100% + 18px); transform:translateY(-50%);
  border-radius:2px; background:#fff; box-shadow:0 0 10px #fff,0 0 22px var(--mm-cyan);
}
.mm-marker span{
  position:absolute; right:0; bottom:calc(100% + 6px); white-space:nowrap;
  font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:clamp(.7rem,1vw,.82rem);
  color:#fff; padding:4px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--mm-violet),var(--mm-pink)); box-shadow:0 0 14px rgba(255,43,214,.7);
}
.mm-ticks{
  position:relative; height:1.4em; margin-top:12px;
  font-weight:700; font-size:clamp(.66rem,.9vw,.78rem); letter-spacing:.1em; color:#8f9cb0;
}

.mm-ticks span{ position:absolute; top:0; transform:translateX(-50%); }
.mm-ticks span:nth-child(1){ left:0; transform:none; }
.mm-ticks span:nth-child(2){ left:20%; }
.mm-ticks span:nth-child(3){ left:40%; }
.mm-ticks span:nth-child(4){ left:60%; }
.mm-ticks span:nth-child(5){ left:80%; }
.mm-ticks span:nth-child(6){ left:auto; right:0; transform:none; }

/* ---------- tablet / mobile: restack instead of shrinking ---------- */
@media (max-width:960px){
  .mm-inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"eyebrow" "title" "goal" "visual" "cta" "support" "progress";
    text-align:center; justify-items:center;
    padding:clamp(32px,7vw,48px) 18px 26px;
  }
  .mm-eyebrow{ flex-direction:column; gap:6px; letter-spacing:.22em; }
  .mm-eyebrow-accent::before{ display:none; }
  .mm-chrome{ font-size:clamp(2.7rem,15vw,6.4rem); padding-right:0; }
  .mm-live{ margin:-.1em auto 0; font-size:clamp(2.6rem,13vw,5rem); }
  .mm-goal{ font-size:clamp(1.55rem,7.4vw,2.6rem); }
  .mm-visual{ width:100%; min-height:0; margin-top:18px; padding:4% 0 6%; }
  .mm-mustang{ right:auto; left:50%; width:min(440px,92%); transform:translate(-50%,-50%) rotate(4deg); opacity:.8; }
  .mm-challenge{ justify-self:center; align-self:center; width:min(360px,92%); transform:rotate(-5deg); }
  .mm-cta{ justify-self:stretch; width:100%; max-width:480px; margin:6px auto 0; min-height:68px; font-size:clamp(1rem,4.6vw,1.2rem); letter-spacing:.1em; padding:0 18px; }
  .mm-support{ margin:16px auto 0; }
  .mm-progress{ width:100%; margin-top:24px; text-align:left; }
  .mm-eq{ bottom:auto; top:38%; opacity:.18; }
}
@media (max-width:480px){
  .mm-ticks span:nth-child(2),.mm-ticks span:nth-child(4),.mm-ticks span:nth-child(5){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .mm-banner *, .mm-banner *::before{ animation:none !important; transition:none !important; }
  .mm-eq i{ transform:scaleY(.5); }
  .mm-eq i:nth-child(3n){ transform:scaleY(.8); }
  .mm-eq i:nth-child(4n){ transform:scaleY(.3); }
}