<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Landing Page - CryptOffer</title>
  <style>
    /* RESET */
    * {
      margin: 0px;
      padding: 0;
      box-sizing: border-box;
    }

    /* LAYOUT BÁSICO - sem rolagem */
    html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Garante que não haja scroll lateral */
  }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Garante footer no fim */
      font-family: 'Poppins', Arial, sans-serif;
      background: #f9f9f9;
      color: #333;
    }
    main {
      flex: 1;
      position: relative;
      width: 100%;
    }

    /* HEADER - estilo melhorado */
  header {
    background: linear-gradient(90deg, #FF7B00, #FFBB66); /* Tons de laranja e amarelo */
    padding: 8px 16px;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    transition: all 0.3s ease; /* Transição suave ao rolar */
  }

  /* Reduz o tamanho ao rolar */
  header.scrolled {
    padding: 4px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
  }

  .logo img {
    height: 70px;
    border-radius: 8px;
    border: 2px solid #fff;
    transition: all 0.3s ease;
  }

  .logo span {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .promo {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .promo:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
  }


 /* HERO SECTION */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  position: relative;
  z-index: 2;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 3; /* Garante que esteja acima de tudo */
}

.hero-content h1 {
  font-size: 2.5rem; /* Maior para destaque */
  margin-bottom: 15px;
  color: #fff; /* Texto branco */
  font-weight: bold; /* Destaque para o título */
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8); /* Sombra mais evidente */
  background: rgba(0, 0, 0, 0.4); /* Fundo levemente escuro */
  padding: 10px 20px; /* Espaçamento interno */
  border-radius: 10px; /* Bordas arredondadas */
  display: inline-block; /* Ajusta o fundo ao texto */
  text-align: center;
}

.hero-content p {
  font-size: 1.5rem; /* Um pouco menor que o título */
  margin-bottom: 20px;
  color: #fff;
  font-weight: 500;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); /* Sombra para contraste */
  background: rgba(0, 0, 0, 0.3); /* Fundo semitransparente */
  padding: 8px 15px;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
}

.hero-content a {
  display: inline-block;
  background: #ffa726;
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  transition: background 0.3s;
  animation: pulse 2s infinite;
  text-align: center;
}

/* Adicione um espaçamento entre os elementos */
.hero-content > * {
  margin: 10px 0;
}


.hero-content a:hover {
  background: #ff6666;
  transform: scale(1.05); /* Leve aumento no hover */
}

/* ANIMAÇÃO DE PULSAÇÃO */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 77, 77, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 77, 77, 0.5);
  }
}



    /* OBJETOS FLUTUANTES */
    .floating-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita objetos saírem da tela */
  }
    .floating-item {
      position: absolute;
      overflow: hidden;
    }
    /* Produtos (quadrados) */
    .floating-item.square {
      width: 120px;
      height: 120px;
      border-radius: 15px;
    }
    /* Moedas (circulares) */
    .floating-item.circle {
      width: 75px;
      height: 75px;
      border-radius: 50%;
    }
    .floating-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* FOOTER - Mantemos estilo atual, mas mudamos cor p/ estilo */
    footer {
      background: #121212;
      color: #ffffff;
      padding: 20px;
      font-size: 0.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 999;
    }
    .footer-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      gap: 20px;
      flex-wrap: wrap;
    }

    .footer-column {
      flex: auto;
      min-width: 150px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer-column h3 {
      color: #ffa726;
      margin-bottom: 8px;
      font-size: 1rem;
    }
    .footer-column a {
      color: #ffa726;
      text-decoration: none;
      font-weight: bold;
      font-size: 0.85rem;
      transition: color 0.3s;
    }
    .footer-column a:hover {
      color: #ffd740;
    }

    /* Newsletter no footer */
    .newsletter-box {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .newsletter-box input {
      padding: 8px;
      border: none;
      border-radius: 5px;
      outline: none;
      width: 150px;
      background: #2c2c2c;
      color: #ffffff;
      font-size: 0.85rem;
    }
    .newsletter-box button {
      background: #ffa726;
      color: #121212;
      border: none;
      border-radius: 5px;
      padding: 8px 12px;
      font-weight: bold;
      font-size: 0.85rem;
      cursor: pointer;
      transition: 0.3s;
    }
    .newsletter-box button:hover {
      background: #ffd740;
      color: #1f1f1f;
    }

    /* CANVAS (linhas magnéticas) */
    canvas {
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* MODAIS */
    .modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 2000;
      overflow-y: auto;
      padding: 40px 10px;
    }
    .modal-content {
      background: #1f1f1f;
      border-radius: 8px;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .modal-content h2 {
      color: #ffa726;
      font-size: 1.8rem;
      margin-bottom: 15px;
      text-align: center;
    }
    .modal-content p {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 20px;
      text-align: justify;
      color: #eee;
    }
    .modal-content ul {
      list-style: none;
      padding: 0;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 20px;
      color: #eee;
    }
    .modal-content li {
      margin-bottom: 15px;
    }
    .modal-content strong {
      color: #ffd740;
    }
    .close-modal {
      display: block;
      margin: 20px auto 0;
      padding: 10px 20px;
      background: #ffa726;
      color: #121212;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .close-modal:hover {
      background: #ffd740;
      color: #1f1f1f;
    }

    /* RESPONSIVIDADE MOBILE */
    @media (max-width: 768px) {
      header {
      padding: 8px 12px;
    }

    .header-container {
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .logo img {
      height: 60px;
    }

    .logo span {
      font-size: 1.2rem;
    }

    .promo {
      font-size: 0.8rem;
      padding: 5px 10px;
    }
      .hero-content h1 {
        font-size: 1.7rem;
      }
      .hero-content p {
        font-size: 0.9rem;
      }
      .hero-content a {
        font-size: 0.9rem;
      }
      .floating-item.square {
        width: 45px;
        height: 45px;
      }
      .floating-item.circle {
        width: 25px;
        height: 25px;
      }
      .footer-container {
        flex-direction: flex;
        gap: 20px;
      }
      .footer-column {
        min-width: auto;
      }
	.modal-content {
    max-width: auto;
    padding: 15px;
  }

  .modal-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .modal-content p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .modal-content ul {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .modal-content li {
    margin-bottom: 10px;
  }

  .close-modal {
    padding: 8px 16px;
    font-size: 0.9rem;
  }

 .floating-item.square {
      width: 50px;
      height: 50px;
    }
    .floating-item.circle {
      width: 30px;
      height: 30px;
    }

  .modal {
    padding: 20px 5px; /* Reduz o padding em dispositivos móveis */
  }
}

.floating-item {
  position: absolute;
  overflow: hidden;
  max-width: calc(100vw - 20px); /* Garante que não saiam da tela */
}

  </style>
</head>
<body>

  <!-- HEADER -->
<header>
  <div class="header-container">
    <!-- Logo -->
    <a href="#" class="logo">
      <img 
        src="https://cdn.discordapp.com/attachments/929861093650751525/1315450301032956065/DALLC2B7E202024-12-082023_1.png?ex=6779124f&is=6777c0cf&hm=826ee4c91bcd3c0402d9662884e065a2d38b686962df3b6610bf3478b8eb4074&"
        alt="CryptOffer"
      />
      <span>CryptOffer</span>
    </a>
    
    <!-- Promoção -->
    <div class="promo">
      <span class="promo-icon">🔥</span> 
      <span> Combata a inflação com Cripto e aproveite <strong>30% OFF</strong>! 🚀</span>
    </div>
  </div>
</header>


  <!-- MAIN -->
  <main>
    <div class="hero-section">
      <div class="hero-content">
        <h1>Descubra nossas ofertas exclusivas</h1>
        <p>Pague com suas criptos preferidas e economize até 30%!</p>
        <a href="file:///C:/Users/M135i/Desktop/Nouveau%20dossier/Nouveau%20dossier/site%20fr/front/front%20pt/front%20pt.html" id="hero-button">Confira agora</a>
      </div>
    </div>

    <!-- OBJETOS FLUTUANTES + CANVAS -->
    <div class="floating-container"></div>
    <canvas id="magnetic-lines"></canvas>
  </main>

  <!-- FOOTER -->
  <footer>
    <div class="footer-container">
      <!-- 1ª coluna: titulo e link -->
      <div class="footer-column">
        <h3>Crypt0ffer</h3>
        <p style="font-size:0.8rem; color:#bbb; line-height:1.4;">
          Conectando você às melhores ofertas pagas em criptomoedas.  
          Aproveite descontos únicos e economize de forma inteligente!
        </p>
      </div>

      <!-- 2ª coluna: Newsletter -->
      <div class="footer-column">
        <h3>Newsletter</h3>
        <div class="newsletter-box">
          <input type="email" placeholder="Digite seu e-mail" required />
          <button type="submit">Inscrever</button>
        </div>
      </div>

      <!-- 3ª coluna: Modais e suporte -->
      <div class="footer-column">
        <h3>Informações</h3>
        <a href="#" class="footer-link" data-modal="terms-modal">Termos de Serviço</a>
        <a href="#" class="footer-link" data-modal="conditions-modal">Condições</a>
		
        <a href="#" class="footer-link" data-modal="about-modal">Sobre Nós</a>
		</div>
      </div>
        <span style="font-size:0.8rem; color:#ccc;">Suporte: 
          <a href="mailto:info@CryptOffer.shop" 
             style="color:#ffa726;">info@CryptOffer.shop</a>
        </span>
      </div>
    </div>
  </footer>

  <!-- MODAIS -->
  <!-- Termos de Serviço -->
  <div id="terms-modal" class="modal">
    <div class="modal-content">
      <h2>Termos de Serviço</h2>
  <p>
    Ao utilizar a plataforma <strong style="color:#ffa726;">CryptOffer</strong>, você concorda e se compromete a observar
    e respeitar os termos abaixo descritos. Estes Termos de Serviço foram desenvolvidos para garantir o funcionamento
    adequado do site, bem como preservar a segurança, transparência e confiabilidade de todos os usuários.
  </p>
  <ul style="list-style: none; padding: 0;">
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">1. Uso Autorizado e Boa-Fé:</strong><br>
      A <strong style="color: #ffa726;">CryptOffer</strong> permite a pesquisa, avaliação e aquisição de produtos
      e serviços relacionados a criptomoedas. Qualquer uso que contrarie princípios de boa-fé, normas legais ou
      a finalidade do serviço será considerado infração grave, podendo resultar em suspensão ou encerramento
      imediato de sua conta.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">2. Veracidade de Informações:</strong><br>
      Você se responsabiliza pela veracidade e atualização dos dados fornecidos, bem como pela guarda
      e sigilo de suas credenciais de acesso. A <strong style="color: #ffa726;">CryptOffer</strong> não se responsabiliza
      por prejuízos decorrentes de uso indevido ou compartilhamento de contas.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">3. Licença Limitada:</strong><br>
      O acesso ao site e aos serviços é concedido em caráter personalíssimo e intransferível, não sendo
      permitida a reprodução, venda, revenda ou exploração para fins comerciais sem autorização prévia
      e por escrito da <strong style="color: #ffa726;">CryptOffer</strong>.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">4. Atualizações de Serviço:</strong><br>
      A <strong style="color: #ffa726;">CryptOffer</strong> reserva-se o direito de atualizar, modificar ou
      descontinuar qualquer aspecto do site ou dos serviços ofertados, a qualquer tempo, sem
      necessidade de aviso prévio, visando melhorias ou adequações legais.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">5. Limitação de Responsabilidade:</strong><br>
      A <strong style="color: #ffa726;">CryptOffer</strong> envida os melhores esforços para garantir a segurança
      e disponibilidade dos serviços, entretanto, não pode ser responsabilizada por perdas decorrentes
      de falhas externas, interrupções de rede, instabilidades no blockchain ou quaisquer eventos fora
      de seu controle.
    </li>
  </ul>
  <p style="color: #ffd740; font-weight: bold; text-align: center;">
    Ao continuar navegando e utilizando nossos serviços, você declara ter
    lido e aceito plenamente estes Termos de Serviço, reconhecendo sua importância para o bom uso
    da plataforma <strong style="color: #ffa726;">CryptOffer</strong>.
  </p>
  <button class="close-modal">Fechar</button>
</div>
  </div>

  <!-- Condições -->
  <div id="conditions-modal" class="modal">
    <div class="modal-content">
      <h2>Condições</h2>
  <p>
    O uso dos serviços da plataforma <strong style="color:#ffa726;">CryptOffer</strong> está sujeito
    às Condições aqui estabelecidas, criadas para proteger a integridade do ambiente virtual,
    assegurar a transparência nas negociações e promover relações benéficas entre todos os envolvidos.
  </p>
  <ul style="list-style: none; padding-left: 0;">
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">1. Confirmação de Identidade:</strong><br>
      Para acessar determinados recursos, poderemos exigir verificação de identidade
      (KYC/AML) em conformidade com leis e regulamentos aplicáveis. A ausência ou inconsistência
      de dados pode resultar em restrição ou bloqueio de conta.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">2. Proibição de Atividades Ilícitas:</strong><br>
      Atos que violem leis nacionais ou internacionais, incluindo lavagem de dinheiro e financiamento
      ao terrorismo, são terminantemente proibidos. A <strong style="color: #ffa726;">CryptOffer</strong>
      colaborará com autoridades competentes, se necessário.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">3. Atualizações das Condições:</strong><br>
      As presentes Condições podem ser alteradas periodicamente, visando adequar-se a inovações
      tecnológicas, exigências legais ou aprimoramentos de segurança. Recomendamos revisá-las
      regularmente.
    </li>
    <li style="margin-bottom: 15px;">
      <strong style="color: #ffd740;">4. Isenção de Responsabilidade por Terceiros:</strong><br>
      A <strong style="color: #ffa726;">CryptOffer</strong> não se responsabiliza por transações ou
      tratativas realizadas fora de seus ambientes oficiais, seja com terceiros ou parceiros não
      autorizados. Cada usuário é o único responsável pelas decisões de compra e venda que
      realizar.
    </li>
  </ul>
  <p>
    O uso continuado de nossos serviços implica total aceite às presentes Condições.
    Em caso de dúvidas ou esclarecimentos, nossa equipe de suporte permanece à disposição
    para auxiliá-lo.
  </p>
  <button class="close-modal">Fechar</button>
</div>
  </div>

  <!-- Sobre Nós -->
  <div id="about-modal" class="modal">
    <div class="modal-content">
      <h2>Sobre Nós</h2>
  <p>
    A <strong style="color: #ffa726;">CryptOffer</strong> nasceu com o propósito de promover
    soluções inovadoras e seguras no mercado de criptomoedas. Nosso objetivo é fornecer
    uma experiência transparente, confiável e prática, capacitando usuários iniciantes
    e avançados a explorar o futuro das finanças digitais com tranquilidade.
  </p>
  <p>
    Nossa equipe é composta por profissionais dedicados e entusiastas da tecnologia
    blockchain, comprometidos em oferecer serviços de excelência e suporte personalizado.
    Valorizamos a segurança, a ética e a inovação contínua.
  </p>
  <p>
    Almejamos liderar a evolução do setor, fomentando a adoção global de criptomoedas e
    tecnologias descentralizadas, contribuindo para tornar o futuro econômico mais seguro,
    aberto e acessível a todos.
  </p>
  <button class="close-modal">Fechar</button>
</div>
  </div>

  <script>
    /*
     * SCRIPT PARA OS MODAIS
     */
    function fecharTodosModais() {
      document.querySelectorAll('.modal').forEach(modal => {
        modal.style.display = 'none';
      });
    }
    document.querySelectorAll('.footer-link').forEach(link => {
      link.addEventListener('click', event => {
        event.preventDefault();
        fecharTodosModais();
        const modalId = link.getAttribute('data-modal');
        document.getElementById(modalId).style.display = 'block';
      });
    });
    document.querySelectorAll('.close-modal').forEach(botao => {
      botao.addEventListener('click', () => {
        botao.closest('.modal').style.display = 'none';
      });
    });
    window.addEventListener('click', e => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) {
          modal.style.display = 'none';
        }
      });
    });

    /*
     * SCRIPT DOS OBJETOS FLUTUANTES
     */
    const floatingContainer = document.querySelector('.floating-container');
    const canvas = document.getElementById('magnetic-lines');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const headerEl   = document.querySelector('header');
    const footerEl   = document.querySelector('footer');
    const heroButton = document.getElementById('hero-button');

    // Ajusta a distância das linhas de conexão
    let lineDistance = (window.innerWidth < 768) ? 90 : 150;

    // Map de possíveis cores para cada coin
const coinColors = {
  'bitcoin': '#F7931A',
  'ethereum': '#62688F',
  'xrp': '#23292F',
  'binance-smart-chain': '#F0B90B',
  'tether': '#50AF95',
  'usd-coin': '#2775CA',
  'cardano': '#0033AD',
  'polkadot': '#E6007A',
  'solana': '#9945FF',
  'tron': '#EF0027',
  'litecoin': '#345D9D',
  'dogecoin': '#E5CB7A',
  'stellar': '#000000',
  'bitcoin-cash': '#8DC351',
  'avalanche': '#E84142',
  'monero': '#FF6600',
  'uniswap': '#FF007A',
  'chainlink': '#375BD2',
  'pancakeswap': '#D1884F',
  'pepe': '#3D8130',
  'sushi': '#FA52A0',
  'polygon': '#803CE0',
  'ethereum-classic': '#34FA99',
  'arbitrum': '#12AAFF',
}; 


    // URLs de produtos (quadrados)
    const products = [
      'https://cdn.discordapp.com/attachments/929861093650751525/1325681916300628058/Calque_1.png?ex=677cacfe&is=677b5b7e&hm=c4b083246e2eaffb794e3a8ad2fb2465cbe455dcb7ca2a534f13a99356fcc453&',
      'https://cdn.discordapp.com/attachments/929861093650751525/1325685744689352714/Calque_3.png?ex=677cb08f&is=677b5f0f&hm=82b52a8a7a80cc90ee962f95fa5ef999fe6a60ca1dfcc136cd4c524ebcae6726&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325904974563250306/Calque_13.png?ex=677d7cbc&is=677c2b3c&hm=3aa157714cea0918433d76930ae0f086c70dadf3202cf1f96f3abd2dc9a566d2&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325686964300812410/Calque_4.png?ex=677cb1b2&is=677b6032&hm=6d7f1fa74166c9a7e048f2f645a1c6225a3bfbccd3b97cc2054b1a9a9a0a01c8&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325687771863711796/Calque_5.png?ex=677cb272&is=677b60f2&hm=a1e3548b12726acd392925609f7943eda87e5626c2203f0c465d4742fcf977ca&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325712637048131664/Calque_6.png?ex=677cc99b&is=677b781b&hm=ee42439f1c8847ab2163c305c6041bf9bd0f32d80dd69789d1e18b432b213136&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325713068885278781/Calque_7.png?ex=677cca02&is=677b7882&hm=16640537d8f6c7b50d8123c922230b77072ef4c2f99c64232e1c8c623463c098&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325715705198411818/Calque_8.png?ex=677ccc76&is=677b7af6&hm=58f32f15b2dce69bf93e18f0e430fe6e5b6e2539edf3d5fb1f65ab160cd48c5c&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325716884930428969/Calque_9.png?ex=677ccd8f&is=677b7c0f&hm=8869cc9491a4a496e10d13a119f6641bce4e22f064118752aef5dc1b3dc3308b&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325757684271681617/Calque_10.png?ex=677cf38f&is=677ba20f&hm=3a8e3bdc4b0a3cf18353f0ab0b1ec1cd1045ff38c2b193af30c32638a02d632a&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325894970087051377/Calque_11.png?ex=677d736a&is=677c21ea&hm=d52f5e4f567d70ae4df116215e2e23e9d495b6b041e6f8631e5c9a433c8bc1d8&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325900575430414377/Calque_12.png?ex=677d78a3&is=677c2723&hm=4b9d1bf6540461f0ffb93221fd0f807a045c80cfeb989c665c15b743a43ba112&',
	  'https://cdn.discordapp.com/attachments/929861093650751525/1325900575430414377/Calque_12.png?ex=677d78a3&is=677c2723&hm=4b9d1bf6540461f0ffb93221fd0f807a045c80cfeb989c665c15b743a43ba112&',
    ];

    // URLs de moedas (circulares)
    const coins = [
      'https://coin.space/assets/crypto/bitcoin.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/ethereum.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/xrp.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/binance-chain.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/tether.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/usd-coin.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/cardano.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/polkadot.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/solana.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/tron.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/litecoin.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/dogecoin.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/stellar.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/bitcoin-cash.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/avalanche.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/monero.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/uniswap.svg?ver=6.6.3',
      'https://coin.space/assets/crypto/chainlink.svg?ver=6.6.3',
	  'https://coin.space/assets/crypto/pancakeswap.svg',
	  'https://coin.space/assets/crypto/pepe.svg?ver=6.6.3',
	  'https://coin.space/assets/crypto/sushi.svg?ver=6.6.3',
	  'https://coin.space/assets/crypto/polygon.svg?ver=6.6.3',
	  'https://coin.space/assets/crypto/ethereum-classic.svg?ver=6.6.3',
	  'https://coin.space/assets/crypto/arbitrum.svg?ver=6.6.3',
    ];

    const floatingObjects = [];
    const collisionsMap = new Map();

    // Função para criar um item flutuante (SEM aumentar velocidade a cada colisão)
    function createFloatingItem(src, className) {
      const item = document.createElement('div');
      item.className = `floating-item ${className}`;
      const img = document.createElement('img');
      img.src = src;
      item.appendChild(img);
      floatingContainer.appendChild(item);

      let size;
      if (window.innerWidth < 768) {
        size = (className === 'circle') ? 30 : 50;
      } else {
        size = (className === 'circle') ? 70 : 120;
      }

      const position = {
  x: Math.random() * (window.innerWidth - size),
  y: Math.random() * (window.innerHeight - size),
  vx: (Math.random() - 0.5) * 0.3,  /* Velocidade inicial controlada */
  vy: (Math.random() - 0.5) * 0.3
};


      const uniqueId = Math.random().toString(36).substr(2, 9);
      floatingObjects.push({
        element: item,
        position,
        size,
        isCoin: (className === 'circle'),
        src,
        id: uniqueId
      });
    }

    // Função para embaralhar arrays (utilizada para selecionar itens sem repetição)
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// Arrays embaralhados para evitar repetição inicial
let shuffledProducts = [...products];
let shuffledCoins = [...coins];

// Criar 5 produtos
for (let i = 0; i < 28; i++) {
  // Reembaralha caso todos os produtos já tenham sido usados
  if (shuffledProducts.length === 0) shuffledProducts = [...products];
  // Seleciona o primeiro item e remove do array
  const product = shuffledProducts.shift();
  createFloatingItem(product, 'square');
}

// Criar 20 moedas
for (let i = 0; i < 30; i++) {
  // Reembaralha caso todas as moedas já tenham sido usadas
  if (shuffledCoins.length === 0) shuffledCoins = [...coins];
  // Seleciona o primeiro item e remove do array
  const coin = shuffledCoins.shift();
  createFloatingItem(coin, 'circle');
}




    // bounding box
    function isCollidingRect(objX, objY, objSize, rect) {
      const objLeft   = objX;
      const objRight  = objX + objSize;
      const objTop    = objY;
      const objBottom = objY + objSize;

      const rectLeft   = rect.left;
      const rectRight  = rect.left + rect.width;
      const rectTop    = rect.top;
      const rectBottom = rect.top + rect.height;

      const collideX = (objLeft < rectRight && objRight > rectLeft);
      const collideY = (objTop < rectBottom && objBottom > rectTop);
      return (collideX && collideY);
    }

    function respawnObject(obj) {
      obj.position.x = Math.random()*(window.innerWidth - obj.size);
      obj.position.y = Math.random()*(window.innerHeight - obj.size);
      obj.position.vx= (Math.random()-0.5)*0.3;
      obj.position.vy= (Math.random()-0.5)*0.3;
    }

    function handleCollisionBetween(a, b) {
      const ax1 = a.position.x;
      const ay1 = a.position.y;
      const ax2 = ax1 + a.size;
      const ay2 = ay1 + a.size;

      const bx1 = b.position.x;
      const by1 = b.position.y;
      const bx2 = bx1 + b.size;
      const by2 = by1 + b.size;

      if (ax2 < bx1 || ax1 > bx2 || ay2 < by1 || ay1 > by2) {
        return false;
      }

      let keyAB;
      if (a.id < b.id) {
        keyAB = a.id + '-' + b.id;
      } else {
        keyAB = b.id + '-' + a.id;
      }

      const acx = ax1 + a.size/2;
      const acy = ay1 + a.size/2;
      const bcx = bx1 + b.size/2;
      const bcy = by1 + b.size/2;
      const dx = acx - bcx;
      const dy = acy - bcy;

      // Inverte velocidades
      if (Math.abs(dx) > Math.abs(dy)) {
        a.position.vx *= -1;
        b.position.vx *= -1;
        const overlapX = (a.size/2 + b.size/2) - Math.abs(dx);
        const push = overlapX*0.5;
        if (dx>0) {
          a.position.x += push;
          b.position.x -= push;
        } else {
          a.position.x -= push;
          b.position.x += push;
        }
      } else {
        a.position.vy *= -1;
        b.position.vy *= -1;
        const overlapY = (a.size/2 + b.size/2) - Math.abs(dy);
        const push = overlapY*0.5;
        if (dy>0) {
          a.position.y += push;
          b.position.y -= push;
        } else {
          a.position.y -= push;
          b.position.y += push;
        }
      }

      let c = collisionsMap.get(keyAB) || 0;
      collisionsMap.set(keyAB, c+1);
      if (c+1 >= 3) {
        respawnObject(b);
        collisionsMap.set(keyAB, 0);
      }
      return true;
    }

    function getCoinColor(src) {
      const lowerSrc = src.toLowerCase();
      for (const key in coinColors) {
        if (lowerSrc.includes(key)) {
          return coinColors[key];
        }
      }
      return '#ffa726';
    }

    function updatePositions() {
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const headerH = headerEl.offsetHeight;
      const footerTop = footerEl.offsetTop;

      const scrollY = window.scrollY || window.pageYOffset;
      const btnRectRaw = heroButton.getBoundingClientRect();
      const btnRect = {
        left:   btnRectRaw.left,
        top:    btnRectRaw.top + scrollY,
        width:  btnRectRaw.width,
        height: btnRectRaw.height
      };

      // Movimenta cada objeto
      for (let i=0; i<floatingObjects.length; i++){
        const obj = floatingObjects[i];
        const s   = obj.size;

        obj.position.x += obj.position.vx;
        obj.position.y += obj.position.vy;

        // Bordas (lateral)
if (obj.position.x < 0) {
  obj.position.x = 0;
  obj.position.vx *= -1;
}
if (obj.position.x + s > window.innerWidth) {
  obj.position.x = window.innerWidth - s; // Corrige para não ultrapassar o limite direito
  obj.position.vx *= -1;
}
// Topo (header)
if (obj.position.y < headerH) {
  obj.position.y = headerH; // Ajusta para não passar do header
  obj.position.vy *= -1;
}
// Fundo (footer)
if (obj.position.y + s > footerTop) {
  obj.position.y = footerTop - s; // Impede ultrapassar o footer
  obj.position.vy *= -1;
}

const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
if (obj.position.x + s > viewportWidth) {
  obj.position.x = viewportWidth - s; // Ajusta corretamente à largura da tela
  obj.position.vx *= -1;
}
if (obj.position.x < 0) {
  obj.position.x = 0;
}
if (obj.position.x + obj.size > window.innerWidth) {
  obj.position.x = window.innerWidth - obj.size;
}


        // Colisão com o botão
        if (isCollidingRect(obj.position.x, obj.position.y, s, btnRect)) {
          // Bater e voltar
          const ocx = obj.position.x + s/2;
          const ocy = obj.position.y + s/2;
          const bcx = btnRect.left + btnRect.width/2;
          const bcy = btnRect.top  + btnRect.height/2;
          const dx  = ocx - bcx;
          const dy  = ocy - bcy;
          if (Math.abs(dx) > Math.abs(dy)) {
            obj.position.vx *= -1;
            if (dx>0) {
              obj.position.x = btnRect.left + btnRect.width;
            } else {
              obj.position.x = btnRect.left - s;
            }
          } else {
            obj.position.vy *= -1;
            if (dy>0) {
              obj.position.y = btnRect.top + btnRect.height;
            } else {
              obj.position.y = btnRect.top - s;
            }
          }

          // Se for coin => muda cor do botão
          if (obj.isCoin) {
            heroButton.style.background = getCoinColor(obj.src);
          } else {
            // se for produto => cor padrão
            heroButton.style.background = '#ffa726';
          }
        }
      }

      // Colisão entre objetos
      for (let i=0; i<floatingObjects.length; i++){
        for (let j=i+1; j<floatingObjects.length; j++){
          handleCollisionBetween(floatingObjects[i], floatingObjects[j]);
        }
      }

      // Desenha linhas (somente coins)
      for (let i=0; i<floatingObjects.length; i++){
        const A = floatingObjects[i];
        A.element.style.transform = `translate(${A.position.x}px, ${A.position.y}px)`;
        if (A.isCoin) {
          for (let j=0; j<floatingObjects.length; j++){
            if (j===i) continue;
            const B = floatingObjects[j];
            const dx = (A.position.x + A.size/2) - (B.position.x + B.size/2);
            const dy = (A.position.y + A.size/2) - (B.position.y + B.size/2);
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist < lineDistance) {
              ctx.beginPath();
              ctx.moveTo(A.position.x + A.size/2, A.position.y + A.size/2);
              ctx.lineTo(B.position.x + B.size/2, B.position.y + B.size/2);
              ctx.strokeStyle='rgba(255,165,0,0.5)';
              ctx.lineWidth=2;
              ctx.stroke();
            }
          }
        }
      }

      requestAnimationFrame(updatePositions);
    }

    updatePositions();

    // Recalcula lineDistance se mudar tamanho da janela
    window.addEventListener('resize', ()=>{
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
      if (window.innerWidth < 768) {
        lineDistance = 90;
      } else {
        lineDistance = 150;
      }
    });
  </script>
</body>
</html>
