// Fundo: amarelo sol com grade de pontos que anda na diagonal e formas grandes apagadas (rosa, azul, turquesa) à deriva atrás de tudo.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR, useF} from '../base';

export const Fundo: React.FC = () => {
  const f = useF();
  const d = (f * 1.2) % 60;
  return <AbsoluteFill style={{background: COR.amarelo}}>
    <AbsoluteFill style={{backgroundImage: `radial-gradient(${COR.amareloEscuro} 7px, transparent 8px)`, backgroundSize: '60px 60px', backgroundPosition: `${d}px ${d}px`}} />
    <div style={{position: 'absolute', left: -160 + Math.sin(f / 40) * 40, top: 520, width: 520, height: 520, borderRadius: '50%', background: COR.rosa, opacity: 0.22}} />
    <div style={{position: 'absolute', right: -180 + Math.cos(f / 50) * 40, top: 1000, width: 600, height: 600, background: COR.azul, opacity: 0.2, transform: `rotate(${f * 0.4}deg)`}} />
    <svg viewBox="0 0 100 100" style={{position: 'absolute', left: 560, top: 120, width: 520, height: 520, opacity: 0.25, transform: `rotate(${-f * 0.3}deg)`}}><polygon points="50,6 96,92 4,92" fill={COR.turquesa} /></svg>
  </AbsoluteFill>;
};