// atmosphere.jsx · Forja Lendár[IA] — tokens, fundo, brasas, divisa, helpers de texto
// Exporta tudo para window (escopo separado por <script type="text/babel">).

const FORJA = {
  preto:   '#131109',
  preto2:  '#1B1810',
  preto3:  '#221E14',
  bege:    '#E8DCC4',
  amarelo: '#F6C324',
  vermelho:'#E63946',
  bronze:  '#9A7D56',
  bronzeC: '#A88A5C',
  brasa:   '#8B0000',
  cinzas:  '#4A453E',

  monumental: "'Archivo Black', 'Arial Black', sans-serif",
  sagrada:    "'Cinzel', 'Trajan Pro', serif",
  operacional:"'EB Garamond', Georgia, serif",

  glowAmber: '0 0 48px rgba(246,195,36,0.45), 0 0 14px rgba(246,195,36,0.40)',
  glowAmberSoft: '0 0 30px rgba(246,195,36,0.30)',
  glowRed:   '0 0 40px rgba(230,57,70,0.40), 0 0 12px rgba(139,0,0,0.5)',
  glowBege:  '0 0 26px rgba(232,220,196,0.18)',
};

// ── Fundo atmosférico · ferro bruto com brasa interna ───────────────────────
function Background() {
  const t = useTime();
  // respiração lenta do clarão central da forja
  const breath = 0.5 + 0.5 * Math.sin(t * 0.5);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: FORJA.preto }}>
      {/* estratos de profundidade */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(120% 80% at 50% 18%, ${FORJA.preto3} 0%, ${FORJA.preto2} 38%, ${FORJA.preto} 72%)`,
      }} />
      {/* clarão de forja na base */}
      <div style={{
        position: 'absolute', left: '50%', bottom: '-360px', width: 1500, height: 900,
        transform: 'translateX(-50%)',
        background: `radial-gradient(ellipse at center, rgba(139,0,0,${0.22 + breath * 0.12}) 0%, rgba(139,0,0,0.06) 40%, transparent 70%)`,
        filter: 'blur(8px)',
      }} />
      {/* faísca quente alta */}
      <div style={{
        position: 'absolute', left: '50%', top: '-200px', width: 1100, height: 700,
        transform: 'translateX(-50%)',
        background: `radial-gradient(ellipse at center, rgba(246,195,36,${0.05 + breath * 0.03}) 0%, transparent 65%)`,
      }} />
      {/* textura sutil de fibra/ferro */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.05, mixBlendMode: 'overlay',
        backgroundImage: 'repeating-linear-gradient(96deg, rgba(232,220,196,0.5) 0 1px, transparent 1px 3px)',
      }} />
    </div>
  );
}

// ── Vinheta de fechamento (sempre por cima) ─────────────────────────────────
function Vignette() {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      boxShadow: 'inset 0 0 320px 90px rgba(8,6,2,0.92)',
      background: 'radial-gradient(130% 100% at 50% 50%, transparent 56%, rgba(8,6,2,0.55) 100%)',
    }} />
  );
}

// ── Campo de brasas (CSS contínuo) ──────────────────────────────────────────
function Embers({ count = 28 }) {
  const embers = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < count; i++) {
      const r1 = (i * 73 + 17) % 100;
      const r2 = (i * 137 + 41) % 100;
      const r3 = (i * 211 + 7) % 100;
      const red = i % 3 === 0;
      const size = 2 + (r3 % 5);
      arr.push({
        left: r1,
        size,
        dur: 8 + (r2 % 8),
        delay: -(r3 % 12) - (r1 % 5) * 0.6,
        dx: ((r2 % 5) - 2) * 34,
        o: 0.4 + (r3 % 5) * 0.1,
        red,
      });
    }
    return arr;
  }, [count]);

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {embers.map((e, i) => (
        <span key={i} className="ember" style={{
          left: e.left + '%',
          width: e.size, height: e.size,
          background: e.red ? FORJA.brasa : FORJA.amarelo,
          boxShadow: e.red
            ? `0 0 ${e.size * 3}px rgba(139,0,0,0.9)`
            : `0 0 ${e.size * 3}px rgba(246,195,36,0.9)`,
          '--dur': e.dur + 's',
          '--delay': e.delay + 's',
          '--dx': e.dx + 'px',
          '--o': e.o,
          animationDuration: e.dur + 's',
          animationDelay: e.delay + 's',
        }} />
      ))}
    </div>
  );
}

// ── Hook de entrada/saída dentro de um Sprite ───────────────────────────────
function useInOut({ entry = 0.55, exit = 0.45, rise = 28 } = {}) {
  const { localTime, duration } = useSprite();
  const exitStart = Math.max(0, duration - exit);
  let opacity = 1, ty = 0, scale = 1;
  if (localTime < entry) {
    const t = Easing.easeOutCubic(clamp(localTime / entry, 0, 1));
    opacity = t; ty = (1 - t) * rise; scale = 0.965 + 0.035 * t;
  } else if (localTime > exitStart) {
    const t = Easing.easeInCubic(clamp((localTime - exitStart) / exit, 0, 1));
    opacity = 1 - t; ty = -t * (rise * 0.45);
  }
  return { opacity, ty, scale };
}

// ── Linha de texto centrada, com entrada/saída ──────────────────────────────
function Line({
  top, left = 0, right = 0, children,
  font = FORJA.operacional, size = 40, color = FORJA.bege, weight = 400,
  ls = '0', lh = 1.04, glow, uppercase = false,
  rise = 28, entry = 0.55, exit = 0.45, scaleIn = false, style = {},
}) {
  const { opacity, ty, scale } = useInOut({ rise, entry, exit });
  return (
    <div style={{
      position: 'absolute', top, left, right, textAlign: 'center',
      opacity,
      transform: `translateY(${ty}px)${scaleIn ? ` scale(${scale})` : ''}`,
      transformOrigin: 'center',
      fontFamily: font, fontSize: size, color, fontWeight: weight,
      letterSpacing: ls, lineHeight: lh,
      textTransform: uppercase ? 'uppercase' : 'none',
      textShadow: glow || 'none',
      whiteSpace: 'pre-line',
      willChange: 'transform, opacity',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Kicker sagrado (Cinzel, tracking largo, amarelo) ────────────────────────
function Kicker({ top, children, color = FORJA.amarelo, size = 26, rise = 18 }) {
  const { opacity, ty } = useInOut({ rise, entry: 0.5, exit: 0.4 });
  return (
    <div style={{
      position: 'absolute', top, left: 0, right: 0, textAlign: 'center',
      opacity, transform: `translateY(${ty}px)`,
      fontFamily: FORJA.sagrada, fontSize: size, fontWeight: 600,
      letterSpacing: '0.34em', textTransform: 'uppercase', color,
      paddingLeft: '0.34em',
    }}>
      {children}
    </div>
  );
}

// ── Filete ornamental curto (separador) ─────────────────────────────────────
function Filete({ top, color = FORJA.bronze, w = 120 }) {
  const { opacity } = useInOut({ entry: 0.5, exit: 0.4, rise: 0 });
  return (
    <div style={{
      position: 'absolute', top, left: '50%', transform: 'translateX(-50%)',
      width: w, height: 1, background: color, opacity: opacity * 0.7,
    }} />
  );
}

Object.assign(window, {
  FORJA, Background, Vignette, Embers, useInOut, Line, Kicker, Filete,
});