// Fundo: papel kraft com pontos de retícula de jornal bem fracos, dobras em cruz e um canto de papel rasgado preto embaixo. Quieto; o respiro do estilo.
import React from 'react';
import {AbsoluteFill} from 'remotion';
import {COR, useF} from '../base';
import {rasgado} from '../lib/rasgado';

export const Fundo: React.FC = () => {
  const f = useF();
  return <AbsoluteFill style={{background: COR.kraft}}>
    <AbsoluteFill style={{backgroundImage: 'radial-gradient(rgba(60,40,20,0.12) 2px, transparent 3px)', backgroundSize: '22px 22px', WebkitMaskImage: 'linear-gradient(180deg, rgba(0,0,0,0.9), transparent 55%)', maskImage: 'linear-gradient(180deg, rgba(0,0,0,0.9), transparent 55%)'}} />
    <div style={{position: 'absolute', left: 539, top: 0, width: 2, height: 1920, background: 'rgba(255,255,255,0.25)'}} />
    <div style={{position: 'absolute', left: 0, top: 959, width: 1080, height: 2, background: 'rgba(0,0,0,0.08)'}} />
    <div style={{position: 'absolute', left: -60 + Math.sin(f / 50) * 10, top: 1620, width: 760, height: 360, background: COR.tinta, clipPath: rasgado(760, 360, 21, 14, 34), filter: 'drop-shadow(0 -4px 6px rgba(0,0,0,0.3))'}} />
    <div style={{position: 'absolute', right: -80, top: 80 + Math.cos(f / 60) * 8, width: 420, height: 260, background: COR.jornal, clipPath: rasgado(420, 260, 13, 12, 30), opacity: 0.8}} />
  </AbsoluteFill>;
};