/* ==========================================================================
   MSA CODE — CAMADA DE ANIMAÇÕES & MICROINTERAÇÕES EDITORIAIS (V2)
   Direção: Minimalista, editorial, conduzida pelo scroll real do usuário.
   Hierarquia: 1 animação forte (título) + 1 secundária (linha) + conteúdo natural.
   Sem cascades longas, sem delays artificiais, sem fade-up em tudo.
   Acessibilidade: Suporte estrito a prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-title: 0.72s;
  --duration-line: 0.65s;
  --duration-block: 0.55s;
  --duration-micro: 0.24s;
}

/* ==========================================================================
   1. REVELAÇÃO EDITORIAL DOS TÍTULOS (MÁSCARA VERTICAL)
   Elemento principal de destaque. overflow: hidden com translateY(105%) -> 0
   Duração: ~720ms com desaceleração suave
   ========================================================================== */
.editorial-title-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em; /* Previne corte tipográfico de descendentes (g, j, p, q, y) */
  margin-bottom: -0.14em;
}

.editorial-title-line {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0.001;
  transition: transform var(--duration-title) var(--ease-editorial),
              opacity calc(var(--duration-title) * 0.7) var(--ease-editorial);
  will-change: transform, opacity;
}

/* Ativado exclusivamente quando o título atinge a linha de ativação (85-95% da viewport) */
.editorial-title-line.is-revealed,
.is-revealed > .editorial-title-mask > .editorial-title-line,
.is-revealed .editorial-title-line {
  transform: translateY(0);
  opacity: 1;
}

/* Pequeno stagger entre linhas do mesmo título quando houver quebra */
.editorial-title-mask:nth-child(2) .editorial-title-line {
  transition-delay: 80ms;
}

/* ==========================================================================
   1.1 SEÇÃO DO PROBLEMA (#problema) — A REALIDADE DEPOIS DO CLIQUE
   Coreografia Dirigida:
   1. Título termina 100% (máscara editorial)
   2. CLIQUE (Esquerda -> Direita, clip-path horizontal, transform: translateX(-14px))
   3. Seta 1 (opacity 0 -> 1, translateX(-4px) -> 0 no svg)
   4. PÁGINA DE DESTINO (Baixo -> Cima, clip-path vertical, transform: translateY(18px))
   5. Seta 2 (opacity 0 -> 1, translateX(-4px) -> 0 no svg)
   6. AÇÃO (Direita -> Esquerda, clip-path horizontal, transform: translateX(14px))
   ========================================================================== */

.section-problem .problem-point {
  will-change: transform, clip-path, opacity;
  transition: clip-path 0.5s var(--ease-editorial),
              transform 0.5s var(--ease-editorial),
              opacity 0.5s var(--ease-editorial);
}

/* 1. CLIQUE: Esquerda -> Direita */
.section-problem .problem-point[data-direction="ltr"] {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-14px);
  opacity: 0;
}

.section-problem .problem-point[data-direction="ltr"].is-active,
.section-problem .problem-point[data-direction="ltr"].is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
  opacity: 1;
}

/* 2. PÁGINA DE DESTINO: Baixo -> Cima */
.section-problem .problem-point[data-direction="up"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(18px);
  opacity: 0;
}

.section-problem .problem-point[data-direction="up"].is-active,
.section-problem .problem-point[data-direction="up"].is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  opacity: 1;
}

/* 3. AÇÃO: Direita -> Esquerda */
.section-problem .problem-point[data-direction="rtl"] {
  clip-path: inset(0 0 0 100%);
  transform: translateX(14px);
  opacity: 0;
}

.section-problem .problem-point[data-direction="rtl"].is-active,
.section-problem .problem-point[data-direction="rtl"].is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
  opacity: 1;
}

/* Setas Conectoras: revelação discreta na direção do fluxo, sem scale */
.section-problem .problem-point-arrow svg {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.22s var(--ease-editorial),
              transform 0.22s var(--ease-editorial);
  will-change: opacity, transform;
}

.section-problem .problem-point-arrow.is-active svg,
.section-problem .problem-point-arrow.is-revealed svg {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   2. SEÇÃO DOS 7 PRINCÍPIOS (#eficaz) — APRESENTAÇÃO PROGRESSIVA E DIRIGIDA
   Sequência encadeada: Título -> 01 (linha + texto) -> 02 -> ... -> 07.
   Alternância de direção:
   - Ímpares (01, 03, 05, 07): Esquerda -> Direita (LTR)
   - Pares (02, 04, 06): Direita -> Esquerda (RTL)
   Hierarquia rigorosa:
   1. Linha horizontal anima primeiro (scaleX 0 -> 1) no sentido do item
   2. Conteúdo anima em seguida no mesmo sentido via revelação horizontal (clip-path)
   3. Próximo item só inicia quando o atual concluir 100%
   ========================================================================== */
.section-effective .principle-item {
  position: relative;
  border-bottom: none !important;
}

/* Linha horizontal abaixo de cada princípio */
.section-effective .principle-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--section-border, rgba(255, 255, 255, 0.15));
  transform: scaleX(0);
  transition: transform 0.44s var(--ease-editorial);
  will-change: transform;
}

/* Origem da linha por sentido */
.section-effective .principle-item[data-direction="ltr"] .principle-line {
  transform-origin: left center;
}

.section-effective .principle-item[data-direction="rtl"] .principle-line {
  transform-origin: right center;
}

/* Etapa 1: Linha anima */
.section-effective .principle-item.is-line-active .principle-line,
.section-effective .principle-item.is-revealed .principle-line {
  transform: scaleX(1);
}

/* Conteúdo unificado (número + título + descrição) */
.section-effective .principle-item-content {
  will-change: transform, clip-path, opacity;
  transition: clip-path 0.48s var(--ease-editorial),
              transform 0.48s var(--ease-editorial),
              opacity 0.32s ease;
}

/* Estado inicial do conteúdo: Esquerda -> Direita (LTR) */
.section-effective .principle-item[data-direction="ltr"] .principle-item-content {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-16px);
  opacity: 0.001;
}

/* Estado inicial do conteúdo: Direita -> Esquerda (RTL) */
.section-effective .principle-item[data-direction="rtl"] .principle-item-content {
  clip-path: inset(0 0 0 100%);
  transform: translateX(16px);
  opacity: 0.001;
}

/* Etapa 2: Conteúdo anima e se revela no sentido */
.section-effective .principle-item.is-content-active .principle-item-content,
.section-effective .principle-item.is-revealed .principle-item-content {
  clip-path: inset(0 0% 0 0);
  transform: translateX(0);
  opacity: 1;
}

/* ==========================================================================
   3. PLANOS (#planos) — INVESTIMENTO & ESCOPO
   Composição Editorial Progressiva:
   1. Kicker primeiro -> Título principal (~110ms stagger)
   2. Card Essencial (Esquerda -> Direita, clip-path horizontal, transform: translateX(-18px))
   3. Card Profissional (Baixo -> Cima, clip-path vertical, transform: translateY(22px))
   4. Card Performance (Direita -> Esquerda, clip-path horizontal, transform: translateX(18px))
   Sem stagger interno de elementos (o card entra como peça única).
   Liberação automática de will-change ao concluir a transição.
   ========================================================================== */

/* Stagger hierárquico entre Kicker e Título dos Planos */
.plans-header .plans-kicker .editorial-title-line {
  transition-delay: 0ms;
}

.plans-header .plans-title .editorial-title-line {
  transition-delay: 110ms;
}

/* Card Individual: Composição gráfica sólida única */
.section-plans .plan-item {
  will-change: transform, clip-path, opacity;
  transition: clip-path 0.5s var(--ease-editorial),
              transform 0.5s var(--ease-editorial),
              opacity 0.5s var(--ease-editorial);
}

/* 1. Essencial: Esquerda -> Direita */
.section-plans .plan-item[data-direction="ltr"] {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-18px);
  opacity: 0;
}

/* 2. Profissional: Baixo -> Cima */
.section-plans .plan-item[data-direction="up"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(22px);
  opacity: 0;
}

/* 3. Performance: Direita -> Esquerda */
.section-plans .plan-item[data-direction="rtl"] {
  clip-path: inset(0 0 0 100%);
  transform: translateX(18px);
  opacity: 0;
}

/* Ativação: O card inteiro entra e se revela junto */
.section-plans .plan-item.is-active,
.section-plans .plan-item.is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translate(0);
  opacity: 1;
}

/* Liberação de will-change e preservação integral dos efeitos de hover */
.section-plans .plan-item.is-revealed {
  will-change: auto;
}

/* ==========================================================================
   4. FAQ (#faq)
   Praticamente estático no scroll. Apenas título e linha inicial.
   Perguntas já permanecem no layout. Movimento focado na interação de clique.
   ========================================================================== */
.section-faq .faq-list {
  position: relative;
}

.section-faq .faq-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--section-border, rgba(0, 0, 0, 0.10));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-line) var(--ease-editorial);
  will-change: transform;
}

.section-faq .faq-list.is-revealed::before {
  transform: scaleX(1);
}

/* Acordeão: expansão suave em Grid ao abrir/fechar */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-editorial);
  overflow: hidden;
  padding-bottom: 0 !important;
}

.faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  padding-bottom: clamp(1.35rem, 2.2vh, 1.85rem);
}

.faq-item[open] .faq-content {
  grid-template-rows: 1fr;
}

.faq-item[open] .faq-answer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Rotação limpa de 0deg -> 45deg no sinal '+' para formar '×' */
.faq-indicator {
  transition: transform var(--duration-micro) var(--ease-editorial),
              color var(--duration-micro) ease !important;
  transform-origin: center center;
}

.faq-indicator::after {
  content: "+" !important;
  display: block;
  line-height: 1;
}

.faq-item[open] .faq-indicator {
  transform: rotate(45deg);
  color: var(--section-text, #000000);
}

/* ==========================================================================
   5. CONTATO (#contato)
   Título revela. Card do formulário entra como bloco único (SEM stagger campo por campo).
   Microinteração refinada na linha inferior de foco dos inputs.
   ========================================================================== */
.section-contact .contact-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-block) var(--ease-editorial),
              transform var(--duration-block) var(--ease-editorial);
  will-change: opacity, transform;
}

.section-contact .contact-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Linha inferior de foco nos inputs (scaleX 0 -> 1) */
.form-group {
  position: relative;
}

.form-focus-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000000;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-editorial);
  pointer-events: none;
  z-index: 2;
}

.form-group.is-focused .form-focus-line,
.form-group:focus-within .form-focus-line,
.form-input:focus ~ .form-focus-line,
.form-select:focus ~ .form-focus-line,
.form-textarea:focus ~ .form-focus-line {
  transform: scaleX(1);
}

.form-group.is-focused .form-label,
.form-group:focus-within .form-label {
  color: #000000;
  transform: translateY(-1px);
}

.form-group .form-label {
  transition: color var(--duration-micro) ease,
              transform var(--duration-micro) var(--ease-editorial);
  transform-origin: left center;
}

/* ==========================================================================
   6. RODAPÉ (#rodape)
   Linha superior cresce da esquerda e o conteúdo surge junto.
   Sem stagger individual de cada link.
   ========================================================================== */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s var(--ease-editorial);
  will-change: transform;
}

.site-footer.is-revealed::before {
  transform: scaleX(1);
}

.site-footer .footer-container {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-editorial) 100ms,
              transform 0.5s var(--ease-editorial) 100ms;
}

.site-footer.is-revealed .footer-container {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   7. CARROSSEL DE DEPOIMENTOS (#depoimentos)
   Transição vertical limpa na troca de slide (sem blur, sem fade na seção)
   ========================================================================== */
.testimonial-card {
  transition: opacity 0.38s var(--ease-editorial),
              transform 0.38s var(--ease-editorial) !important;
  will-change: opacity, transform;
}

.testimonial-card.is-active-slide {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.testimonial-card.is-leaving-slide {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

/* ==========================================================================
   8. MICROINTERAÇÕES GLOBAIS: BOTÕES E LINKS
   Sem scale(1.05); movimento de seta e underline tipográfico
   ========================================================================== */
.btn-cta .btn-cta-icon,
.contact-submit-btn .btn-arrow-icon {
  transition: transform var(--duration-micro) var(--ease-editorial);
  will-change: transform;
}

.btn-cta:hover .btn-cta-icon,
.contact-submit-btn:hover .btn-arrow-icon {
  transform: translateX(5px);
}

.btn-cta:hover,
.plan-cta:hover,
.contact-submit-btn:hover {
  transform: none !important;
}

.editorial-link-hover {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.editorial-link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-micro) var(--ease-editorial);
}

.editorial-link-hover:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   9. RESPONSIVIDADE (MOBILE)
   Deslocamentos reduzidos (8px - 12px)
   ========================================================================== */
@media (max-width: 768px) {
  .section-problem .problem-point[data-direction="ltr"] {
    transform: translateX(-10px);
  }

  .section-problem .problem-point[data-direction="up"] {
    transform: translateY(12px);
  }

  .section-problem .problem-point[data-direction="rtl"] {
    transform: translateX(10px);
  }

  .section-problem .problem-point.is-active,
  .section-problem .problem-point.is-revealed {
    transform: translate(0) !important;
  }

  .section-plans .plan-item[data-direction="ltr"] {
    transform: translateX(-10px);
  }

  .section-plans .plan-item[data-direction="up"] {
    transform: translateY(12px);
  }

  .section-plans .plan-item[data-direction="rtl"] {
    transform: translateX(10px);
  }

  .section-plans .plan-item.is-active,
  .section-plans .plan-item.is-revealed {
    transform: translate(0) !important;
  }

  .section-contact .contact-card {
    transform: translateY(14px);
  }

  .section-effective .principle-item[data-direction="ltr"] .principle-item-content {
    transform: translateX(-10px);
  }

  .section-effective .principle-item[data-direction="rtl"] .principle-item-content {
    transform: translateX(10px);
  }

  .section-effective .principle-item.is-content-active .principle-item-content,
  .section-effective .principle-item.is-revealed .principle-item-content {
    transform: translateX(0);
  }

  .site-footer .footer-container {
    transform: translateY(8px);
  }
}

/* ==========================================================================
   10. ACESSIBILIDADE: PREFERS-REDUCED-MOTION
   Conteúdo imediatamente visível sem movimento ou atrasos
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .editorial-title-line,
  .section-problem .problem-point,
  .section-problem .problem-point-arrow svg,
  .section-plans .plan-item,
  .section-contact .contact-card,
  .section-effective .principle-item-content,
  .site-footer .footer-container,
  .faq-answer-inner {
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .section-effective .principle-line,
  .section-faq .faq-list::before,
  .site-footer::before,
  .form-focus-line {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .faq-indicator,
  .btn-cta .btn-cta-icon,
  .contact-submit-btn .btn-arrow-icon {
    transition: none !important;
  }
}