/* ==========================================================================
   THEME — design tokens, reset, typography
   Palette pulled straight from Wise's own artwork:
   midnight purple, neon violet, toxic green, tavern gold, smoke.
   ========================================================================== */

:root{
  /* --- surfaces --- */
  --void:        #06030d;
  --midnight:    #0a0412;
  --midnight-2:  #120726;
  --plum:        #1b0b36;
  --plum-lift:   #241046;

  /* --- neon --- */
  --violet:      #a855f7;
  --violet-hot:  #c77dff;
  --magenta:     #e879f9;
  --toxic:       #63f542;
  --toxic-dim:   #3ecf1f;
  --gold:        #fbbf24;
  --ember:       #ff7847;

  /* --- ink --- */
  --ink:         #f4eeff;
  --ink-soft:    #cbbde4;
  --ink-mute:    #8f7fae;
  --ink-faint:   #5f5279;

  /* --- lines & glass --- */
  --line:        rgba(168, 85, 247, .22);
  --line-soft:   rgba(168, 85, 247, .12);
  --glass:       rgba(24, 10, 46, .55);
  --glass-lift:  rgba(36, 16, 70, .72);
  /* Used by elements that repeat a lot (cards, comments, social tiles).
     They deliberately skip backdrop-filter — blurring 30+ separate layers
     is a real cost on phone GPUs — so they carry a more opaque fill
     instead, which reads almost identically over this background. */
  --glass-solid: rgba(21, 9, 41, .86);

  /* --- glows --- */
  --glow-violet: 0 0 22px rgba(168,85,247,.55), 0 0 60px rgba(168,85,247,.22);
  --glow-toxic:  0 0 22px rgba(99,245,66,.5),  0 0 58px rgba(99,245,66,.18);
  --glow-gold:   0 0 20px rgba(251,191,36,.45);

  /* --- type --- */
  --display: 'Bebas Neue', 'Impact', sans-serif;
  --ui:      'Chakra Petch', 'Segoe UI', sans-serif;
  --body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- metrics --- */
  --ticker-h:  34px;
  --mast-h:    68px;
  --radius:    16px;
  --radius-sm: 10px;
  --wrap:      1240px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  padding-top:calc(var(--ticker-h) + var(--mast-h));
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }

/* --- headings ----------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:.95;
  margin:0;
  text-transform:uppercase;
}

.kicker{
  font-family:var(--ui);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--violet-hot);
  margin:0 0 .9rem;
}

.page-title{
  font-size:clamp(2.6rem,7vw,5rem);
  margin-bottom:.35rem;
  text-shadow:0 0 34px rgba(168,85,247,.45);
}
.page-title em{
  font-style:normal;
  color:var(--toxic);
  text-shadow:0 0 30px rgba(99,245,66,.5);
}
/* emoji have no condensed display face, so at display sizes they balloon
   next to the type — pull them back to roughly cap height */
.title-emoji{
  font-size:.5em;
  vertical-align:.14em;
  margin-right:.08em;
}
.page-sub{
  color:var(--ink-mute);
  font-size:1.02rem;
  margin:0 0 2.6rem;
  max-width:60ch;
}

/* section title with a neon rule trailing off it */
.section-title{
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin:0 0 1.4rem;
}
.section-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--violet),transparent);
}

.lede{
  color:var(--ink-soft);
  font-size:1.06rem;
  line-height:1.8;
}

/* --- layout helpers ----------------------------------------------------- */
.wrap{
  width:min(100% - 2.5rem, var(--wrap));
  margin-inline:auto;
}
.wrap--narrow{ width:min(100% - 2.5rem, 860px); }

/* --- buttons ------------------------------------------------------------ */
.btn{
  --btn-accent:var(--violet);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.86rem 1.9rem;
  font-family:var(--ui);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  isolation:isolate;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  transition:opacity .25s var(--ease);
}
/* sweep of light on hover */
.btn::after{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-120%;
  width:60%;
  z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .6s var(--ease-out);
}
.btn:hover::after{ left:130%; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  color:#150525;
  box-shadow:var(--glow-violet);
}
.btn--primary::before{
  background:linear-gradient(135deg,var(--violet-hot),var(--magenta) 55%,var(--violet));
}
.btn--primary:hover{ box-shadow:0 0 30px rgba(200,125,255,.75), 0 0 80px rgba(168,85,247,.35); }

.btn--ghost{
  color:var(--ink);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  border-color:var(--violet);
  box-shadow:var(--glow-violet);
}

.btn--donate{
  color:#0d2b07;
  font-size:1rem;
  padding:1.1rem 2.4rem;
  box-shadow:var(--glow-toxic);
}
.btn--donate::before{
  background:linear-gradient(135deg,var(--toxic),#a3ff7a 50%,var(--toxic-dim));
}
.btn--donate:hover{ box-shadow:0 0 34px rgba(99,245,66,.8), 0 0 90px rgba(99,245,66,.3); }

/* --- reveal on scroll --------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  /* NO will-change here. There are ~70 .reveal elements on this page, and
     will-change permanently promotes every one to its own compositor layer,
     each allocated at the display's pixel ratio. On a high-DPI screen that
     is a huge amount of GPU memory and per-frame compositing for a one-shot
     0.8s fade. The browser handles this transition fine without the hint. */
}
.reveal.is-in{ opacity:1; transform:none; }

/* --- neon flicker ------------------------------------------------------- */
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{ opacity:1;   text-shadow:0 0 8px var(--toxic),0 0 28px rgba(99,245,66,.7),0 0 60px rgba(99,245,66,.35); }
  20%,24%,55%{                 opacity:.72; text-shadow:none; }
}
.flicker{
  color:var(--toxic);
  animation:flicker 7s infinite steps(1);
}

/* --- accessibility ------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--toxic);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}