/**
 * Estilos da Página Inicial - Lista da Dila v1.0
 * Tela de seleção de usuário com versículos bíblicos
 */

/* ========================================
   LAYOUT PRINCIPAL
   ======================================== */
.home-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #FDF6FB 0%, #EDE9FE 50%, #FCE4F0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    overflow: hidden;
    position: relative;
}

/* Decoração de fundo */
.home-page::before,
.home-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
}

.home-page::before {
    width: 300px;
    height: 300px;
    background: var(--cor-primaria);
    top: -100px;
    right: -100px;
    filter: blur(80px);
}

.home-page::after {
    width: 250px;
    height: 250px;
    background: var(--cor-secundaria);
    bottom: -80px;
    left: -80px;
    filter: blur(60px);
}

/* ========================================
   CONTAINER PRINCIPAL
   ======================================== */
.home-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease 0.3s forwards;
}

/* ========================================
   LOGO E TÍTULO
   ======================================== */
.home-logo {
    margin-bottom: var(--spacing-xl);
}

.home-logo-icon {
    font-size: 72px;
    display: block;
    margin-bottom: var(--spacing-md);
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.home-logo-text {
    font-size: var(--fonte-size-3xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   PERGUNTA
   ======================================== */
.home-question {
    font-size: var(--fonte-size-xl);
    font-weight: 700;
    color: var(--cor-texto);
    margin-bottom: var(--spacing-xl);
    opacity: 0;
    animation: fadeIn 0.6s ease 0.8s forwards;
}

/* ========================================
   BOTÕES DE SELEÇÃO
   ======================================== */
.home-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.btn-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border: none;
    border-radius: var(--borda-radius-lg);
    font-family: var(--fonte);
    font-size: var(--fonte-size-xl);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 80px;
    opacity: 0;
    transform: translateX(-30px);
}

.btn-user:nth-child(1) {
    animation: slideInLeft 0.5s ease 1s forwards;
}

.btn-user:nth-child(2) {
    animation: slideInRight 0.5s ease 1.2s forwards;
    transform: translateX(30px);
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.btn-user:hover {
    transform: scale(1.03) !important;
}

.btn-user:active {
    transform: scale(0.98) !important;
}

/* Botão Dila */
.btn-dila {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #FF6B9D 100%);
    color: white;
    box-shadow: 0 8px 30px rgba(233, 30, 140, 0.4);
}

.btn-dila:hover {
    box-shadow: 0 12px 40px rgba(233, 30, 140, 0.5);
}

/* Botão Eduardo */
.btn-edu {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    color: white;
    box-shadow: 0 8px 30px rgba(30, 41, 59, 0.4);
}

.btn-edu:hover {
    box-shadow: 0 12px 40px rgba(30, 41, 59, 0.5);
}

.btn-user-icon {
    font-size: 32px;
}

.btn-user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.btn-user-name {
    font-size: var(--fonte-size-xl);
    line-height: 1.2;
}

.btn-user-desc {
    font-size: var(--fonte-size-sm);
    opacity: 0.8;
    font-weight: 400;
}

/* ========================================
   VERSÍCULO BÍBLICO
   ======================================== */
.verse-container {
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards;
}

.verse-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: var(--borda-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--sombra-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.verse-icon {
    font-size: 24px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

.verse-text {
    font-size: var(--fonte-size-base);
    font-style: italic;
    color: var(--cor-texto);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.verse-reference {
    font-size: var(--fonte-size-sm);
    color: var(--cor-cinza);
    font-weight: 600;
}

/* ========================================
   CORAÇÃO ANIMADO
   ======================================== */
.heart-decoration {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
}

.heart-1 {
    top: 15%;
    left: 10%;
    font-size: 40px;
    animation: float 6s ease-in-out infinite;
}

.heart-2 {
    top: 60%;
    right: 8%;
    font-size: 30px;
    animation: float 8s ease-in-out infinite 1s;
}

.heart-3 {
    bottom: 20%;
    left: 15%;
    font-size: 25px;
    animation: float 7s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* ========================================
   RESPONSIVO
   ======================================== */
@media (max-width: 480px) {
    .home-logo-icon {
        font-size: 56px;
    }
    
    .home-logo-text {
        font-size: var(--fonte-size-2xl);
    }
    
    .home-question {
        font-size: var(--fonte-size-lg);
    }
    
    .btn-user {
        min-height: 70px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .btn-user-icon {
        font-size: 28px;
    }
    
    .btn-user-name {
        font-size: var(--fonte-size-lg);
    }
}

@media (min-width: 768px) {
    .home-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .btn-user {
        flex: 1;
        max-width: 200px;
    }
}

/* ========================================
   PWA - SAFE AREA
   ======================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .home-page {
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    }
}