// site-atoms-q.jsx — quirky palette, type system, shared primitives.
// Skin: alertmouse + gamma + clerk + arc lineage. Dark-on-eggshell, warm.

const QPAGE = {
  palette: {
    bg: '#FBF6EC',          // eggshell primary
    bgSoft: '#F4ECD8',      // ticket/tape warm
    paper: '#FFFFFF',       // sticker notes / cards
    ink: '#141211',         // near-black warm
    inkSoft: '#4A4640',
    muted: '#86807A',
    hair: 'rgba(20,18,17,0.10)',
    hairStrong: 'rgba(20,18,17,0.22)',

    // Quirky accent set
    accent: '#FF5B3A',      // cheddar-coral (alertmouse × arc)
    accentDeep: '#E04318',
    accent2: '#2F6F4F',     // moss (grounding)
    pop: '#FFDD4A',         // highlighter yellow
    pink: '#FF6FB2',        // marginalia pink (very sparing)
    blue: '#2F6FE0',        // link-blue

    // Inverted blocks
    deep: '#17150F',
    deepInk: '#F5EFE2',
    deepHair: 'rgba(245,239,226,0.10)',
  },
  fonts: {
    // Editorial italic serif — for "quirk words" and big display italics
    display: '"Instrument Serif", Georgia, serif',
    // Tight modern sans — for headlines (gamma / alertmouse / clay lineage)
    displaySans: '"Instrument Sans", "Inter", -apple-system, system-ui, sans-serif',
    // Body neutral — everything else
    body: '"Inter", -apple-system, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
    hand: '"Caveat", "Kalam", cursive',
  },
};

// Inject global grain + ambient styles once
if (typeof document !== 'undefined' && !document.getElementById('qgrain-style')) {
  const s = document.createElement('style');
  s.id = 'qgrain-style';
  s.textContent = `
    body { background: ${QPAGE.palette.bg}; }
    body::before {
      content: '';
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0.35;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      background-size: 260px 260px;
    }
    .q-grain-card::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
      opacity: 0.22; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    .q-squiggle path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawLine 1.2s 0.4s cubic-bezier(.22,1,.36,1) forwards; --len: 600; }
  `;
  document.head.appendChild(s);
}

const Q_p = QPAGE.palette;
const Q_f = QPAGE.fonts;

// Reveal — always-visible container; animation handled by children when desired.
function QReveal({ children, style = {}, ...rest }) {
  const { delay, className, ...clean } = rest;
  return <div style={style} {...clean}>{children}</div>;
}

// Motion-el bridge (race-safe)
function qUseMotionEl(tag) {
  const [El, setEl] = React.useState(() =>
    (window.Motion && window.Motion.motion && window.Motion.motion[tag]) || tag
  );
  React.useEffect(() => {
    if (El !== tag) return;
    const upgrade = () => {
      if (window.Motion && window.Motion.motion && window.Motion.motion[tag]) {
        setEl(() => window.Motion.motion[tag]);
      }
    };
    window.addEventListener('motion-ready', upgrade);
    const id = setTimeout(upgrade, 80);
    return () => { window.removeEventListener('motion-ready', upgrade); clearTimeout(id); };
  }, [El, tag]);
  return El;
}

// Mouse parallax
function qUseParallax(intensity = 10) {
  const ref = React.useRef(null);
  const [off, setOff] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / (window.innerWidth / 2);
      const dy = (e.clientY - cy) / (window.innerHeight / 2);
      setOff({ x: dx * intensity, y: dy * intensity });
    };
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, [intensity]);
  return [ref, off];
}

// ── Cursor-follow orb (Linear-method, warmed up) ─────────
function QOrb() {
  const ref = React.useRef(null);
  const target = React.useRef({ x: 0, y: 0 });
  const pos = React.useRef({ x: 0, y: 0 });
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const onMove = (e) => { target.current = { x: e.clientX, y: e.clientY }; };
    window.addEventListener('pointermove', onMove);
    let raf;
    const tick = () => {
      pos.current.x += (target.current.x - pos.current.x) * 0.08;
      pos.current.y += (target.current.y - pos.current.y) * 0.08;
      if (ref.current) {
        ref.current.style.transform = `translate3d(${pos.current.x - 240}px, ${pos.current.y - 240}px, 0)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener('pointermove', onMove); cancelAnimationFrame(raf); };
  }, []);
  return (
    <div ref={ref} style={{
      position: 'fixed', top: 0, left: 0, width: 480, height: 480,
      borderRadius: '50%', pointerEvents: 'none', zIndex: 0,
      background: `radial-gradient(circle, ${Q_p.accent}22 0%, ${Q_p.accent}11 35%, transparent 70%)`,
      filter: 'blur(24px)', willChange: 'transform', mixBlendMode: 'multiply',
    }} />
  );
}

// ── SectionLabel — terminal-chip label "[ 02 · WORKFLOWS ]"
function QSectionLabel({ n, text, color }) {
  const col = color || Q_p.accent;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '5px 11px 5px 10px',
      border: `1px dashed ${col}`, borderRadius: 4,
      fontFamily: Q_f.mono, fontSize: 11, color: col,
      letterSpacing: '0.16em', textTransform: 'uppercase',
      background: 'rgba(255,255,255,0.5)',
    }}>
      <span style={{ opacity: 0.6 }}>[</span>
      {n && <span style={{ fontWeight: 500 }}>{String(n).padStart(2, '0')}</span>}
      {n && <span style={{ opacity: 0.6 }}>·</span>}
      <span>{text}</span>
      <span style={{ opacity: 0.6 }}>]</span>
    </div>
  );
}

// ── Squiggle underline (hand-drawn, under any inline span)
function QSquiggle({ color, width = '100%', height = 10, variant = 'wave' }) {
  const c = color || Q_p.pop;
  const PATHS = {
    wave: 'M 4 6 C 40 1, 80 10, 120 5 T 240 6 T 360 5 T 480 6 T 560 5',
    under: 'M 4 6 C 80 2, 160 9, 260 5 T 500 6',
    zig: 'M 4 6 L 40 2 L 80 9 L 120 2 L 160 9 L 200 2 L 240 9 L 280 2 L 320 9 L 360 2 L 400 9 L 440 2 L 480 9 L 520 2 L 560 9',
  };
  return (
    <svg className="q-squiggle" viewBox="0 0 570 12" preserveAspectRatio="none" aria-hidden="true" style={{
      position: 'absolute', left: 0, right: 0, bottom: '-0.18em',
      width, height: `${height}px`, overflow: 'visible', pointerEvents: 'none', zIndex: 0,
    }}>
      <path d={PATHS[variant]} fill="none" stroke={c} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

// Inline: wraps children with the squiggle underline behind text
function QUnderline({ children, color, variant }) {
  return (
    <span style={{ position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
      <span style={{ position: 'relative', zIndex: 1 }}>{children}</span>
      <QSquiggle color={color} variant={variant} />
    </span>
  );
}

// ── Sticker note — rotated yellow sticky, positioned absolute
function QSticker({ children, rotate = -3, color, top, left, right, bottom, maxWidth = 200 }) {
  const bg = color || Q_p.pop;
  return (
    <div className="sticker-note" style={{
      position: 'absolute', top, left, right, bottom,
      maxWidth, padding: '12px 14px 14px',
      background: bg, color: Q_p.ink,
      transform: `rotate(${rotate}deg)`,
      boxShadow: '0 8px 24px rgba(20,18,17,0.18), 0 2px 4px rgba(20,18,17,0.12)',
      fontFamily: Q_f.body, fontSize: 13, lineHeight: 1.38, fontWeight: 500,
      zIndex: 4, pointerEvents: 'none',
      clipPath: 'polygon(0% 0%, 100% 0%, 100% 92%, 96% 100%, 0% 100%)',
    }}>
      {/* "Tape" at top */}
      <div style={{
        position: 'absolute', top: -10, left: '50%',
        transform: 'translateX(-50%) rotate(-2deg)',
        width: 54, height: 16,
        background: 'rgba(255,255,255,0.55)',
        border: '1px dashed rgba(20,18,17,0.2)',
      }} />
      {children}
    </div>
  );
}

// ── Inline chip (small, for labels like "LIVE")
function QChip({ children, color, bg, dashed }) {
  const c = color || Q_p.accent;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 8px', borderRadius: 3,
      border: `1px ${dashed ? 'dashed' : 'solid'} ${c}`,
      background: bg || 'transparent',
      fontFamily: Q_f.mono, fontSize: 10, fontWeight: 500, color: c,
      letterSpacing: '0.1em', textTransform: 'uppercase',
    }}>{children}</span>
  );
}

// ── Quirky polaroid — tilted window-chrome screenshot w/ caption strip
function QPolaroid({ src, caption, meta, rotate = -1.5, onOpen, accent, aspect = '4/3', variant = 'window' }) {
  const [hover, setHover] = React.useState(false);
  const acc = accent || Q_p.accent;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => onOpen && onOpen(src, caption)}
      style={{
        position: 'relative', display: 'inline-block', width: '100%',
        transform: `rotate(${hover ? rotate * 0.3 : rotate}deg) translateY(${hover ? '-4px' : '0'})`,
        transition: 'transform 450ms cubic-bezier(0.22, 1, 0.36, 1)',
        cursor: onOpen ? 'zoom-in' : 'default',
        filter: `drop-shadow(0 30px 40px ${acc}33) drop-shadow(0 6px 12px rgba(20,18,17,0.18))`,
      }}>
      <div style={{
        background: Q_p.paper,
        padding: variant === 'polaroid' ? '12px 12px 52px' : 0,
        borderRadius: variant === 'polaroid' ? 3 : 8,
        overflow: 'hidden', position: 'relative',
        border: `1px solid ${Q_p.hair}`,
      }}>
        {variant === 'window' && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '9px 12px',
            background: Q_p.bgSoft, borderBottom: `1px solid ${Q_p.hair}`,
          }}>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F56' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FFBD2E' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#27C93F' }} />
            {meta && (
              <span style={{
                marginLeft: 10, fontFamily: Q_f.mono, fontSize: 10,
                color: Q_p.muted, letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>{meta}</span>
            )}
          </div>
        )}
        <div style={{
          position: 'relative', width: '100%', aspectRatio: aspect,
          overflow: 'hidden', background: Q_p.bgSoft,
        }} className="q-grain-card">
          <img src={src} alt={caption || ''} style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            transform: hover ? 'scale(1.05)' : 'scale(1.01)',
            transition: 'transform 900ms cubic-bezier(0.22, 1, 0.36, 1)',
          }} />
          {variant !== 'window' && meta && (
            <span style={{
              position: 'absolute', top: 10, left: 10,
              padding: '3px 8px', background: Q_p.ink, color: Q_p.deepInk,
              fontFamily: Q_f.mono, fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
              borderRadius: 2,
            }}>{meta}</span>
          )}
        </div>
        {variant === 'polaroid' && caption && (
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0,
            padding: '12px 14px',
            fontFamily: Q_f.display, fontStyle: 'italic', fontSize: 14,
            color: Q_p.inkSoft, lineHeight: 1.3, textAlign: 'center',
          }}>{caption}</div>
        )}
      </div>
      {onOpen && (
        <div style={{
          position: 'absolute', bottom: 14, right: 14,
          width: 30, height: 30, borderRadius: 15,
          background: 'rgba(255,255,255,0.94)', color: Q_p.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          opacity: hover ? 1 : 0, transform: hover ? 'scale(1)' : 'scale(0.85)',
          transition: 'opacity 220ms, transform 220ms',
          border: `1px solid ${Q_p.hair}`,
        }}>
          <svg width="12" height="12" viewBox="0 0 14 14"><path d="M2 2L12 2L12 5M12 12L2 12L2 9M2 2L6 6M12 12L8 8" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" /></svg>
        </div>
      )}
    </div>
  );
}

// ── QGallery — rotating polaroid carousel with quirky chrome
function QGallery({ photos = [], onOpen, auto = true, aspect = '16/9', variant = 'window' }) {
  const [idx, setIdx] = React.useState(0);
  const [hover, setHover] = React.useState(false);
  const n = photos.length;

  React.useEffect(() => {
    if (!auto || n < 2 || hover) return;
    const t = setTimeout(() => setIdx((i) => (i + 1) % n), 4800);
    return () => clearTimeout(t);
  }, [idx, hover, n, auto]);

  if (n === 0) return null;
  if (n === 1) {
    return <QPolaroid {...photos[0]} aspect={aspect} variant={variant} onOpen={onOpen} rotate={photos[0].rotate ?? -1} />;
  }

  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: aspect, overflow: 'visible' }}>
        {photos.map((ph, i) => {
          const rel = (i - idx + n) % n;
          const active = rel === 0;
          const rotSeed = [(i * 13) % 5 - 2, (i * 7) % 4 - 1.5, (i * 11) % 6 - 3][i % 3];
          return (
            <div key={i} style={{
              position: 'absolute', inset: 0,
              opacity: active ? 1 : 0,
              transform: active ? 'translateY(0)' : 'translateY(10px)',
              transition: 'opacity 600ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1)',
              pointerEvents: active ? 'auto' : 'none',
            }}>
              <QPolaroid
                src={ph.src}
                caption={ph.caption}
                meta={ph.meta}
                rotate={ph.rotate ?? rotSeed}
                onOpen={onOpen}
                accent={ph.accent}
                aspect={aspect}
                variant={variant}
              />
            </div>
          );
        })}
        {/* Counter */}
        <div style={{
          position: 'absolute', top: -14, right: -6, zIndex: 6,
          padding: '4px 10px', background: Q_p.ink, color: Q_p.deepInk,
          fontFamily: Q_f.mono, fontSize: 10, letterSpacing: '0.16em',
          transform: 'rotate(3deg)',
          fontVariantNumeric: 'tabular-nums',
        }}>{String(idx + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}</div>
      </div>
      {/* Dots */}
      <div style={{ display: 'flex', gap: 6, marginTop: 20, justifyContent: 'center' }}>
        {photos.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={`slide ${i + 1}`} style={{
            width: i === idx ? 30 : 10, height: 10, borderRadius: 5,
            background: i === idx ? Q_p.accent : Q_p.hair,
            border: 'none', padding: 0, cursor: 'pointer',
            transition: 'width 280ms, background 280ms',
          }} />
        ))}
      </div>
    </div>
  );
}

// ── BigNum — tabular display number
function QBigNum({ n, label, unit, color }) {
  return (
    <div>
      <div style={{
        fontFamily: Q_f.display, fontSize: 'clamp(48px, 6vw, 76px)', fontWeight: 400,
        color: color || Q_p.ink, letterSpacing: '-0.03em', lineHeight: 1,
        fontVariantNumeric: 'tabular-nums', display: 'flex', alignItems: 'baseline', gap: 4,
      }}>
        <span>{n}</span>
        {unit && <span style={{ fontSize: '0.4em', color: Q_p.muted, fontStyle: 'italic' }}>{unit}</span>}
      </div>
      <div style={{
        fontFamily: Q_f.mono, fontSize: 11, fontWeight: 500,
        letterSpacing: '0.14em', textTransform: 'uppercase',
        color: Q_p.muted, marginTop: 10,
      }}>{label}</div>
    </div>
  );
}

// ── Brand logo chip (reused from original)
function QBrandLogo({ name }) {
  const wrap = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '7px 14px', borderRadius: 22,
    background: Q_p.paper, border: `1px solid ${Q_p.hair}`,
    boxShadow: '0 2px 6px rgba(20,18,17,0.06)',
  };
  const label = { fontFamily: Q_f.mono, fontSize: 10, color: Q_p.ink, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 };
  const logos = {
    clay: (<>
      <svg width="20" height="20" viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="17" fill={Q_p.accent} />
        <path d="M13 16 Q 20 8 27 16 Q 32 22 27 27 Q 20 32 13 27 Q 8 22 13 16 Z" fill="#FFF" />
      </svg>
      <span style={label}>Clay</span>
    </>),
    funstein: (<>
      <svg width="22" height="22" viewBox="0 0 40 40" fill="none">
        <rect x="4" y="4" width="32" height="32" rx="10" fill={Q_p.accent2} />
        <path d="M 30 11 L 10 19 L 18 22 L 30 11 Z" fill={Q_p.pop} />
        <path d="M 18 22 L 30 11 L 22 29 L 18 22 Z" fill="#F4C79C" />
      </svg>
      <span style={label}>Funstein · Surat</span>
    </>),
    cpoc: (<>
      <svg width="22" height="22" viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="17" fill={Q_p.accent2} />
        <circle cx="20" cy="20" r="11" stroke={Q_p.pop} strokeWidth="1.6" fill="none" />
        <ellipse cx="20" cy="20" rx="4.5" ry="11" stroke={Q_p.pop} strokeWidth="1.4" fill="none" />
        <path d="M 9 20 L 31 20" stroke={Q_p.pop} strokeWidth="1.4" />
      </svg>
      <span style={label}>CPOC · Cambodia</span>
    </>),
    ielts24: (<>
      <svg width="22" height="22" viewBox="0 0 40 40" fill="none">
        <rect x="4" y="4" width="32" height="32" rx="6" fill={Q_p.ink} />
        <text x="20" y="19" textAnchor="middle" fontFamily="monospace" fontSize="9" fontWeight="700" fill={Q_p.pop}>IELTS</text>
        <text x="20" y="30" textAnchor="middle" fontFamily="monospace" fontSize="10" fontWeight="700" fill={Q_p.pop}>24</text>
      </svg>
      <span style={label}>IELTS24</span>
    </>),
  };
  return <div style={wrap}>{logos[name] || null}</div>;
}

// ── Divider — zig-zag drawn line with center pop
function QDivider() {
  return (
    <div style={{ margin: '110px 0', position: 'relative', display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'center' }}>
      <div style={{ flex: 1, height: 1, background: Q_p.hair }} />
      <svg width="42" height="14" viewBox="0 0 42 14" style={{ color: Q_p.accent }}>
        <path d="M 1 7 L 8 2 L 15 12 L 22 2 L 29 12 L 36 2 L 41 7" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div style={{ flex: 1, height: 1, background: Q_p.hair }} />
    </div>
  );
}

// ── Lightbox
function QLightbox({ src, caption, onClose }) {
  React.useEffect(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);
  if (!src) return null;
  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 500,
      background: 'rgba(20,18,17,0.92)', backdropFilter: 'blur(12px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 40, cursor: 'zoom-out', animation: 'fadeIn 200ms ease-out',
    }}>
      <div style={{ maxWidth: '90vw', maxHeight: '90vh', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <img src={src} style={{ maxWidth: '100%', maxHeight: '80vh', objectFit: 'contain', borderRadius: 4 }} />
        {caption && <div style={{ fontFamily: Q_f.display, fontSize: 16, fontStyle: 'italic', color: Q_p.deepInk, textAlign: 'center' }}>{caption}</div>}
      </div>
      <button onClick={onClose} style={{
        position: 'absolute', top: 20, right: 20, width: 36, height: 36,
        borderRadius: 18, border: `1px solid ${Q_p.deepHair}`,
        background: 'rgba(20,18,17,0.4)', color: Q_p.deepInk, cursor: 'pointer',
        fontSize: 18, lineHeight: 1,
      }}>×</button>
    </div>, document.body
  );
}

// ── Sticky Resume Button (quirky) — hidden at top, subtle on scroll,
//   upgrades to filled state on hover.
function QResumeButton() {
  const [hover, setHover] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 480);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const bg = hover ? Q_p.ink : 'rgba(255, 246, 220, 0.72)';
  const fg = hover ? Q_p.pop : Q_p.inkSoft;
  const border = hover ? Q_p.ink : 'rgba(20,18,17,0.18)';

  return (
    <a href="akash-radadiya-resume-v3.pdf" download="akash-radadiya-resume.pdf"
      aria-hidden={!visible}
      tabIndex={visible ? 0 : -1}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed', top: 78, right: 24, zIndex: 9999,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '8px 14px 8px 12px', borderRadius: 3,
        background: bg, color: fg, textDecoration: 'none',
        fontFamily: Q_f.mono, fontSize: 11, fontWeight: 500,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        border: `1px solid ${border}`,
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        boxShadow: hover ? `3px 3px 0 ${Q_p.accent}` : '0 6px 16px rgba(20,18,17,0.08)',
        transform: visible
          ? (hover ? 'translate(-1px, -1px)' : 'translate(0, 0)')
          : 'translateY(-12px)',
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'opacity 260ms cubic-bezier(.22,1,.36,1), transform 260ms cubic-bezier(.22,1,.36,1), background 180ms, color 180ms, box-shadow 180ms, border-color 180ms',
      }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
        <polyline points="14 2 14 8 20 8"/>
        <line x1="12" y1="18" x2="12" y2="12"/>
        <polyline points="9 15 12 18 15 15"/>
      </svg>
      <span>resume</span>
    </a>
  );
}

Object.assign(window, {
  QPAGE, QReveal, qUseMotionEl, qUseParallax,
  QOrb, QSectionLabel, QSquiggle, QUnderline, QSticker, QChip,
  QPolaroid, QGallery, QBigNum, QBrandLogo, QDivider,
  QLightbox, QResumeButton,
});