/**
 * Estilos principais do Pixpsd
 * 
 * Arquivo CSS principal com estilos customizados específicos do projeto.
 * O Tailwind CSS é carregado via CDN no HTML.
 */

/* Importação da fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Variáveis CSS customizadas */
:root {
    --color-purple-pixpsd: #8A2BE2;
    --color-turquoise-pixpsd: #40E0D0;
    --color-bg-dark: #1a1a2e;
    --color-text-light: #e0e0e0;
}

/* Reset e configurações globais */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
}

/* Classes de utilidade customizadas */
.text-purple-pixpsd {
    color: var(--color-purple-pixpsd);
}

.text-turquoise-pixpsd {
    color: var(--color-turquoise-pixpsd);
}

.bg-purple-pixpsd {
    background-color: var(--color-purple-pixpsd);
}

.bg-turquoise-pixpsd {
    background-color: var(--color-turquoise-pixpsd);
}

/* Efeitos de botão com hover */
.btn-hover-effect {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Texto com gradiente */
.text-gradient-pixpsd {
    background-image: linear-gradient(to right, var(--color-turquoise-pixpsd), var(--color-purple-pixpsd));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Efeitos de dropdown */
.dropdown-menu {
    transition: all 0.2s ease-in-out;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
}

.dropdown-menu.show {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

/* Efeitos do ícone home */
.home-icon-link:hover svg {
    transform: scale(1.1);
}

/* Efeitos dos botões do header */
.header-btn-forward-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.header-btn-forward-effect:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsividade adicional */
@media (max-width: 640px) {
    .text-gradient-pixpsd {
        font-size: 2rem;
    }
}

/* Animações customizadas */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Estilo para notificações */
.notification-show {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.notification-hide {
    transform: scale(0) !important;
    opacity: 0 !important;
}