/* ============================================================
   ahaaa.in — components.css
   ------------------------------------------------------------
   🧩 THE LEGO BRICKS
   Reusable pieces that appear in more than one place:

     .btn      → the solid rounded buttons
     .eyebrow  → the small coloured label above each heading
     .pill     → the wishlist pills (antakshari, stapu…)
     .toast    → the little black message that pops up at the
                 bottom of the screen
     .reveal   → sections gently fading in as you scroll

   ⚠️ MOSTLY MACHINERY — sizes and colours all come from
      tokens.css, so edit them there instead.
   ============================================================ */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1;
  padding:13px 24px 15px;border-radius:var(--r-full);
  background:var(--ink);color:#fff;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}

/* dark variant is the default now; blue kept as an option */
.btn-dark{background:var(--ink)}
.btn-blue{background:var(--blue)}
.btn-blue:hover{opacity:.9}

/* ---------- eyebrow (small label above headings) ---------- */
/* quiet monochrome label — a mono caption, not a coloured pill */
.eyebrow{
  display:inline-block;
  font-family:var(--mono);font-weight:500;font-size:.8rem;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
}
.eyebrow.light{color:rgba(255,255,255,.6)}   /* on the dark newsletter box */

/* ---------- headings ---------- */
h2{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2rem, 4.5vw, 3rem);     /* auto-scales phone→desktop */
  line-height:1.08;letter-spacing:-.02em;
}
.lede{color:var(--muted);max-width:520px;margin-top:14px;font-size:1.05rem;line-height:1.55}
.sec-head{max-width:680px}

/* ---------- pills (the wishlist section) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.98rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);
  padding:12px 20px;border-radius:var(--r-full);
  transition:border-color .2s, transform .15s;
}
.pill .cdot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--blue));opacity:.8}
.pill b{font-weight:500;color:var(--c,var(--blue))}
.pill:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--c,var(--blue)) 40%, var(--line));
}

/* ---------- toast (pop-up message at the bottom) ---------- */
/* the messages themselves live in js/data.js                  */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:300;
  transform:translate(-50%, 90px);              /* hidden below screen */
  background:var(--ink);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1.3;
  padding:14px 26px 16px;border-radius:var(--r-full);
  box-shadow:0 14px 40px rgba(20,22,43,.3);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1);
  max-width:calc(100vw - 40px);text-align:center;
  pointer-events:none;
}
.toast.show{transform:translate(-50%, 0)}       /* slides into view */

/* ---------- confetti pieces (created by js/effects.js) ---------- */
.confetti-piece{
  position:fixed;z-index:400;pointer-events:none;
  width:10px;height:14px;border-radius:3px;
}

/* ---------- scroll reveal ---------- */
/* anything with class="reveal" starts invisible and fades in
   when it scrolls into view (handled by js/effects.js)        */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}