/* Database landing — featured sections with a proper "See all" button + reveals. */

/* Section headers a touch more generous, and the "See all" always visible. */
.db-sec{margin-top:clamp(40px,5vw,64px)}
.db-sec .section-head{margin-bottom:clamp(16px,2vw,24px)}

/* "See all" pill (header, right-aligned) */
.seeall{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font:800 11.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper);background:rgba(255,248,236,.06);border:1px solid var(--hairline);
  white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.seeall:hover{background:rgba(240,90,157,.16);border-color:var(--sunset-pink);transform:translateY(-1px)}
.seeall svg{transition:transform .2s}
.seeall:hover svg{transform:translateX(3px)}

/* Full-width CTA below each grid — the prominent "See all N" */
.seeall-wide{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;
  margin-top:clamp(16px,2vw,22px);padding:15px;border-radius:14px;
  font:800 12.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(180deg,rgba(255,248,236,.05),rgba(255,248,236,.015));
  border:1px solid var(--hairline);
  transition:background .22s,border-color .22s,transform .12s}
.seeall-wide:hover{border-color:var(--sunset-pink);transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(240,90,157,.16),rgba(107,63,160,.1))}
.seeall-wide svg{transition:transform .22s}
.seeall-wide:hover svg{transform:translateX(4px)}
.seeall-count{color:var(--sun-gold)}

/* On the database page show 6 characters as a tidy 3 × 2 (matches the record grids). */
.page-database .charcards{grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){ .page-database .charcards{grid-template-columns:repeat(2,1fr)} }

/* Scroll reveal */
.db-rev{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.db-rev.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .db-rev{opacity:1;transform:none;transition:none} }