/* ============================================================================
   02-COMPONENTS — Reusable UI pieces shared across sections.
   (buttons, glass pills, speech bubbles, form fields, checkboxes)
   ============================================================================ */

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-body);
  line-height: var(--lh-body);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--light  { background: var(--color-cream); color: var(--color-ink); }
.btn--light:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15); }

.btn--rust   { background: var(--color-rust); color: var(--color-offwhite); }
.btn--rust:hover { background: #82390f; box-shadow: 0 8px 24px rgba(151,67,21,.3); }

.btn--outline {
  background: transparent;
  color: var(--color-rust);
  border-color: var(--color-rust);
}
.btn--outline:hover { background: var(--color-rust); color: var(--color-cream); }

.btn--block { width: 100%; }

/* ---- Glass capability pill (Approach section, founder name tag) -------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-body);
  color: #fff;
  background: rgba(55, 55, 55, .2);
  border: 1px solid rgba(246, 245, 241, .4);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  white-space: nowrap;
}
.pill--solid { background: rgba(246, 245, 241, .15); border: 0; }

/* ---- Hero floating thought bubbles ------------------------------------ */
.bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  max-width: 220px;
  padding: 14px 20px;
  border-radius: 22px;                 /* soft, cloud-like */
  background: rgba(40, 40, 40, .26);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: var(--color-cream-warm);
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: var(--tracking-body);
  /* opacity cycles (appear/fade); transform drifts continuously */
  opacity: 0;
  animation: bubble-fade 13s var(--ease) infinite,
             bubble-drift 9s ease-in-out infinite;
}
/* two trailing "thought" dots beneath the bubble */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.bubble::after  { width: 12px; height: 12px; bottom: -10px; }   /* nearer, larger */
.bubble::before { width: 7px;  height: 7px;  bottom: -22px; }   /* farther, smaller */
.bubble--bl::after  { left: 26px; }
.bubble--bl::before { left: 16px; }
.bubble--br::after  { right: 26px; }
.bubble--br::before { right: 16px; }

@keyframes bubble-fade {
  0%, 100% { opacity: 0; }
  12%, 68% { opacity: 1; }
  84%      { opacity: 0; }
}
@keyframes bubble-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(3px, -9px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { opacity: 1; animation: none; }
}

/* ---- Form fields ------------------------------------------------------- */
.field {
  width: 100%;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: var(--color-cream-warm);
  border: 1px solid transparent;
  color: var(--color-ink);
  letter-spacing: var(--tracking-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--ink-60); }
.field:focus { outline: none; border-color: var(--color-rust); }

/* ---- Checkbox ---------------------------------------------------------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-80);
  cursor: pointer;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  width: 16px; height: 16px;
  border: 1px solid var(--color-rust);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease);
}
.checkbox input:checked + .checkbox__box { background: var(--color-rust); }
.checkbox input:checked + .checkbox__box::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 1px;
  background: var(--color-cream);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--color-rust); outline-offset: 2px; }