/* ————— Money Affirmations · Receive ————— */

@font-face{font-family:'Sora';font-weight:500;src:url('fonts/sora-latin-500-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Sora';font-weight:700;src:url('fonts/sora-latin-700-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Sora';font-weight:800;src:url('fonts/sora-latin-800-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Jost';font-weight:400;src:url('fonts/jost-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Jost';font-weight:500;src:url('fonts/jost-latin-500-normal.woff2') format('woff2');font-display:swap}

:root{
  --bg:#e6e4f4;
  --bg-deep:#d6d2ee;
  --card:#faf9fd;
  --purple:#5b54d9;
  --purple-dark:#4b45c6;
  --ink:#2e2a6e;
  --ink-soft:#7d78b0;
  --display:'Sora',system-ui,sans-serif;
  --ui:'Jost',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--ui);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}

/* ————— Soft blobs ————— */
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.8;
  animation:float 22s ease-in-out infinite alternate}
.b1{width:70vmax;height:70vmax;right:-28vmax;bottom:-30vmax;background:#b3abe4}
.b2{width:44vmax;height:44vmax;left:-18vmax;top:-16vmax;background:#d9d5f2;animation-duration:28s;animation-delay:-9s}
.b3{width:36vmax;height:36vmax;left:8vmax;bottom:-20vmax;background:#c9c3ef;animation-duration:25s;animation-delay:-16s}
@keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(3vmax,-3vmax) scale(1.08)}}

/* ————— Top ————— */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 22px 0}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink)}

/* ————— Buttons ————— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;
  border:none;border-radius:999px;cursor:pointer;
  transition:transform .15s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.94)}
.btn:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.btn-icon{padding:12px;color:var(--purple-dark);background:var(--card);
  box-shadow:0 6px 16px rgba(75,69,198,.14)}
.btn-icon svg{width:20px;height:20px}
.btn-icon[aria-pressed="true"]{color:#b0aad0;background:var(--bg-deep);box-shadow:none}

.btn-receive{
  font-size:1.35rem;letter-spacing:.04em;
  color:#fff;background:linear-gradient(180deg,#6d66e8,var(--purple-dark));
  padding:24px 74px;
  box-shadow:0 16px 40px rgba(75,69,198,.42), inset 0 1px 0 rgba(255,255,255,.28);
  animation:beckon 3.2s ease-in-out infinite;
}
.btn-receive:hover{box-shadow:0 18px 48px rgba(75,69,198,.52), inset 0 1px 0 rgba(255,255,255,.28)}
@keyframes beckon{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
.btn-receive:active{animation:none;transform:scale(.94)}

/* ————— Stage ————— */
.stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:24px min(7vw,64px);gap:22px}
.stage-label{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-soft)}
.affirmation{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.8rem, 6vw, 4rem);
  line-height:1.26;letter-spacing:-.015em;
  max-width:21ch;text-wrap:balance;color:var(--ink);
  min-height:2.6em;
}
.affirmation .w{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateY(.5em) scale(.97);filter:blur(5px);
  transition:color .9s ease;
}
.affirmation .w.in{animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
.affirmation .w.lit{color:var(--purple)}
.affirmation.out .w{animation:wordOut .5s ease forwards}
@keyframes wordOut{to{opacity:0;transform:translateY(-.45em);filter:blur(7px)}}
.affirmation .intro{color:var(--ink-soft)}

/* ————— Receive area ————— */
.controls{position:relative;z-index:2;display:flex;justify-content:center;
  padding:0 20px 18px}

/* ————— Footnote ————— */
.footnote{position:relative;z-index:2;display:flex;justify-content:center;
  padding:0 20px calc(env(safe-area-inset-bottom,0px) + 16px)}
.donate-link{
  font-family:var(--ui);font-weight:400;font-size:.82rem;letter-spacing:.03em;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:999px;
  text-decoration:underline;text-decoration-color:rgba(125,120,176,.4);text-underline-offset:3px;
  transition:color .2s ease;
}
.donate-link:hover{color:var(--purple-dark)}
.donate-link:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ————— Motion & small screens ————— */
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  .btn-receive{animation:none}
  .affirmation .w{opacity:1;transform:none;filter:none;animation:none!important}
}
@media (max-width:480px){
  .btn-receive{padding:22px 0;width:100%;max-width:340px}
  .stage{padding:16px 6vw}
}