// Hero - light paper canvas. Gold italic + textured paint-stroke underline on
// the operative word. Alums-of strip replaces the stat band. Single Get in Touch CTA.
// Switchable background treatments (preview selector, bottom-left):
//   refined     · gold glow + drifting grid + grain (most brand-safe)
//   aurora      · drifting gold/coral gradient blobs
//   spotlight   · masked grid + sweeping soft spotlight
//   dots        · animated dot-matrix with a pulsing reveal
//   mesh        · multi-blob gradient mesh, faster + more saturated
//   beams       · diagonal light beams sweeping across the canvas
//   constellation · canvas particle network, mouse-reactive (most motion)
// Pick via the selector or ?hero=<name> in the URL.
const HERO_BGS = ['refined', 'aurora', 'spotlight', 'dots', 'mesh', 'beams', 'constellation'];

// "Alums of" marquee firms. To swap a wordmark for a real logo image later,
// add a `src` to that object (e.g. { name: 'Prudential', src: 'logos/prudential.svg' }).
// The render below shows an <img> when `src` is present, otherwise the Cormorant wordmark.
// `h` = per-logo render height in px. Logos have different aspect ratios and
// internal padding, so equal height looks unbalanced; tune each to match the
// visual weight of the wide Redwood Dev Co wordmark.
// Hero stat band. Three numeric proof points plus one qualitative item.
// Gold Cormorant figures, DM Mono small-caps labels. No vertical rules:
// the four cells sit as a calm, even row separated by generous spacing.
// The qualitative item carries a short metric-style figure ("End to end")
// in place of a numeral so the row of four reads as four deliberate callouts.
const HERO_STATS = [
  { figure: '$5.5 billion+', label: 'Workforce housing deals closed' },
  { figure: '4,000+', label: 'Units developed' },
  { figure: '22,000+', label: 'Low-income families served' },
  { figure: 'End to end', label: 'AI engineering expertise' },
];

const ALUMS = [
  { name: 'Teach For America', src: 'assets/logos/teach-for-america.png', h: 52 },
  { name: 'PGIM Real Estate', src: 'assets/logos/pgim-real-estate.png', h: 40 },
  { name: 'R4 Capital', src: 'assets/logos/r4-capital.png', h: 42 },
  { name: 'BridgeInvest', src: 'assets/logos/bridgeinvest.png', h: 44 },
  { name: 'Redwood Dev Co', src: 'assets/logos/redwood-devco.png', h: 30 },
];

const Hero = () => {
  const initial = (() => {
    try {
      const p = new URLSearchParams(window.location.search).get('hero');
      if (p && HERO_BGS.includes(p)) return p;
    } catch (e) {}
    return 'mesh';
  })();
  const [bg, setBg] = React.useState(initial);

  // Canvas particle network for the "constellation" background.
  React.useEffect(() => {
    if (bg !== 'constellation') return;
    const canvas = document.getElementById('mdai-constellation');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const DPR = Math.min(window.devicePixelRatio || 1, 2);
    let w = 0, h = 0, pts = [], raf = 0;
    const mouse = { x: -9999, y: -9999 };

    function resize() {
      w = canvas.clientWidth; h = canvas.clientHeight;
      canvas.width = w * DPR; canvas.height = h * DPR;
      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
    }
    function init() {
      const count = Math.max(40, Math.min(110, Math.floor((w * h) / 13000)));
      pts = Array.from({ length: count }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.55, vy: (Math.random() - 0.5) * 0.55,
        r: Math.random() * 1.7 + 0.8,
        coral: Math.random() < 0.12,
      }));
    }
    function frame() {
      ctx.clearRect(0, 0, w, h);
      for (const p of pts) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > w) p.vx *= -1;
        if (p.y < 0 || p.y > h) p.vy *= -1;
      }
      for (let i = 0; i < pts.length; i++) {
        for (let j = i + 1; j < pts.length; j++) {
          const a = pts[i], b = pts[j];
          const dx = a.x - b.x, dy = a.y - b.y, d = Math.hypot(dx, dy);
          if (d < 135) {
            ctx.strokeStyle = 'rgba(156,124,46,' + ((1 - d / 135) * 0.20).toFixed(3) + ')';
            ctx.lineWidth = 1;
            ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
          }
        }
      }
      for (const p of pts) {
        const dx = p.x - mouse.x, dy = p.y - mouse.y, d = Math.hypot(dx, dy);
        if (d < 180) {
          ctx.strokeStyle = 'rgba(201,168,76,' + ((1 - d / 180) * 0.45).toFixed(3) + ')';
          ctx.lineWidth = 1;
          ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
        }
      }
      for (const p of pts) {
        ctx.fillStyle = p.coral ? 'rgba(228,88,106,0.7)' : 'rgba(156,124,46,0.55)';
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
      }
      raf = requestAnimationFrame(frame);
    }
    function onMove(e) {
      const rect = canvas.getBoundingClientRect();
      mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top;
    }
    function onLeave() { mouse.x = -9999; mouse.y = -9999; }
    function onResize() { resize(); init(); }

    resize(); init();
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { frame(); cancelAnimationFrame(raf); }
    else frame();
    window.addEventListener('resize', onResize);
    canvas.addEventListener('mousemove', onMove);
    canvas.addEventListener('mouseleave', onLeave);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', onResize);
      canvas.removeEventListener('mousemove', onMove);
      canvas.removeEventListener('mouseleave', onLeave);
    };
  }, [bg]);

  return (
    <section style={heroStyles.wrap} className="mdai-hero">
      {/* ---- Background treatments ---- */}
      {bg === 'refined' && (
        <>
          <div style={heroStyles.glow} className="mdai-hero-glow" />
          <div style={heroStyles.grid} className="mdai-hero-grid" />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'aurora' && (
        <>
          <div className="mdai-aurora mdai-aurora-1" />
          <div className="mdai-aurora mdai-aurora-2" />
          <div className="mdai-aurora mdai-aurora-3" />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'spotlight' && (
        <>
          <div style={heroStyles.gridMasked} />
          <div className="mdai-spotlight" />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'dots' && (
        <>
          <div style={heroStyles.dotfield} className="mdai-dotfield" />
          <div className="mdai-dot-reveal" />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'mesh' && (
        <>
          <div className="mdai-mesh mdai-mesh-1" />
          <div className="mdai-mesh mdai-mesh-2" />
          <div className="mdai-mesh mdai-mesh-3" />
          <div className="mdai-mesh mdai-mesh-4" />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'beams' && (
        <>
          <div className="mdai-beams" />
          <div className="mdai-beam-sweep" />
          <div style={heroStyles.gridMasked} />
          <div style={heroStyles.noise} />
        </>
      )}
      {bg === 'constellation' && (
        <>
          <canvas id="mdai-constellation" style={heroStyles.canvas} />
          <div style={heroStyles.noise} />
        </>
      )}

      <div style={heroStyles.inner}>
        <div style={heroStyles.eyebrow}>Mission Driven AI</div>

        <h1 style={heroStyles.headline}>
          The AI partner for{' '}
          <span style={heroStyles.headlineEm} className="mdai-brush-word">
            <em style={heroStyles.headlineEmItalic}>mission-driven</em>
            <svg style={heroStyles.brush} className="mdai-brush" viewBox="0 0 320 30" preserveAspectRatio="none" aria-hidden="true">
              <defs>
                <filter id="mdai-rough" x="-10%" y="-40%" width="120%" height="180%">
                  <feTurbulence type="fractalNoise" baseFrequency="0.015 0.06" numOctaves="2" seed="7" result="n" />
                  <feDisplacementMap in="SourceGraphic" in2="n" scale="11" xChannelSelector="R" yChannelSelector="G" />
                </filter>
              </defs>
              <path filter="url(#mdai-rough)" fill="var(--gold)"
                d="M5,17 C70,9 150,7 225,11 C268,13 298,12.5 315,8.5 L317,16 C300,20.5 268,21 225,19 C150,16 70,17.5 8,24 Z" />
            </svg>
          </span>{' '}
          housing.
        </h1>

        <p style={heroStyles.lede}>
          We partner with mid-market and enterprise groups across the housing landscape to design, build, and deploy custom AI systems. From strategy to results, we own the work end to end.
        </p>

        <div style={heroStyles.statBand} className="mdai-hero-statband">
          {HERO_STATS.map((s) => (
            <div key={s.label} style={heroStyles.statCell} className="mdai-hero-statcell">
              <div style={heroStyles.statFigure}>{s.figure}</div>
              <div style={heroStyles.statLabel} className="mdai-hero-statlabel">{s.label}</div>
            </div>
          ))}
        </div>

        <div style={heroStyles.alumStrip}>
          <div style={heroStyles.alumLabel}>Built by alums of</div>
          <div style={heroStyles.alumMarquee} className="mdai-marquee">
            <div style={heroStyles.alumTrack} className="track">
              {/* Render the firm set twice so the translateX(-50%) loop is seamless. */}
              {[...ALUMS, ...ALUMS].map((item, i) => (
                <span key={item.name + '-' + i} style={heroStyles.alumItem}>
                  {item.src ? (
                    <img src={item.src} alt={item.name} style={{...heroStyles.alumLogo, height: item.h || 28}} className="mdai-alum-logo" />
                  ) : (
                    <span style={heroStyles.alumName} className="mdai-alum-name">{item.name}</span>
                  )}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div style={heroStyles.ctas}>
          <a href="get-in-touch.html" style={heroStyles.ctaPrimary}>
            Get in Touch
          </a>
        </div>
      </div>

      {/* Background is locked to mesh. The other treatments remain in code and
          can still be previewed via the ?hero=<name> URL param if needed. */}

      <style>{`
        /* ---- Paint-stroke underline (roughened SVG fill, reveals on load) ---- */
        .mdai-brush-word { position: relative; display: inline-block; }
        .mdai-brush {
          position: absolute;
          left: -2%; right: -2%;
          bottom: -0.16em;
          width: 104%;
          height: 0.30em;
          overflow: visible;
          pointer-events: none;
          clip-path: inset(0 100% 0 0);
          animation: mdai-paint 0.85s cubic-bezier(0.45, 0, 0.25, 1) 0.5s forwards;
        }
        @keyframes mdai-paint { to { clip-path: inset(0 -4% 0 0); } }

        /* ---- refined: glow breathe + grid drift ---- */
        @keyframes mdai-glow-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
        @keyframes mdai-grid-drift   { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
        .mdai-hero-glow { animation: mdai-glow-breathe 9s cubic-bezier(0.4,0,0.6,1) infinite; }
        .mdai-hero-grid { animation: mdai-grid-drift 40s linear infinite; }

        /* ---- aurora: drifting blurred color blobs ---- */
        .mdai-aurora {
          position: absolute; z-index: 1; pointer-events: none;
          border-radius: 50%; filter: blur(72px); opacity: 0.55; will-change: transform;
        }
        .mdai-aurora-1 { width: 52vw; height: 52vw; top: -14vw; right: -6vw;
          background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.45), transparent 65%);
          animation: mdai-drift-1 22s ease-in-out infinite alternate; }
        .mdai-aurora-2 { width: 40vw; height: 40vw; bottom: -12vw; left: -8vw;
          background: radial-gradient(circle at 50% 50%, rgba(228,88,106,0.28), transparent 65%);
          animation: mdai-drift-2 28s ease-in-out infinite alternate; }
        .mdai-aurora-3 { width: 34vw; height: 34vw; top: 24%; left: 42%;
          background: radial-gradient(circle at 50% 50%, rgba(232,213,163,0.40), transparent 60%);
          animation: mdai-drift-3 25s ease-in-out infinite alternate; }
        @keyframes mdai-drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-6vw,5vw) scale(1.15); } }
        @keyframes mdai-drift-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(7vw,-4vw) scale(1.12); } }
        @keyframes mdai-drift-3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-5vw,-6vw) scale(1.2); } }

        /* ---- spotlight: sweeping soft light over a faded grid ---- */
        .mdai-spotlight {
          position: absolute; inset: 0; z-index: 1; pointer-events: none;
          background: radial-gradient(38% 50% at 50% 40%, rgba(201,168,76,0.30), rgba(228,88,106,0.05) 45%, transparent 70%);
          animation: mdai-sweep 16s ease-in-out infinite alternate; will-change: transform, opacity;
        }
        @keyframes mdai-sweep {
          0%   { transform: translate(-22%, -10%) scale(1);   opacity: 0.8; }
          50%  { transform: translate(10%, 4%) scale(1.25);   opacity: 1;   }
          100% { transform: translate(26%, -6%) scale(1.1);   opacity: 0.85; }
        }

        /* ---- dots: animated dot-matrix with a pulsing reveal ---- */
        .mdai-dotfield { animation: mdai-grid-drift 60s linear infinite; }
        .mdai-dot-reveal {
          position: absolute; inset: 0; z-index: 2; pointer-events: none;
          background: radial-gradient(30% 40% at 70% 28%, rgba(201,168,76,0.16), transparent 70%);
          animation: mdai-glow-breathe 11s ease-in-out infinite;
        }

        /* ---- mesh: independent blurred blobs, faster + more saturated ---- */
        .mdai-mesh {
          position: absolute; z-index: 1; pointer-events: none;
          border-radius: 50%; filter: blur(58px); will-change: transform; opacity: 0.7;
        }
        .mdai-mesh-1 { width: 38vw; height: 38vw; top: -6vw; left: 8vw;
          background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.55), transparent 62%);
          animation: mdai-mesh-1 13s ease-in-out infinite alternate; }
        .mdai-mesh-2 { width: 34vw; height: 34vw; top: 6vw; right: 6vw;
          background: radial-gradient(circle at 50% 50%, rgba(228,88,106,0.34), transparent 62%);
          animation: mdai-mesh-2 11s ease-in-out infinite alternate; }
        .mdai-mesh-3 { width: 42vw; height: 42vw; bottom: -12vw; left: 26vw;
          background: radial-gradient(circle at 50% 50%, rgba(232,213,163,0.55), transparent 60%);
          animation: mdai-mesh-3 15s ease-in-out infinite alternate; }
        .mdai-mesh-4 { width: 28vw; height: 28vw; bottom: 2vw; right: 22vw;
          background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.40), transparent 60%);
          animation: mdai-mesh-4 9s ease-in-out infinite alternate; }
        @keyframes mdai-mesh-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,6vw) scale(1.25) rotate(20deg); } }
        @keyframes mdai-mesh-2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-7vw,8vw) scale(0.9) rotate(-15deg); } }
        @keyframes mdai-mesh-3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(6vw,-7vw) scale(1.2) rotate(12deg); } }
        @keyframes mdai-mesh-4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-9vw,-5vw) scale(1.3); } }

        /* ---- beams: sweeping diagonal light columns ---- */
        .mdai-beams {
          position: absolute; inset: -25%; z-index: 1; pointer-events: none;
          background: repeating-linear-gradient(112deg,
            transparent 0px, transparent 78px,
            rgba(201,168,76,0.07) 78px, rgba(201,168,76,0.07) 80px,
            transparent 80px, transparent 168px);
          animation: mdai-beams-move 14s linear infinite; will-change: transform;
        }
        @keyframes mdai-beams-move { from { transform: translateX(0); } to { transform: translateX(168px); } }
        .mdai-beam-sweep {
          position: absolute; inset: -25%; z-index: 1; pointer-events: none;
          background: linear-gradient(112deg, transparent 35%, rgba(228,88,106,0.10) 48%, rgba(201,168,76,0.16) 52%, transparent 66%);
          animation: mdai-beam-sweep 9s ease-in-out infinite; will-change: transform, opacity;
        }
        @keyframes mdai-beam-sweep {
          0% { transform: translateX(-40%); opacity: 0.4; }
          50% { transform: translateX(20%); opacity: 1; }
          100% { transform: translateX(60%); opacity: 0.4; }
        }

        /* ---- hero stat band: no rules, even row of four held by spacing ---- */
        @media (max-width: 720px) {
          .mdai-hero-statband {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            column-gap: 32px !important; row-gap: 28px !important;
          }
        }
        /* Dark mode: ink ground dims the muted label color, so lift labels
           to the soft-gold token for legibility. Gold figures already read. */
        [data-theme="dark"] .mdai-hero-statcell .mdai-hero-statlabel {
          color: var(--fg-accent-soft);
        }

        /* ---- alums-of logo marquee ---- */
        .mdai-marquee .track {
          animation: mdai-marquee 28s linear infinite;
        }
        .mdai-marquee:hover .track { animation-play-state: paused; }
        @keyframes mdai-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .mdai-alum-name:hover { opacity: 1 !important; color: var(--fg-1); }
        .mdai-alum-logo:hover { opacity: 1 !important; }

        /* Dark mode only: the grayscale logos are dark and nearly vanish on the
           ink background, so give each one a light paper underlay plate. */
        [data-theme="dark"] .mdai-alum-logo {
          background: rgba(245, 243, 238, 0.94);
          padding: 7px 14px;
          border-radius: 4px;
          opacity: 0.95;
        }
        [data-theme="dark"] .mdai-alum-logo:hover { opacity: 1 !important; }

        @media (prefers-reduced-motion: reduce) {
          .mdai-brush { animation: none; clip-path: inset(0 -4% 0 0); }
          .mdai-hero-glow, .mdai-hero-grid, .mdai-aurora, .mdai-spotlight,
          .mdai-dotfield, .mdai-dot-reveal, .mdai-mesh, .mdai-beams,
          .mdai-beam-sweep, .mdai-marquee .track { animation: none; }
        }
      `}</style>
    </section>
  );
};

const heroStyles = {
  wrap: {
    position: 'relative', minHeight: '100vh',
    background: 'var(--bg)', overflow: 'hidden',
    display: 'flex', alignItems: 'center',
  },
  glow: {
    position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
    background:
      'radial-gradient(55% 45% at 78% 22%, rgba(201,168,76,0.20), transparent 70%),' +
      'radial-gradient(38% 38% at 12% 80%, rgba(228,88,106,0.06), transparent 75%)',
  },
  grid: {
    position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
    backgroundImage:
      'linear-gradient(rgba(10,10,15,0.05) 1px, transparent 1px),' +
      'linear-gradient(90deg, rgba(10,10,15,0.05) 1px, transparent 1px)',
    backgroundSize: '60px 60px',
  },
  gridMasked: {
    position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
    backgroundImage:
      'linear-gradient(rgba(10,10,15,0.06) 1px, transparent 1px),' +
      'linear-gradient(90deg, rgba(10,10,15,0.06) 1px, transparent 1px)',
    backgroundSize: '60px 60px',
    WebkitMaskImage: 'radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%)',
    maskImage: 'radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%)',
  },
  dotfield: {
    position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
    backgroundImage: 'radial-gradient(rgba(10,10,15,0.12) 1.4px, transparent 1.4px)',
    backgroundSize: '26px 26px',
    WebkitMaskImage: 'radial-gradient(75% 75% at 50% 38%, #000 35%, transparent 85%)',
    maskImage: 'radial-gradient(75% 75% at 50% 38%, #000 35%, transparent 85%)',
  },
  canvas: {
    position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'auto',
    width: '100%', height: '100%',
  },
  noise: {
    position: 'absolute', inset: 0, zIndex: 3, pointerEvents: 'none',
    opacity: 0.4, mixBlendMode: 'multiply',
    backgroundImage:
      "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.04 0 0 0 0 0.06 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
  },
  inner: {
    position: 'relative', zIndex: 5,
    maxWidth: 1240, margin: '0 auto', padding: '160px 32px 96px',
    width: '100%', boxSizing: 'border-box',
  },
  eyebrow: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-accent)', marginBottom: 36,
  },
  headline: {
    fontFamily: 'var(--font-display)', fontWeight: 500,
    fontSize: 'clamp(56px, 7.2vw, 104px)', lineHeight: 0.98,
    letterSpacing: '-0.02em', color: 'var(--fg-1)',
    margin: '0 0 32px', maxWidth: 1100, textWrap: 'balance',
  },
  headlineEm: { display: 'inline-block' },
  headlineEmItalic: { color: 'var(--fg-accent)', fontStyle: 'italic', fontWeight: 500 },
  brush: {},
  lede: {
    fontSize: 19, lineHeight: 1.6, color: 'var(--fg-2)',
    maxWidth: 760, margin: '0 0 56px', textWrap: 'pretty',
  },
  statBand: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
    columnGap: 48, rowGap: 28,
    margin: '0 0 56px', maxWidth: 940,
  },
  statCell: {
    padding: 0,
  },
  statFigure: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(34px, 3.6vw, 50px)',
    lineHeight: 1, letterSpacing: '-0.02em',
    color: 'var(--fg-accent)', fontWeight: 500,
    whiteSpace: 'nowrap',
  },
  statLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--fg-2)', marginTop: 14, lineHeight: 1.5,
  },
  alumStrip: {
    borderTop: '1px solid var(--border-gold)',
    borderBottom: '1px solid var(--border-gold)',
    padding: '20px 0', margin: '0 0 48px',
    display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap',
  },
  alumLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-accent)', whiteSpace: 'nowrap',
  },
  alumMarquee: {
    flex: 1, minWidth: 0, overflow: 'hidden',
    WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%)',
    maskImage: 'linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%)',
  },
  alumTrack: {
    display: 'flex', alignItems: 'center', width: 'max-content',
    willChange: 'transform',
  },
  alumItem: {
    display: 'inline-flex', alignItems: 'center', padding: '0 28px',
  },
  alumName: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic',
    fontSize: 22, fontWeight: 500, lineHeight: 1,
    color: 'var(--fg-1)', opacity: 0.7, whiteSpace: 'nowrap',
    transition: 'color 160ms cubic-bezier(0.22,0.61,0.36,1), opacity 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
  alumLogo: {
    height: 28, width: 'auto', display: 'block',
    filter: 'grayscale(1)', opacity: 0.6,
    transition: 'opacity 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
  ctas: { display: 'flex', gap: 16, flexWrap: 'wrap' },
  ctaPrimary: {
    background: 'var(--gold)', color: 'var(--ink)',
    padding: '18px 28px', borderRadius: 4,
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em',
    textTransform: 'uppercase', textDecoration: 'none', border: 0, fontWeight: 500,
    transition: 'background 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
  selector: {
    position: 'fixed', left: 18, bottom: 18, zIndex: 60,
    display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', maxWidth: '90vw',
    background: 'rgba(245,243,238,0.85)',
    backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
    border: '1px solid var(--border-gold)', borderRadius: 6, padding: '7px 9px',
  },
  selectorLabel: {
    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: 'var(--fg-accent)', marginRight: 4,
  },
  selectorBtn: {
    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em',
    textTransform: 'uppercase', color: 'var(--fg-1)',
    background: 'transparent', border: '1px solid transparent',
    borderRadius: 4, padding: '5px 8px', cursor: 'pointer',
    transition: 'all 160ms cubic-bezier(0.22,0.61,0.36,1)',
  },
  selectorBtnActive: { background: 'var(--gold)', color: 'var(--ink)', fontWeight: 500 },
};

Object.assign(window, { Hero });