/* ======================================================
   1. DIRETIVAS DO TAILWIND (OBRIGATÓRIO NO INÍCIO)
   ====================================================== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ======================================================
   2. CONFIGURAÇÕES GERAIS E VARIÁVEIS
   ====================================================== */
:root {
    --navy-dark: #0B1120;
    --teal-main: #14b8a6;
    --anim-speed: 0.4s;
    --anim-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

/* ======================================================
   3. INTEGRAÇÃO COM O SCRIPT.JS (NOVO)
   ====================================================== */

/* Previne o "FOUC" (Flash of Unstyled Content) nos cards do Hero */
/* O GSAP vai tornar isso visível automaticamente quando carregar */
.gsap-card {
    visibility: hidden;
}

/* Estrutura do Botão "Ver Exemplos" para a animação da seta */
.btn-exemplos {
    position: relative;
    overflow: hidden; /* Esconde a seta quando ela sai para a esquerda */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Espaço entre texto e seta */
}

/* ======================================================
   4. SEUS ESTILOS ORIGINAIS (MANTIDOS)
   ====================================================== */

/* Animações Gerais (Scroll Fade-In) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, visibility;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/* PORTFÓLIO */
.portfolio-card { transition: all var(--anim-speed) var(--anim-curve); }
.portfolio-card:hover {
    transform: translateY(-8px);
    border-color: #cbd5e1;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Fundo do Hover (Overlay Gradiente) */
.case-overlay {
    background: linear-gradient(to bottom, rgba(11, 17, 32, 0.8), rgba(20, 184, 166, 0.9));
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--anim-speed) var(--anim-curve);
}
.portfolio-card:hover .case-overlay { opacity: 1; visibility: visible; transform: translateY(0); }

/* Decorativos */
.blob-decoration { transition: transform 0.7s ease; }
.portfolio-card:hover .blob-decoration { transform: scale(1.5); opacity: 0.3; }

.icon-box { background: rgba(255, 255, 255, 0.05); transition: all var(--anim-speed) ease; }
.portfolio-card:hover .icon-box { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: scale(1.1); }

.card-title, .arrow-icon { transition: color 0.3s ease; }
.portfolio-card:hover .card-title, .portfolio-card:hover .arrow-icon { color: var(--teal-main); }

/* Link "Ver Todo Portfolio" */
.portfolio-link { transition: color 0.3s ease; }
.portfolio-link:hover { color: var(--teal-main); }
.link-circle { transition: all 0.3s ease; }
.portfolio-link:hover .link-circle { background-color: var(--teal-main); border-color: var(--teal-main); color: white; }
.link-arrow { transition: transform 0.3s ease; }
.portfolio-link:hover .link-arrow { transform: rotate(-45deg); }

/* FAQ Accordion (Checkbox Hack) */
.faq-toggle { display: none; }
.faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-inner { overflow: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform 0.4s ease; font-size: 1.05rem; line-height: 1.7; }

/* FAQ Ativo */
.faq-toggle:checked + .faq-label + .faq-content { grid-template-rows: 1fr; }
.faq-toggle:checked + .faq-label + .faq-content .faq-inner { padding-bottom: 1.5rem; opacity: 1; transform: translateY(0); }
.faq-toggle:checked + .faq-label .faq-icon { transform: rotate(45deg); background: #14b8a6; color: white; }
.faq-toggle:checked + .faq-label { color: #14b8a6; }
.faq-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #14b8a6; opacity: 0; transition: opacity 0.3s ease; }
.faq-card:has(.faq-toggle:checked)::before { opacity: 1; }

/* FOOTER & CONTATO */
.footer-link { transition: all 0.3s ease; }
.footer-link:hover { color: var(--teal-main); padding-left: 8px; }
.footer-link::before { content: "›"; opacity: 0; margin-right: 0px; font-size: 1.2em; transition: all 0.3s ease; display: inline-block; transform: translateX(-10px); }
.footer-link:hover::before { opacity: 1; margin-right: 8px; transform: translateX(0); }

.social-btn { background: rgba(255, 255, 255, 0.05); transition: all 0.3s ease; }
.social-btn:hover { background: var(--teal-main); border-color: var(--teal-main); color: white; transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3); }

/* Contato Glassmorphism */
.contact-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.contact-input { background: rgba(2, 6, 23, 0.5); border: 1px solid rgba(51, 65, 85, 0.5); color: white; transition: all 0.3s ease; }
.contact-input:focus { background: rgba(2, 6, 23, 0.8); border-color: var(--teal-main); outline: none; box-shadow: 0 0 0 1px var(--teal-main); }
.input-icon { color: #94a3b8; transition: color 0.3s ease; }
.group:focus-within .input-icon { color: var(--teal-main); }
.contact-btn { background: var(--teal-main); color: white; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; }
.contact-btn:hover { background: #2dd4bf; transform: translateY(-2px); box-shadow: 0 0 30px rgba(20, 184, 166, 0.6); }