/**
 * Home Shell — RFDD.org · "Hero World" redesign (INDEX-REDESIGN P6)
 * Shared homepage chrome ported from the signed-off design file: section frame
 * (.sect), scroll-reveal (.rv), and the .btn family used across the homepage
 * modules. Loaded only on index.php, so these generic class names never touch
 * other pages. Design tokens live in main.css :root.
 */

body.home { background: var(--bg-deep); color: var(--text); }

/* shared section chrome */
.sect { position: relative; max-width: 1160px; margin: 0 auto; padding: 104px 28px 0; }
.sect:last-of-type { padding-bottom: 104px; }
.sect__eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 14px; }
.sect__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
.sect__eyebrow b { color: var(--text-dim); font-weight: 400; }
.sect__title { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 42px); line-height: 1.1; max-width: 640px; }
.sect__title em { font-style: normal; color: var(--neon-green); }
.sect__lede { margin-top: 12px; color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 560px; }
.sect__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* shared buttons */
.btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 13px 22px; cursor: pointer; border: 1px solid; background: rgba(6, 12, 9, .7); transition: box-shadow .2s, transform .1s; text-decoration: none; display: inline-block; }
.btn:active { transform: translateY(1px); }
.btn--green { color: var(--neon-green); border-color: rgba(57, 255, 20, .5); }
.btn--green:hover { box-shadow: 0 0 22px rgba(57, 255, 20, .35), inset 0 0 12px rgba(57, 255, 20, .12); }
.btn--cyan { color: var(--neon-cyan); border-color: rgba(0, 245, 255, .5); }
.btn--cyan:hover { box-shadow: 0 0 22px rgba(0, 245, 255, .35), inset 0 0 12px rgba(0, 245, 255, .12); }
.btn--ghost { color: var(--text-dim); border-color: rgba(232, 255, 233, .18); }
.btn--ghost:hover { color: var(--text); border-color: rgba(232, 255, 233, .4); }
.btn:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }