/* ============================================
   Souza Nunes - Landing Page Styles
   Paleta Gemini: trust-navy + action-amber + bg-clean
   ============================================ */

:root {
  --trust-navy:  #0A2540;
  --navy-light:  #173F6B;
  --action-amber:#D97706;
  --amber-hover: #B45309;
  --whatsapp:    #25D366;
  --bg-clean:    #F8FAFC;
  --text-dark:   #0F172A;
  --text-muted:  #475569;
  --white:       #FFFFFF;
  --border-light:#E2E8F0;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-clean); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }

/* Smooth reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glass effect for navbar */
.glass {
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Floating pulse for WhatsApp (classic green) */
.whatsapp-float {
  animation: floatPulse 2s ease-in-out infinite;
}
@keyframes floatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50%      { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* FAQ accordion animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.faq-answer.open { max-height: 40rem; }

/* Card border hover */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(10, 37, 64, 0.15);
  border-color: var(--action-amber);
}

/* WhatsApp floating bubble visibility */
#snWhatsapp { display: none; }
@media (min-width: 768px) { #snWhatsapp { display: flex !important; } }

/* ============================================
   Quiz Qualificador
   ============================================ */
.quiz-progress-bar {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-slide {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.quiz-slide.out {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}
.quiz-btn {
  transition: all 0.2s ease;
}
.quiz-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(10, 37, 64, 0.2);
}
.quiz-btn:active {
  transform: scale(0.97);
}

/* ============================================
   Calculadora de Verbas Rescisórias
   ============================================ */
.calc-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.calc-input:focus {
  border-color: var(--action-amber);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}
.calc-result {
  animation: calcReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes calcReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Hero Video
   ============================================ */

/* Máscara radial: dissolve as bordas no fundo da página */
.sn-hero-video__media {
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at center, #000 55%, transparent 95%);
          mask-image: radial-gradient(ellipse 90% 90% at center, #000 55%, transparent 95%);
}
/* Vinheta + halo navy emergindo da base (transição suave pro hero atual) */
.sn-hero-video__vignette {
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(10,37,64,0.35) 100%),
    linear-gradient(to bottom, transparent 60%, #F8FAFC 100%);
}
/* Acessibilidade: usuários que preferem menos movimento veem só o poster */
@media (prefers-reduced-motion: reduce) {
  .sn-hero-video__media { display: none; }
  .sn-hero-video {
    background-image: url('../video/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}

/* Navbar entra suavemente após 2s, depois do impacto do vídeo */
@keyframes sn-nav-enter {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
#navbar {
  animation: sn-nav-enter 0.6s ease-out 2s both;
}

/* ===== Motion Graphics — Manifesto ===== */
/* Cada linha aparece, segura por ~1s e sai, dando lugar à próxima.
   O bloco final fica permanente (fill-mode forwards). */
@keyframes sn-mg-pulse {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  18%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  78%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  100% { opacity: 0; transform: translateY(-16px); filter: blur(6px); }
}
@keyframes sn-mg-final {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
@keyframes sn-fade-in { to { opacity: 1; } }

.sn-mg { opacity: 0; will-change: opacity, transform, filter; }
.sn-mg--1 { animation: sn-mg-pulse  1.6s cubic-bezier(.2,.7,.2,1) 0.4s forwards; }
.sn-mg--2 { animation: sn-mg-pulse  1.6s cubic-bezier(.2,.7,.2,1) 2.0s forwards; }
.sn-mg--3 { animation: sn-mg-pulse  1.6s cubic-bezier(.2,.7,.2,1) 3.6s forwards; }
.sn-mg--4 { animation: sn-mg-final  1.0s cubic-bezier(.2,.7,.2,1) 5.2s forwards; }

/* Indicador de scroll só aparece quando o manifesto termina */
.sn-scroll-hint { opacity: 0; animation: sn-fade-in 0.6s ease-out 6.0s forwards; }

@media (prefers-reduced-motion: reduce) {
  #navbar, .sn-scroll-hint { animation: none; opacity: 1; }
  .sn-mg--1, .sn-mg--2, .sn-mg--3 { display: none; }
  .sn-mg--4 { animation: none; opacity: 1; }
}

/* ===== Segmentação Empregado / Empregador ===== */
.sn-aud-btn { color: #475569; }
.sn-aud-btn.aud-active { background: #0A2540; color: #fff; }
/* Filtro de cards (excluindo os próprios botões do toggle) */
body.aud-empregado  [data-aud="empregador"]:not(.sn-aud-btn) { display: none !important; }
body.aud-empregador [data-aud="empregado"]:not(.sn-aud-btn)  { display: none !important; }
/* Troca de copy no hero */
body.aud-empregado  [data-aud-text="empregador"] { display: none; }
body.aud-empregador [data-aud-text="empregado"]  { display: none; }

/* ============================================
   Cookie Consent — Banner + Modal
   ============================================ */

/* Banner slide-up */
.sn-consent-banner {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
}

/* Modal overlay fade */
.sn-consent-overlay {
  animation: sn-consent-fade-in 0.25s ease both;
}
@keyframes sn-consent-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Toggle switch */
.sn-consent-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 44px;
  height: 24px;
  background: #CBD5E1;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  margin: 0;
}
.sn-consent-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sn-consent-toggle:checked {
  background: #D97706;
}
.sn-consent-toggle:checked::after {
  transform: translateX(20px);
}
.sn-consent-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sn-consent-toggle:disabled::after {
  background: #94A3B8;
}

/* Modal full-screen on mobile */
@media (max-width: 639px) {
  .sn-consent-modal-wrapper .sn-consent-overlay {
    display: none;
  }
}