/* Fundo Geral do Site */
.bg-ds {
    background-image: url('assets/img/tanjirorespiracao.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Paleta de Cores Demon Slayer */
:root {
    --tanjiro-green: #4caf50;
    --water-breathing: #0288d1;  /* Azul Água */
    --flame-breathing: #d32f2f;  /* Vermelho Chamas */
    --thunder-breathing: #fbc02d;/* Amarelo Trovão */
    --sun-breathing: #e65100;    /* Laranja Sol */
}

/* Texto Verde Tanjiro */
.text-tanjiro {
    color: var(--tanjiro-green);
}
.text-q3 {
    color: var(--flame-breathing);
}

/* Transições Suaves para os Botões */
.btn-water, 
.btn-flame, 
.btn-thunder, 
.btn-sun {
    border: none;
    transition: all 0.3s ease-in-out;
}

/* Efeito Hover - Respiração da Água */
.btn-water {
    background-color: var(--water-breathing);
    color: #ffffff;
}
.btn-water:hover {
    background-color: #01579b;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(2, 136, 209, 0.6);
}

/* Efeito Hover - Respiração das Chamas */
.btn-flame {
    background-color: var(--flame-breathing);
    color: #ffffff;
}
.btn-flame:hover {
    background-color: #b71c1c;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.6);
}

/* Efeito Hover - Respiração do Trovão */
.btn-thunder {
    background-color: var(--thunder-breathing);
    color: #000000;
}
.btn-thunder:hover {
    background-color: #f57f17;
    color: #000000;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(251, 192, 45, 0.6);
}

/* Efeito Hover - Respiração do Sol */
.btn-sun {
    background-color: var(--sun-breathing);
    color: #ffffff;
}
.btn-sun:hover {
    background-color: #bf360c;
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(230, 81, 0, 0.6);
}
/* ===================================================
   BOTÕES DA QUESTÃO 2 (IMAGEM DIRETA COM TRANSPARÊNCIA)
   =================================================== */

.btn-character {
  transition: all 0.3s ease-in-out;
  border: 2px solid transparent !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
  background-size: cover;
  background-position: center;
}

/* Efeito de elevação ao passar o mouse */
.btn-character:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}


/* --- 1. YORIICHI --- */
.btn-yoriichi {
  background-color: #8b0000;
  color: #ffffff;
  border-color: #ff4500 !important;
}
.btn-yoriichi:hover {
  /* O linear-gradient aplica uma película preta semi-transparente sobre a foto */
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/yoriichi.jpg'); 
}


/* --- 2. TENGEN UZUI --- */
.btn-uzui {
  background-color: #2e0854;
  color: #ffd700;
  border-color: #ffd700 !important;
}
.btn-uzui:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/uzui.jpg');
}


/* --- 3. SANEMI --- */
.btn-sanemi {
  background-color: #1b3b2b;
  color: #e0e0e0;
  border-color: #2e8b57 !important;
}
.btn-sanemi:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/sanemi.jpg') !important;
}


/* --- 4. TOMIOKA --- */
.btn-tomioka {
  background-color: #0b2545;
  color: #ffffff;
  border-color: #00bfff !important;
}
.btn-tomioka:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/tomioka.jpg');
}
/* ===================================================
   ANIMAÇÃO DAS PÉTALAS DE SAKURA
   =================================================== */

#sakura-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Garante que as pétalas não atrapalhem o clique nos botões */
    z-index: 1; /* Fica atrás da caixa principal do quiz */
}

.petal {
    position: absolute;
    background: linear-gradient(135deg, #ffb7c5, #ff69b4);
    border-radius: 15px 0 15px 0; /* Formato de pétala */
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear infinite;
}

/* Animação caindo e balançando */
@keyframes fall {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(100px) rotate(180deg);
    }
    100% {
        top: 105%;
        transform: translateX(-50px) rotate(360deg);
    }
}
/* Fundo exclusivo da Questão 2 */
.bg-q2 {
    /* Imagem de fundo + escurecimento suave para o container do quiz se destacar */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
                url('assets/img/ds2fundo.jpg') no-repeat center center fixed;
    background-size: cover;
}
.bg-q3 {
    
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
                url('assets/img/ds3.jpg') no-repeat center center fixed;
    background-size: cover;
}
/* --- 1. YORIICHI --- */
.btn-fep {
  background-color: #ff2b2b;
  color: #ffffff;
  border-color: #ffffff !important;
}
.btn-fep:hover {
  /* O linear-gradient aplica uma película preta semi-transparente sobre a foto */
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/fep.jpg'); 
}


/* --- 2. TENGEN UZUI --- */
.btn-oer {
  background-color: #2e0854;
  color: #ba52ff;
  border-color: #ba52ff !important;
}
.btn-oer:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/oer.jpg');
}


/* --- 3. SANEMI --- */
.btn-sf {
  background-color: #1b3b2b;
  color: #2e8b57;
  border-color: #2e8b57 !important;
}
.btn-sf:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/sf.jpg') !important;
}


/* --- 4. TOMIOKA --- */
.btn-fa {
  background-color: #0b2545;
  color: #00bfff;
  border-color: #00bfff !important;
}
.btn-fa:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                    url('assets/img/fa.jpg'); 
} 

/* Configuração para garantir que o fundo não transborde ao subir partículas */
body {
    position: relative;
    overflow-x: hidden;
}

/* Container de Partículas no fundo */
.fire-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none; /* Garante que o usuário consiga clicar nos botões */
    z-index: 0; /* Fica atrás do container principal do quiz */
}

/* Garante que o card do quiz fique por cima das partículas */
.container {
    position: relative;
    z-index: 1;
}

/* Estilo Base de Cada Partícula (Bolinha) */
.fire-particles span {
    position: absolute;
    bottom: -20px;
    background-color: #ffaa00; /* Laranja Inicial */
    border-radius: 50%;
    opacity: 0;
    filter: blur(1px);
    animation: riseAndBurn 6s infinite ease-in;
}

/* Tamanhos, Posições e Atrasos Individuais para variação natural */
.fire-particles span:nth-child(1) { left: 10%; width: 8px;  height: 8px;  animation-delay: 0s;   animation-duration: 7s; }
.fire-particles span:nth-child(2) { left: 25%; width: 12px; height: 12px; animation-delay: 1.5s; animation-duration: 5s; }
.fire-particles span:nth-child(3) { left: 40%; width: 6px;  height: 6px;  animation-delay: 3s;   animation-duration: 8s; }
.fire-particles span:nth-child(4) { left: 55%; width: 10px; height: 10px; animation-delay: 0.8s; animation-duration: 6s; }
.fire-particles span:nth-child(5) { left: 70%; width: 14px; height: 14px; animation-delay: 2.2s; animation-duration: 5.5s; }
.fire-particles span:nth-child(6) { left: 85%; width: 8px;  height: 8px;  animation-delay: 4s;   animation-duration: 7.5s; }
.fire-particles span:nth-child(7) { left: 18%; width: 10px; height: 10px; animation-delay: 2.7s; animation-duration: 6.5s; }
.fire-particles span:nth-child(8) { left: 48%; width: 7px;  height: 7px;  animation-delay: 4.5s; animation-duration: 8.5s; }
.fire-particles span:nth-child(9) { left: 63%; width: 11px; height: 11px; animation-delay: 1.1s; animation-duration: 5.8s; }
.fire-particles span:nth-child(10){ left: 80%; width: 9px;  height: 9px;  animation-delay: 3.3s; animation-duration: 6.8s; }

/* Animação: Subida com Transição Laranja -> Vermelho */
@keyframes riseAndBurn {
    0% {
        transform: translateY(0) scale(1);
        background-color: #ffbe3b; /* Laranja Claro / Amarelado */
        box-shadow: 0 0 10px #ffbe3b;
        opacity: 0;
    }
    15% {
        opacity: 0.8; /* Surge na tela */
    }
    50% {
        background-color: #ff5500; /* Laranja Escuro Puro */
        box-shadow: 0 0 12px #ff5500;
    }
    80% {
        background-color: #d00000; /* Transiciona para Vermelho */
        box-shadow: 0 0 8px #d00000;
        opacity: 0.6;
    }
    100% {
        transform: translateY(-105vh) scale(0.3); /* Sobe até o topo diminuindo */
        background-color: #800000; /* Vermelho Bem Escuro/Queimado */
        box-shadow: 0 0 2px #800000;
        opacity: 0; /* Desaparece suavemente */
    }
}
/* Container das partículas no fundo */
.snow-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

/* Estilo base de cada floco */
.snow-particles span {
    position: absolute;
    top: -20px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
    filter: blur(1px);
    box-shadow: 0 0 8px #ffffff;
    animation: fallAndSway linear infinite;
}

/* Variações individuais para 30 flocos distribuídos */
.snow-particles span:nth-child(1)  { left: 2%;  width: 6px;  height: 6px;  animation-duration: 8s;  animation-delay: 0s; }
.snow-particles span:nth-child(2)  { left: 8%;  width: 10px; height: 10px; animation-duration: 6s;  animation-delay: 2s; }
.snow-particles span:nth-child(3)  { left: 14%; width: 4px;  height: 4px;  animation-duration: 11s; animation-delay: 1s; }
.snow-particles span:nth-child(4)  { left: 20%; width: 8px;  height: 8px;  animation-duration: 7s;  animation-delay: 4s; }
.snow-particles span:nth-child(5)  { left: 26%; width: 12px; height: 12px; animation-duration: 9s;  animation-delay: 0.5s; }
.snow-particles span:nth-child(6)  { left: 32%; width: 5px;  height: 5px;  animation-duration: 10s; animation-delay: 3s; }
.snow-particles span:nth-child(7)  { left: 38%; width: 9px;  height: 9px;  animation-duration: 8s;  animation-delay: 1.5s; }
.snow-particles span:nth-child(8)  { left: 44%; width: 6px;  height: 6px;  animation-duration: 12s; animation-delay: 5s; }
.snow-particles span:nth-child(9)  { left: 50%; width: 11px; height: 11px; animation-duration: 7s;  animation-delay: 2.5s; }
.snow-particles span:nth-child(10) { left: 56%; width: 4px;  height: 4px;  animation-duration: 9s;  animation-delay: 3.5s; }
.snow-particles span:nth-child(11) { left: 62%; width: 7px;  height: 7px;  animation-duration: 10s; animation-delay: 6s; }
.snow-particles span:nth-child(12) { left: 68%; width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: 4.5s; }
.snow-particles span:nth-child(13) { left: 74%; width: 5px;  height: 5px;  animation-duration: 6.5s; animation-delay: 1.8s; }
.snow-particles span:nth-child(14) { left: 80%; width: 10px; height: 10px; animation-duration: 9.5s; animation-delay: 0.2s; }
.snow-particles span:nth-child(15) { left: 86%; width: 6px;  height: 6px;  animation-duration: 7.8s; animation-delay: 3.8s; }
.snow-particles span:nth-child(16) { left: 92%; width: 9px;  height: 9px;  animation-duration: 11.2s; animation-delay: 2.1s; }
.snow-particles span:nth-child(17) { left: 97%; width: 4px;  height: 4px;  animation-duration: 8.4s; animation-delay: 5.2s; }
.snow-particles span:nth-child(18) { left: 5%;  width: 11px; height: 11px; animation-duration: 6.8s; animation-delay: 3.1s; }
.snow-particles span:nth-child(19) { left: 11%; width: 7px;  height: 7px;  animation-duration: 9.1s; animation-delay: 4.9s; }
.snow-particles span:nth-child(20) { left: 23%; width: 5px;  height: 5px;  animation-duration: 10.5s; animation-delay: 1.2s; }
.snow-particles span:nth-child(21) { left: 35%; width: 8px;  height: 8px;  animation-duration: 7.3s; animation-delay: 5.7s; }
.snow-particles span:nth-child(22) { left: 41%; width: 12px; height: 12px; animation-duration: 8.8s; animation-delay: 2.8s; }
.snow-particles span:nth-child(23) { left: 53%; width: 6px;  height: 6px;  animation-duration: 11.5s; animation-delay: 0.9s; }
.snow-particles span:nth-child(24) { left: 65%; width: 9px;  height: 9px;  animation-duration: 6.3s; animation-delay: 4.1s; }
.snow-particles span:nth-child(25) { left: 71%; width: 4px;  height: 4px;  animation-duration: 9.7s; animation-delay: 1.7s; }
.snow-particles span:nth-child(26) { left: 77%; width: 7px;  height: 7px;  animation-duration: 8.1s; animation-delay: 3.3s; }
.snow-particles span:nth-child(27) { left: 83%; width: 10px; height: 10px; animation-duration: 10.2s; animation-delay: 0.6s; }
.snow-particles span:nth-child(28) { left: 89%; width: 5px;  height: 5px;  animation-duration: 7.6s; animation-delay: 2.4s; }
.snow-particles span:nth-child(29) { left: 94%; width: 8px;  height: 8px;  animation-duration: 9.3s; animation-delay: 4.8s; }
.snow-particles span:nth-child(30) { left: 47%; width: 6px;  height: 6px;  animation-duration: 6.9s; animation-delay: 1.1s; }

/* Animação da Queda */
@keyframes fallAndSway {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    25% {
        transform: translateY(25vh) translateX(15px);
    }
    50% {
        transform: translateY(50vh) translateX(-15px);
    }
    75% {
        transform: translateY(75vh) translateX(15px);
        opacity: 0.8;
    }
    100% {
        transform: translateY(105vh) translateX(-10px);
        opacity: 0;
    }
}