/* 
 * Ficheiro: public/css/app-theme.css
 * Core visual theme para a Setta Creative (Glassmorphism, Animações, Reset)
 */

/* ==========================================================================
   RESET & TIPOGRAFIA BASE
   ========================================================================== */
   body { 
    font-family: 'Inter', sans-serif; 
    background-color: #020617; 
    color: #F8FAFC;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   UTILITÁRIOS GLOBAIS DE ESTRUTURA E FUNDO
   ========================================================================== */
.background-grid-pattern {
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* Gradiente dinâmico para o Fundo (Usado em Login/Auth) */
@keyframes subtleGradientShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}
.hero-background-gradient { 
    background: linear-gradient(-45deg, #020617, #080d21, #0f172a, #020617); 
    background-size: 400% 400%; 
    animation: subtleGradientShift 20s ease infinite; 
}

/* ==========================================================================
   ANIMAÇÕES REUTILIZÁVEIS
   ========================================================================== */
/* Entrada (Fade In Up) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Bolha Flutuante (Usado no fundo) */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
    animation: blob 10s infinite;
}

/* Scrolling Infinito (Usado no Carrossel de Empresas) */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.animate-scroll {
    animation: scroll 40s linear infinite;
}

/* Pulso lento */
.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================================================
   UI COMPONENTS (GLASSMORPHISM & BOTÕES)
   ========================================================================== */
.glassmorphism {
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-input {
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-input::placeholder {
    color: #64748b;
}
.glass-input:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: #06b6d4; /* bg-cyan-500 */
    outline: none;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    background-size: 200% 200%;
    transition: all 0.4s ease;
}
.btn-primary:hover {
    background-position: 100% 0;
    box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.5);
    transform: translateY(-2px);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px -5px rgba(6, 182, 212, 0.5);
}

.social-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Autofill Chrome Dark Mode Fix */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   EFEITO SPOTLIGHT (Holofote de Mouse)
   ========================================================================== */
.spotlight-card {
    position: relative;
    overflow: hidden;
}
.spotlight-card::before {
    content: '';
    position: absolute;
    left: var(--mouse-x, -100px);
    top: var(--mouse-y, -100px);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 60%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}
.spotlight-card:hover::before {
    opacity: 1;
}
.spotlight-card::after {
    content: '';
    position: absolute;
    left: var(--mouse-x, -100px);
    top: var(--mouse-y, -100px);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 60%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.spotlight-card:hover::after {
    opacity: 1;
}