<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculadora de Sinastria Amorosa Rápida</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            mystic: {
              900: '#0f051d',
              800: '#1a0b2e',
              700: '#2b1055',
              600: '#4c1d95',
              500: '#6d28d9',
              400: '#8b5cf6',
              300: '#a78bfa',
              200: '#c4b5fd',
              100: '#ddd6fe',
            },
            gold: {
              300: '#fde047',
              400: '#facc15',
              500: '#eab308',
              600: '#ca8a04',
            }
          },
          fontFamily: {
            serif: ['Georgia', 'serif'],
            sans: ['Inter', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <style>
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 15px rgba(234, 179, 8, 0.3), 0 0 30px rgba(139, 92, 246, 0.2); }
      50% { box-shadow: 0 0 25px rgba(234, 179, 8, 0.6), 0 0 45px rgba(139, 92, 246, 0.4); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    .animate-glow {
      animation: pulseGlow 4s infinite ease-in-out;
    }
    .animate-float {
      animation: float 6s infinite ease-in-out;
    }
    .glass-card {
      background: rgba(26, 11, 46, 0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(234, 179, 8, 0.25);
    }
    .gold-gradient-text {
      background: linear-gradient(135deg, #fff 0%, #facc15 50%, #ca8a04 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .gold-border-gradient {
      border-image: linear-gradient(to right, #ca8a04, #facc15, #ca8a04) 1;
    }
  </style>
</head>
<body class="bg-mystic-900 text-gray-100 font-sans min-h-screen relative overflow-x-hidden pb-12 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-mystic-700 via-mystic-900 to-black">
  <!-- Background Decorative Stars -->
  <div class="absolute inset-0 pointer-events-none opacity-30 bg-[radial-gradient(#facc15_1px,transparent_1px)] [background-size:24px_24px]"></div>
  <div class="max-w-4xl mx-auto px-4 py-8 relative z-10">
    <!-- Header -->
    <header class="text-center mb-8 animate-float">
      <div class="inline-block p-2 rounded-full bg-mystic-800 border border-gold-500/40 mb-3 shadow-lg">
        <i class="fa-solid fa-wand-magic-sparkles text-gold-400 text-2xl px-2"></i>
      </div>
      <h1 class="text-3xl md:text-5xl font-serif font-bold gold-gradient-text tracking-wide mb-2">
        Sinastria Amorosa Rápida
      </h1>
      <p class="text-mystic-200 text-sm md:text-base max-w-xl mx-auto font-light">
        Descubra a afinidade cósmica, a química e os mistérios da união entre o seu signo e o da pessoa amada.
      </p>
    </header>
    <!-- App Card -->
    <main class="glass-card rounded-2xl p-6 md:p-8 shadow-2xl mb-12 animate-glow">
      <form id="synastryForm" class="space-y-6">
        <!-- Selectors Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
          <!-- Heart Icon Divider for Desktop -->
          <div class="hidden md:flex absolute inset-0 items-center justify-center pointer-events-none z-10">
            <div class="w-12 h-12 rounded-full bg-mystic-800 border border-gold-400 flex items-center justify-center shadow-lg text-pink-400">
              <i class="fa-solid fa-heart text-xl animate-pulse"></i>
            </div>
          </div>
          <!-- Sign 1 Selection -->
          <div class="bg-mystic-800/80 p-5 rounded-xl border border-mystic-600/50 hover:border-gold-500/50 transition-colors">
            <label for="sign1" class="block text-sm font-semibold text-gold-300 mb-2 flex items-center gap-2">
              <i class="fa-solid fa-user-astronaut text-mystic-300"></i> Seu Signo
            </label>
            <select id="sign1" class="w-full bg-mystic-900 border border-mystic-500 text-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gold-400 text-base cursor-pointer">
              <option value="" disabled selected>Selecione o seu signo...</option>
              <option value="aries">♈ Áries (Fogo)</option>
              <option value="touro">♉ Touro (Terra)</option>
              <option value="gemeos">♊ Gêmeos (Ar)</option>
              <option value="cancer">♋ Câncer (Água)</option>
              <option value="leao">♌ Leão (Fogo)</option>
              <option value="virgem">♍ Virgem (Terra)</option>
              <option value="libra">♎ Libra (Ar)</option>
              <option value="escorpiao">♏ Escorpião (Água)</option>
              <option value="sagitario">♐ Sagitário (Fogo)</option>
              <option value="capricornio">♑ Capricórnio (Terra)</option>
              <option value="aquario">♒ Aquário (Ar)</option>
              <option value="peixes">♓ Peixes (Água)</option>
            </select>
          </div>
          <!-- Sign 2 Selection -->
          <div class="bg-mystic-800/80 p-5 rounded-xl border border-mystic-600/50 hover:border-gold-500/50 transition-colors">
            <label for="sign2" class="block text-sm font-semibold text-gold-300 mb-2 flex items-center gap-2">
              <i class="fa-solid fa-heart-pulse text-pink-400"></i> Signo da Pessoa Amada
            </label>
            <select id="sign2" class="w-full bg-mystic-900 border border-mystic-500 text-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gold-400 text-base cursor-pointer">
              <option value="" disabled selected>Selecione o signo do par...</option>
              <option value="aries">♈ Áries (Fogo)</option>
              <option value="touro">♉ Touro (Terra)</option>
              <option value="gemeos">♊ Gêmeos (Ar)</option>
              <option value="cancer">♋ Câncer (Água)</option>
              <option value="leao">♌ Leão (Fogo)</option>
              <option value="virgem">♍ Virgem (Terra)</option>
              <option value="libra">♎ Libra (Ar)</option>
              <option value="escorpiao">♏ Escorpião (Água)</option>
              <option value="sagitario">♐ Sagitário (Fogo)</option>
              <option value="capricornio">♑ Capricórnio (Terra)</option>
              <option value="aquario">♒ Aquário (Ar)</option>
              <option value="peixes">♓ Peixes (Água)</option>
            </select>
          </div>
        </div>
        <!-- Submit Button -->
        <button type="submit" id="calcBtn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-gold-600 via-gold-500 to-gold-600 text-mystic-900 font-bold text-lg tracking-wide hover:from-gold-500 hover:to-gold-400 transform hover:-translate-y-0.5 active:translate-y-0 transition-all shadow-lg shadow-gold-500/20 flex items-center justify-center gap-2 cursor-pointer">
          <i class="fa-solid fa-sparkles"></i> Calcular Compatibilidade
        </button>
      </form>
      <!-- Message Box for Alerts -->
      <div id="alertBox" class="hidden mt-4 p-4 rounded-lg bg-red-900/60 border border-red-500/50 text-red-200 text-sm text-center">
        Por favor, selecione ambos os signos para realizar o cálculo astral.
      </div>
      <!-- Results Section -->
      <div id="resultsSection" class="hidden mt-10 border-t border-mystic-600/60 pt-8">
        <!-- Score & Elements Display -->
        <div class="text-center mb-8">
          <div class="inline-flex items-center justify-center p-6 rounded-full bg-mystic-900/90 border-2 border-gold-400/80 shadow-inner mb-4 relative">
            <span id="affinityPercent" class="text-4xl md:text-5xl font-extrabold gold-gradient-text">0%</span>
          </div>
          <h2 class="text-2xl font-serif font-bold text-gold-300" id="resultPairTitle">Áries & Touro</h2>
          <div id="elementsBadge" class="mt-2 text-sm text-mystic-200 flex items-center justify-center gap-2">
            <!-- Dynamic elements tags -->
          </div>
        </div>
        <!-- Analysis Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <!-- 1. Química e Atração -->
          <div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
            <h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
              <i class="fa-solid fa-fire-flame-curved text-amber-500"></i> 1. Química & Atração
            </h3>
            <p id="chemistryText" class="text-gray-300 text-sm leading-relaxed"></p>
          </div>
          <!-- 2. Comunicação e Diálogo -->
          <div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
            <h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
              <i class="fa-solid fa-comments text-cyan-400"></i> 2. Comunicação & Diálogo
            </h3>
            <p id="communicationText" class="text-gray-300 text-sm leading-relaxed"></p>
          </div>
          <!-- 3. Desafios do Casal -->
          <div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
            <h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
              <i class="fa-solid fa-mountain text-emerald-400"></i> 3. Desafios do Casal
            </h3>
            <p id="challengesText" class="text-gray-300 text-sm leading-relaxed"></p>
          </div>
          <!-- 4. Dica Astral -->
          <div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
            <h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
              <i class="fa-solid fa-star text-gold-300"></i> 4. Dica Astral para o Relacionamento
            </h3>
            <p id="astralTipText" class="text-gray-300 text-sm leading-relaxed"></p>
          </div>
        </div>
      </div>
    </main>
    <!-- PHP / Backend Integration Toggle Section -->
    <section class="glass-card rounded-xl p-6 border border-mystic-600">
      <div class="flex items-center justify-between cursor-pointer" onclick="togglePhpCode()">
        <h3 class="text-md font-semibold text-gold-300 flex items-center gap-2">
          <i class="fa-solid fa-code text-mystic-300"></i> Código PHP para Integração Backend (WordPress/PHP)
        </h3>
        <button class="text-mystic-300 hover:text-gold-300 transition-colors">
          <i id="phpToggleIcon" class="fa-solid fa-chevron-down"></i>
        </button>
      </div>
      <div id="phpCodeContainer" class="hidden mt-4">
        <p class="text-xs text-mystic-200 mb-3">
          Copie este código PHP e insira no seu tema WordPress (ex: <code class="text-gold-400">functions.php</code> ou num shortcode personalizado) para processar os dados da sinastria do lado do servidor:
        </p>
        <pre class="bg-mystic-900 p-4 rounded-lg text-xs text-emerald-300 overflow-x-auto border border-mystic-700 font-mono"><code>&lt;?php
/**
 * Calculadora de Sinastria Amorosa Rápida - Backend PHP
 * Pode ser usada via AJAX ou Shortcode no WordPress.
 */
function calcular_sinastria_astral($signo1, $signo2) {
    $elementos = [
        'aries' =&gt; 'Fogo', 'leao' =&gt; 'Fogo', 'sagitario' =&gt; 'Fogo',
        'touro' =&gt; 'Terra', 'virgem' =&gt; 'Terra', 'capricornio' =&gt; 'Terra',
        'gemeos' =&gt; 'Ar', 'libra' =&gt; 'Ar', 'aquario' =&gt; 'Ar',
        'cancer' =&gt; 'Água', 'escorpiao' =&gt; 'Água', 'peixes' =&gt; 'Água'
    ];
    $e1 = $elementos[$signo1] ?? null;
    $e2 = $elementos[$signo2] ?? null;
    if (!$e1 || !$e2) {
        return ['erro' =&gt; 'Signos inválidos fornecidos.'];
    }
    // Tabela elemental de compatibilidade base
    $matriz_elementos = [
        'Fogo'  =&gt; ['Fogo' =&gt; 85, 'Ar' =&gt; 95, 'Terra' =&gt; 60, 'Água' =&gt; 50],
        'Terra' =&gt; ['Terra' =&gt; 88, 'Água' =&gt; 92, 'Fogo' =&gt; 60, 'Ar' =&gt; 55],
        'Ar'    =&gt; ['Ar' =&gt; 82, 'Fogo' =&gt; 95, 'Água' =&gt; 65, 'Terra' =&gt; 55],
        'Água'  =&gt; ['Água' =&gt; 90, 'Terra' =&gt; 92, 'Fogo' =&gt; 50, 'Ar' =&gt; 65],
    ];
    $porcentagem = $matriz_elementos[$e1][$e2] ?? 70;
    return [
        'signo1' =&gt; ucfirst($signo1),
        'elemento1' =&gt; $e1,
        'signo2' =&gt; ucfirst($signo2),
        'elemento2' =&gt; $e2,
        'afinidade' =&gt; $porcentagem . '%',
        'status' =&gt; 'Sucesso'
    ];
}
// Exemplo de uso:
// $resultado = calcular_sinastria_astral('aries', 'libra');
// echo json_encode($resultado);
?&gt;</code></pre>
      </div>
    </section>
  </div>
  <script>
    // Database for Signs & Elements
    const signsData = {
      aries: { name: 'Áries', element: 'Fogo', icon: '♈' },
      touro: { name: 'Touro', element: 'Terra', icon: '♉' },
      gemeos: { name: 'Gêmeos', element: 'Ar', icon: '♊' },
      cancer: { name: 'Câncer', element: 'Água', icon: '♋' },
      leao: { name: 'Leão', element: 'Fogo', icon: '♌' },
      virgem: { name: 'Virgem', element: 'Terra', icon: '♍' },
      libra: { name: 'Libra', element: 'Ar', icon: '♎' },
      escorpiao: { name: 'Escorpião', element: 'Água', icon: '♏' },
      sagitario: { name: 'Sagitário', element: 'Fogo', icon: '♐' },
      capricornio: { name: 'Capricórnio', element: 'Terra', icon: '♑' },
      aquario: { name: 'Aquário', element: 'Ar', icon: '♒' },
      peixes: { name: 'Peixes', element: 'Água', icon: '♓' }
    };
    // Matrix compatibility percentages based on elements
    const elementScores = {
      'Fogo-Fogo': 88, 'Fogo-Ar': 95, 'Fogo-Terra': 62, 'Fogo-Água': 52,
      'Terra-Terra': 90, 'Terra-Água': 94, 'Terra-Fogo': 62, 'Terra-Ar': 58,
      'Ar-Ar': 84, 'Ar-Fogo': 95, 'Ar-Água': 64, 'Ar-Terra': 58,
      'Água-Água': 92, 'Água-Terra': 94, 'Água-Fogo': 52, 'Água-Ar': 64
    };
    // Detailed interpretations generator
    function generateAnalysis(s1, s2) {
      const isSameSign = s1.name === s2.name;
      const isSameElement = s1.element === s2.element;
      const pairKey = `${s1.element}-${s2.element}`;
      let chemistry = "";
      let communication = "";
      let challenges = "";
      let astralTip = "";
      // Element specific logic
      if (isSameSign) {
        chemistry = `Como ambos pertencem ao signo de ${s1.name}, a atração é imediata como um espelho. Vocês reconhecem os desejos e manias um do outro instantaneamente.`;
        communication = `O diálogo é extremamente fluído, mas pode pecar pela falta de visões diferentes. Cuidado para não validarem apenas os próprios defeitos.`;
        challenges = `Superar o orgulho duplo e a tendência de teimar nos mesmos pontos fracos do signo.`;
        astralTip = `Cultivem a individualidade para que o relacionamento não se torne repetitivo ou sufocante.`;
      } else if (isSameElement) {
        chemistry = `A sintonia de ${s1.element} cria uma atração harmoniosa e natural. A energia flui sem a necessidade de grandes esforços de adaptação.`;
        communication = `Vocês falam a mesma língua astral. Os pensamentos e ideias se alinham rapidamente no dia a dia.`;
        challenges = `Falta de estímulo vindo de um elemento complementar, o que pode levar a momentos de acomodação.`;
        astralTip = `Busquem atividades fora da zona de conforto juntos para manter a chama acesa.`;
      } else if (pairKey === 'Fogo-Ar' || pairKey === 'Ar-Fogo') {
        chemistry = `O Ar alimenta o Fogo! A química é vibrante, apaixonada e cheia de entusiasmo. Uma combinação de alta energia sexual e intelectual.`;
        communication = `Diálogos estimulantes, cheios de planos futuros e ideias criativas. Dificilmente o casal fica sem assunto.`;
        challenges = `A volatilidade. Podem acender grandes discussões rapidamente se não controlarem o tom de voz.`;
        astralTip = `Canalizem a energia criativa do casal para projetos em comum e viagens inspiradoras.`;
      } else if (pairKey === 'Terra-Água' || pairKey === 'Água-Terra') {
        chemistry = `A Água nutre a Terra! Uma união profunda, acolhedora e com forte desejo de segurança e toque físico afetivo.`;
        communication = `A conversa é calma, empática e focada na construção de estabilidade emocional e material.`;
        challenges = `Lidar com momentos de teimosia (Terra) contra oscilações de humor ou dramas emocionais (Água).`;
        astralTip = `Respeitem o tempo do outro: a Água precisa sentir e a Terra precisa de dados práticos para agir.`;
      } else if (pairKey === 'Fogo-Água' || pairKey === 'Água-Fogo') {
        chemistry = `Fogo e Água geram vapor! Muita intensidade e paixão avassaladora, mas com altos e baixos constantes.`;
        communication = `A impulsividade verbal do Fogo pode ferir a sensibilidade da Água. Requer cuidado com as palavras.`;
        challenges = `Divergência entre a necessidade de liberdade do Fogo e o desejo de fusão e proteção da Água.`;
        astralTip = `Exercitem a empatia: Fogo deve aprender a ser mais suave e Água precisa evitar remoer ressentimentos.`;
      } else {
        // Terra-Ar or Ar-Terra
        chemistry = `Uma mistura de razão e praticidade. A atração surge pelo respeito mútuo ao intelecto e à capacidade de realização do par.`;
        communication = `Boa para resolver problemas do cotidiano, embora o Ar possa achar a Terra rígida e a Terra achar o Ar aéreo demais.`;
        challenges = `Encontrar um ponto de equilíbrio entre a teoria/ideias (Ar) e a prática/pés no chão (Terra).`;
        astralTip = `Unam o melhor dos dois mundos: o Ar traz os sonhos e a visão, enquanto a Terra constrói a realidade.`;
      }
      return { chemistry, communication, challenges, astralTip };
    }
    // Form submission handler
    document.getElementById('synastryForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const s1Key = document.getElementById('sign1').value;
      const s2Key = document.getElementById('sign2').value;
      const alertBox = document.getElementById('alertBox');
      const resultsSection = document.getElementById('resultsSection');
      if (!s1Key || !s2Key) {
        alertBox.classList.remove('hidden');
        resultsSection.classList.add('hidden');
        return;
      }
      alertBox.classList.add('hidden');
      const sign1 = signsData[s1Key];
      const sign2 = signsData[s2Key];
      // Calculate score
      const pairKey = `${sign1.element}-${sign2.element}`;
      let baseScore = elementScores[pairKey] || 75;
      // Small variation for uniqueness
      if (s1Key === s2Key) baseScore = 88;
      // Get analysis text
      const analysis = generateAnalysis(sign1, sign2);
      // Populate UI
      document.getElementById('resultPairTitle').innerText = `${sign1.icon} ${sign1.name} & ${sign2.icon} ${sign2.name}`;
      document.getElementById('elementsBadge').innerHTML = `
        <span class="px-3 py-1 rounded-full bg-mystic-800 border border-gold-500/30 font-medium text-gold-300">
          ${sign1.name}: ${sign1.element}
        </span>
        <span class="text-gold-400">+</span>
        <span class="px-3 py-1 rounded-full bg-mystic-800 border border-gold-500/30 font-medium text-gold-300">
          ${sign2.name}: ${sign2.element}
        </span>
      `;
      document.getElementById('chemistryText').innerText = analysis.chemistry;
      document.getElementById('communicationText').innerText = analysis.communication;
      document.getElementById('challengesText').innerText = analysis.challenges;
      document.getElementById('astralTipText').innerText = analysis.astralTip;
      // Animate percentage counter
      resultsSection.classList.remove('hidden');
      animatePercentage('affinityPercent', 0, baseScore, 1200);
      // Smooth scroll to results on mobile
      resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    });
    // Helper: Number Counter Animation
    function animatePercentage(id, start, end, duration) {
      const obj = document.getElementById(id);
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const currentVal = Math.floor(progress * (end - start) + start);
        obj.innerText = `${currentVal}%`;
        if (progress < 1) {
          window.requestAnimationFrame(step);
        }
      };
      window.requestAnimationFrame(step);
    }
    // Toggle PHP Container
    function togglePhpCode() {
      const container = document.getElementById('phpCodeContainer');
      const icon = document.getElementById('phpToggleIcon');
      if (container.classList.contains('hidden')) {
        container.classList.remove('hidden');
        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
      } else {
        container.classList.add('hidden');
        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
      }
    }
  </script>
</body>
</html>