/* @jsx React.createElement */ /* Hero — Direction C: a Standing Order bulletin pinned to the dark canvas. First-load opening sequence (gated by sessionStorage; honors reduced-motion): t=0 bulletin enters (translateY + fade) t=120 left tape pins, then damped wobble t=200 right tape pins, then damped wobble t=320 header rule draws left→right t=420 block labels cascade in (01 → 02 → 03), digits scramble briefly t=520 reading-list arrows reveal in order t=720 signature stamp slams in (scale + rotation + ink-bleed) ~1100 page is silent. No looping motion. */ const { useState: useStateH, useEffect: useEffectH } = React; const READING_LIST = [ { n: '01', cat: 'ON COMMAND', title: 'Mission command in five sentences. Then in fifty.', why: "If you read one thing first. The shape of an order that survives plan collapse.", href: '#doctrine', }, { n: '02', cat: 'ON OPS', title: 'Logistics is leadership.', why: "Why your wing keeps stalling on the ramp, and what fixes it before the op.", href: '#doctrine', }, { n: '03', cat: 'ON LEARNING', title: "AARs that don\u2019t lie to themselves.", why: "A four-question structure. Replaces the confessional theater most after-actions become.", href: '#doctrine', }, ]; /** Returns true once, on first paint of a session. Skips when the user prefers * reduced motion. Persisted via sessionStorage so refreshes don't re-trigger, * but a fresh tab/visit will. */ function useHeroOpening() { const [opening, setOpening] = useStateH(false); useEffectH(() => { const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced) return; let played = false; try { played = sessionStorage.getItem('vc.heroPlayed') === '1'; } catch (e) {} if (played) return; // Defer one frame so the .is-opening class application triggers the // CSS keyframes (avoids a missed paint). const raf = requestAnimationFrame(() => setOpening(true)); try { sessionStorage.setItem('vc.heroPlayed', '1'); } catch (e) {} // Drop the class once the sequence ends so future state changes don't // re-animate elements (and `transform`s clear back to defaults). const timeout = setTimeout(() => setOpening(false), 1400); return () => { cancelAnimationFrame(raf); clearTimeout(timeout); }; }, []); return opening; } /* Block label — cascades in during opening. Digits scramble briefly. */ function BulletinNLbl({ n, label, idx, opening }) { return (
{opening ? : n}
); } function HeroBulletin() { const opening = useHeroOpening(); return (
{/* Top eyebrow stays on the dark canvas — channel identity, single line */}
VOLUNTEER C2  · EST. 2026  · CMD & CONTROL
{/* Show signature line — italic serif deck, sits between the eyebrow chrome and the bulletin paper. Functions as the masthead tagline; pairs with the bulletin's THESIS h1 to complete a deck-into-H1 hammer. */}

For the wall, not the feed.

{/* The bulletin itself — a single paper sheet pinned to the wall */}
); } function Hero() { return ; } window.Hero = Hero;