/* ==========================================================================
   Donate takeover (.ggd)
   Full-screen donation overlay opened by the nav "donate" button on every
   page. Markup is built by assets/gogo/donate.js; this file only styles it.

   The panel opens as a circular wipe out of the button that was clicked —
   js writes that button's centre into --ggd-x / --ggd-y and the radius it
   needs to cover the viewport into --ggd-r.
   ========================================================================== */

.ggd{
  --ggd-blue:   #194BF5;
  --ggd-blue-d: #1038BD;
  --ggd-ink:    #0B0B12;
  --ggd-mint:   #AFFFE9;
  --ggd-pink:   #FF008C;
  --ggd-x: 50vw;
  --ggd-y: 50vh;
  --ggd-r: 150vmax;
  --ggd-ease: cubic-bezier(.65,0,.35,1);

  position: fixed;
  inset: 0;
  z-index: 2147483000;        /* under the cookie prompt, over everything else */
  visibility: hidden;
  font-family: "Airwaves", Arial, sans-serif;
}
.ggd.is-open{ visibility: visible; }

/* --- backdrop ------------------------------------------------------------ */
.ggd__scrim{
  position: absolute; inset: 0;
  background: rgba(7,2,25,.72);
  opacity: 0;
  transition: opacity .45s var(--ggd-ease);
}
.ggd.is-open .ggd__scrim{ opacity: 1; }

/* --- the panel ----------------------------------------------------------- */
.ggd__sheet{
  position: absolute; inset: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  /* Centred by auto margins on the end children rather than by
     justify-content: when the content is taller than the screen the autos
     collapse to 0 and the top of the panel stays reachable, which
     justify-content: center would have clipped away. */
  justify-content: flex-start;
  gap: 0;
  padding: clamp(64px, 7vh, 96px) clamp(20px, 5vw, 72px) clamp(28px, 4vh, 48px);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(90vw 70vh at 18% -10%, rgba(175,255,233,.22), transparent 62%),
    radial-gradient(70vw 70vh at 92% 108%, rgba(255,0,140,.20), transparent 60%),
    linear-gradient(170deg, var(--ggd-blue) 0%, var(--ggd-blue) 46%, var(--ggd-blue-d) 100%);
  clip-path: circle(0px at var(--ggd-x) var(--ggd-y));
  transition: clip-path .62s var(--ggd-ease);
}
.ggd.is-open .ggd__sheet{
  clip-path: circle(var(--ggd-r) at var(--ggd-x) var(--ggd-y));
}
.ggd__sheet > :first-child{ margin-top: auto; }
.ggd__sheet > :last-child{ margin-bottom: auto; }

/* --- logo ---------------------------------------------------------------- */
.ggd__logo{
  position: fixed;
  top: clamp(18px, 2.8vh, 34px);
  left: clamp(18px, 2.6vw, 38px);
  width: clamp(104px, 11vw, 158px);
  height: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .45s ease .3s, transform .45s var(--ggd-ease) .3s;
  pointer-events: none;
}
.ggd.is-open .ggd__logo{ opacity: 1; transform: none; }

/* --- close --------------------------------------------------------------- */
.ggd__close{
  position: fixed;
  top: clamp(16px, 2.4vh, 28px);
  right: clamp(16px, 2.4vw, 34px);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.ggd__close:hover{
  background: var(--ggd-mint);
  border-color: var(--ggd-mint);
  color: var(--ggd-ink);
  transform: rotate(90deg);
}
.ggd__close svg{ width: 18px; height: 18px; display: block; }

/* --- staggered entrance -------------------------------------------------- */
.ggd__rise{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .55s var(--ggd-ease);
  transition-delay: calc(.22s + var(--i, 0) * .07s);
}
.ggd.is-open .ggd__rise{ opacity: 1; transform: none; }

/* --- headline ------------------------------------------------------------ */
.ggd__eyebrow{
  margin: 0 0 2px;
  font-family: "Airwaves Rounded", Arial, sans-serif;
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ggd-mint);
}
.ggd__title{
  margin: 0;
  font-family: "Anton SC", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(54px, 9.5vw, 148px);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* Century Gothic, not the Airwaves used elsewhere here: Airwaves is a display
   face that draws lowercase as capitals, which is fine for a headline and
   hard going for three lines of running text. Century Gothic is the body face
   the rest of the site already uses, and it keeps sentence case. */
.ggd__lede{
  max-width: 44ch;
  margin: clamp(14px, 2vh, 26px) auto 0;
  font-family: "Century Gothic", Arial, sans-serif;
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.45;
  font-weight: 400;
  color: #fff;
}
.ggd__lede-line{ display: block; margin-top: .5em; }

/* --- amounts ------------------------------------------------------------- */
.ggd__tiers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  width: 100%;
  max-width: 720px;
  margin: clamp(20px, 3.4vh, 42px) 0 clamp(16px, 2.4vh, 28px);
  padding: 0;
  list-style: none;
}
.ggd__tier{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(14px, 1.8vh, 22px) 14px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(175,255,233,.45);
  border-radius: 18px;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.ggd__tier:hover,
.ggd__tier:focus-visible{
  background: var(--ggd-mint);
  border-color: var(--ggd-mint);
  color: var(--ggd-ink);
  transform: translateY(-4px);
}
.ggd__amount{
  font-family: "Anton SC", Impact, sans-serif;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: .01em;
}
/* --- buttons ------------------------------------------------------------- */
.ggd__actions{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.ggd__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 232px;
  padding: 0 32px;
  height: clamp(52px, 6.4vh, 64px);
  border: 2px solid transparent;
  border-radius: 42px;
  font-family: "Airwaves", Arial, sans-serif;
  font-size: clamp(17px, 1.4vw, 23px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ggd__btn--primary{ background: #fff; color: #000; }
.ggd__btn--primary:hover{ background: var(--ggd-mint); transform: translateY(-2px); }
.ggd__btn--ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.ggd__btn--ghost:hover{
  background: rgba(255,255,255,.12);
  border-color: #fff;
  transform: translateY(-2px);
}

/* --- fine print ---------------------------------------------------------- */
.ggd__fine{
  max-width: 720px;
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  font-family: "Century Gothic", Arial, sans-serif;
  font-size: clamp(11px, .85vw, 14px);
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
.ggd__fine a{ color: var(--ggd-mint); text-decoration: none; }
.ggd__fine a:hover{ text-decoration: underline; }

/* --- body lock ----------------------------------------------------------- */
html.ggd-locked, body.ggd-locked{ overflow: hidden !important; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 991px){
  .ggd__tiers{ max-width: 600px; }
  .ggd__sheet{ padding-top: clamp(74px, 11vh, 110px); }
}
@media (max-width: 560px){
  /* Still three across — the amount shrinks instead, so "$1,000" clears its
     column even at 320px rather than wrapping or pushing the grid wide. */
  .ggd__tiers{ gap: 8px; }
  .ggd__tier{ padding: 16px 6px; border-radius: 14px; }
  .ggd__amount{ font-size: clamp(20px, 6.4vw, 32px); }
  .ggd__btn{ width: 100%; min-width: 0; }
  .ggd__actions{ width: 100%; max-width: 360px; }
  .ggd__close{ width: 46px; height: 46px; }
}
@media (max-height: 700px) and (min-width: 992px){
  .ggd__tier{ padding-top: 14px; padding-bottom: 12px; }
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .ggd__sheet{
    clip-path: none;
    opacity: 0;
    transition: opacity .2s linear;
  }
  .ggd.is-open .ggd__sheet{ clip-path: none; opacity: 1; }
  .ggd__rise{ transition: opacity .2s linear; transform: none; transition-delay: 0s; }
  .ggd__logo{ transition: opacity .2s linear; transform: none; }
  .ggd__close:hover{ transform: none; }
  .ggd__tier:hover, .ggd__btn:hover{ transform: none; }
}