// Overlay: o que se repete em todo plano: vinheta de estúdio e migalhas de massinha coloridas espalhadas nos cantos de baixo (fixas, com sombra).
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR} from '../base';
import {argila} from '../lib/argila';

const M: [number, number, number, string][] = [[90, 1700, 38, COR.tomate], [150, 1760, 24, COR.amarelo], [930, 1720, 44, COR.azul], [860, 1790, 26, COR.verde], [560, 1810, 22, COR.rosa], [1000, 1640, 20, COR.amarelo]];
export const Overlay: React.FC = () => <AbsoluteFill style={{pointerEvents: 'none'}}>
  <div style={{position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 50% 42%, transparent 60%, rgba(10,50,50,0.30) 100%)'}} />
  {M.map(([x, y, d, c], i) => <div key={i} style={{position: 'absolute', left: x, top: y, width: d, height: d * 0.8, borderRadius: '50% 45% 50% 40%', ...argila(c, 5)}} />)}
</AbsoluteFill>;