/* CSS3 Custom — complementa Tailwind com estilos específicos */

/* ===== Base ===== */
:root {
  --nav-h: 5rem;   /* altura da navbar (usada no scroll-padding) */
}

html {
  scroll-padding-top: var(--nav-h);   /* evita que âncoras fiquem escondidas sob a navbar fixa */
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ===== Background grid ===== */
.bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 100%);
}

/* ===== Animations ===== */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.animate-pulse-slow { animation: pulse-slow 6s ease-in-out infinite; }

/* ===== Átomo animado (canto dos cards) =====
   Núcleo central + elétrons girando em órbita, com leve
   balanço 3D do conjunto. Usa o azul-claro do tema. */
.atom-spin {
  width: 116px;
  height: 116px;
  animation: atom-tilt 7s ease-in-out infinite;
}
.atom-spin .core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #e0f2fe, #7dd3fc 55%, #38bdf8);
  box-shadow: 0 0 12px rgba(125, 211, 252, 1), 0 0 24px rgba(125, 211, 252, 0.5);
}
.atom-spin .electron {
  position: absolute;
  left: 50%;
  top: calc(50% - 36px);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  transform-origin: 8px 44px;
  border-radius: 9999px;
  background: #e0f2fe;
  box-shadow: 0 0 8px rgba(125, 211, 252, 1), 0 0 16px rgba(125, 211, 252, 0.5);
}
.atom-spin .e1 { animation: atom-rot 2.4s linear infinite; }
.atom-spin .e2 { animation: atom-rot 2.4s linear infinite -0.8s; }
.atom-spin .e3 { animation: atom-rot 2.4s linear infinite -1.6s; }

@keyframes atom-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes atom-tilt {
  0%, 100% { transform: perspective(300px) rotateX(16deg) rotate(0deg); }
  50%      { transform: perspective(300px) rotateX(16deg) rotate(180deg); }
}

/* ===== Navbar ===== */
#navbar {
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  animation: nav-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#navbar.scrolled {
  background: rgba(6, 8, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
@keyframes nav-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nav-link {
  position: relative;
  transition: color 0.3s, background 0.3s;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #7dd3fc, #ffffff);
  transform: translateX(-50%);
  border-radius: 9999px;
  transition: width 0.3s;
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.7);
}
.nav-link:hover::after, .nav-link.text-white::after { width: 60%; }

/* ===== Contact button ===== */
.contact-btn {
  color: #0a0a0a;
  font-weight: 600;
  background: linear-gradient(90deg, #7dd3fc, #e0f2fe, #7dd3fc);
  background-size: 200% 100%;
  animation: contact-shine 4s linear infinite;
  box-shadow: 0 0 18px rgba(125, 211, 252, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.contact-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 30px rgba(125, 211, 252, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.35);
}
.contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: contact-sweep 3.2s ease-in-out infinite;
}
@keyframes contact-shine {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
@keyframes contact-sweep {
  0%, 55% { left: -120%; }
  85%, 100% { left: 130%; }
}
.contact-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ===== Section helpers ===== */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.section-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  color: #fff;
  margin-top: 1rem;
}
.grad-text {
  background: linear-gradient(90deg, #ffffff, #a3a3a3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Check badge ===== */
.check-badge {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e5e5;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.check-badge svg { color: #e5e5e5; }

/* ===== Áreas cards ===== */
.area-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all 0.3s;
}
.area-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.area-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  font-size: 1.5rem;
}
.area-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: #fff;
  margin-top: 1rem;
}
.area-desc { font-size: 0.78rem; color: #64748b; margin-top: 0.4rem; line-height: 1.5; }

/* ===== Service cards ===== */
.service-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.5rem;
  padding: 1.75rem;
  transition: all 0.35s;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}
.service-top { display: flex; align-items: center; gap: 1rem; }
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.35s;
}
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.08); }
.service-title { font-family: 'Sora', sans-serif; font-weight: 600; color: #fff; font-size: 1.1rem; }

/* ===== Mini stats ===== */
.mini-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}

/* ===== TRL badges ===== */
.badge-tr {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.badge-tr::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
}
.level2 { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.level2::before { background: #fbbf24; }
.level3 { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.level3::before { background: #34d399; }

/* ===== Research cards ===== */
.research-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.5rem;
  padding: 1.75rem;
  transition: all 0.35s;
}
.research-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

/* ===== News cards ===== */
.news-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.35s;
}
.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.25);
}
.news-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  font-size: 3.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
}
.news-card:hover .news-thumb { filter: brightness(1.15); }

/* ===== Contact ===== */
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.form-label { display: block; font-size: 0.8rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.4rem; }
.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  transition: all 0.3s;
}
.form-input::placeholder { color: #475569; }
.form-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* ===== Carousel dots ===== */
.carousel-dot.active {
  width: 1.75rem;
  background: linear-gradient(90deg, #ffffff, #737373);
  border-radius: 9999px;
}

/* ===== Toast ===== */
#toast.show {
  animation: toast-in 0.4s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Custom cursor =====
   Cursor custom composto por uma flecha azul (aponta ao mouse)
   e um átomo orbitando atrás dela. Só em dispositivos com mouse. */
@media (pointer: fine) {
  body, body * { cursor: none; }
}

/* Flecha e átomo: containers fixos, invisíveis até o mouse se mover */
.cursor-arrow,
.cursor-atoms {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Flecha do cursor */
.cursor-arrow {
  width: 20px;
  height: 20px;
  will-change: transform;
}

.cursor-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: #7dd3fc;
  filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.75)) drop-shadow(0 0 10px rgba(125, 211, 252, 0.35));
  transition: fill 0.15s ease;
}

.cursor-arrow.is-hover svg {
  fill: #bae6fd;
}

/* Átomo orbitando (elétrons ao redor do cursor) */
.cursor-atoms {
  width: 0;
  height: 0;
  z-index: 9998;
  will-change: transform;
}

/* Anel (órbita) de cada elétron */
.cursor-atom-ring {
  position: absolute;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 9999px;
  transform-origin: center;
}

/* Elétron (ponto azul brilhante que gira sobre a órbita) */
.cursor-atom-electron {
  position: absolute;
  border-radius: 9999px;
  background: #7dd3fc;
  box-shadow: 0 0 6px rgba(125, 211, 252, 0.9), 0 0 14px rgba(147, 197, 253, 0.5);
}

/* Touch: desativa o cursor custom e volta o padrão */
@media (pointer: coarse) {
  .cursor-arrow, .cursor-atoms, .cursor-atom-ring, .cursor-atom-electron { display: none; }
  body, body * { cursor: auto; }
}

/* ===== Modo claro =====
   Ativado via atributo data-theme="light" no <html> (padrão: claro).
   Sobrescreve as principais cores do tema ultra-dark para um visual claro. */
html[data-theme="light"] body { background: #f7f7f8; }

/* Fundos das seções alternadas e superfícies principais */
html[data-theme="light"] .bg-ink-950 { background-color: #f7f7f8; }
html[data-theme="light"] .bg-ink-900\/40 { background-color: rgba(244, 244, 246, 0.9); }
html[data-theme="light"] .bg-ink-900\/60 { background-color: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] .bg-ink-900\/95 { background-color: rgba(255, 255, 255, 0.97); }
html[data-theme="light"] .bg-ink-800 { background-color: #ffffff; }
html[data-theme="light"] .bg-ink-800\/50 { background-color: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .bg-ink-900\/40.bg-white\/5 { background-color: #ffffff; }

/* Textos */
html[data-theme="light"] .text-white { color: #111827; }
html[data-theme="light"] .text-slate-300 { color: #334155; }
html[data-theme="light"] .text-slate-400 { color: #475569; }
html[data-theme="light"] .text-slate-500 { color: #64748b; }
html[data-theme="light"] .text-slate-200 { color: #334155; }
html[data-theme="light"] .text-slate-100 { color: #1e293b; }

/* Bordas */
html[data-theme="light"] .border-white\/10 { border-color: #e2e8f0; }
html[data-theme="light"] .border-white\/15 { border-color: #cbd5e1; }
html[data-theme="light"] .border-white\/20 { border-color: #cbd5e1; }
html[data-theme="light"] .border-white\/5 { border-color: #e2e8f0; }
html[data-theme="light"] .border-dashed { border-color: #cbd5e1; }

/* Elementos criados por classes Tailwind com fundo branco translúcido (uso em claro) */
html[data-theme="light"] .bg-white\/5 { background-color: #ffffff; }
html[data-theme="light"] .bg-white\/10 { background-color: #ffffff; }
html[data-theme="light"] .bg-white\/3 { background-color: #ffffff; }
html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: #ffffff; }

/* Navbar em modo claro */
html[data-theme="light"] #navbar.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] #navbar .nav-link:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] #navbar .nav-link.text-white,
html[data-theme="light"] #navbar .nav-link { color: #334155; }
html[data-theme="light"] #navbar .nav-link.text-white { color: #0f172a; }
html[data-theme="light"] #navbar .nav-link::after {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}
html[data-theme="light"] #menuBtn { color: #334155; }
html[data-theme="light"] #menuBtn:hover { color: #0f172a; }

/* Mobile menu claro */
html[data-theme="light"] #mobileMenu { background: rgba(255, 255, 255, 0.97); border-top-color: #e2e8f0; }
html[data-theme="light"] #mobileMenu .mobile-link.text-white { color: #0f172a; }
html[data-theme="light"] #mobileMenu .mobile-link { color: #334155; }

/* Cards e componentes custom no claro */
html[data-theme="light"] .service-card,
html[data-theme="light"] .area-card,
html[data-theme="light"] .research-card,
html[data-theme="light"] .news-card,
html[data-theme="light"] .mini-stat {
  background: #ffffff;
  border-color: #e2e8f0;
}
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .area-card:hover,
html[data-theme="light"] .research-card:hover,
html[data-theme="light"] .news-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .area-card { background: #ffffff; }
html[data-theme="light"] .service-icon,
html[data-theme="light"] .area-icon,
html[data-theme="light"] .contact-icon,
html[data-theme="light"] .check-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}
html[data-theme="light"] .service-icon { background: #eef2ff; }
html[data-theme="light"] .section-title,
html[data-theme="light"] .area-title,
html[data-theme="light"] .service-title { color: #0f172a; }
html[data-theme="light"] .section-tag {
  color: #334155;
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .grad-text {
  background: linear-gradient(90deg, #111827, #475569);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Formulário claro */
html[data-theme="light"] .form-label { color: #334155; }
html[data-theme="light"] .form-input {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}
html[data-theme="light"] .form-input::placeholder { color: #94a3b8; }
html[data-theme="light"] .form-input:focus {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.35);
}

/* Área de prestação (cards internos grandes) */
html[data-theme="light"] .rounded-3xl.bg-ink-800\/50 { background: #ffffff; border-color: #e2e8f0; }

/* News thumb */
html[data-theme="light"] .news-thumb {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

/* Carrossel dots */
html[data-theme="light"] .carousel-dot.active {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

/* Scroll progress continua azul (ok nos dois temas) */

/* Link de destaque azul-claro mantém contraste razoável no claro */
html[data-theme="light"] .text-brand-200 { color: #0284c7; }
html[data-theme="light"] .text-brand-300 { color: #0369a1; }
html[data-theme="light"] .text-brand-100 { color: #0ea5e9; }

/* Exceções: áreas que permanecem escuras no modo claro (sobre fotos/gradientes)
   e, portanto, precisam manter o texto claro. */
html[data-theme="light"] .carousel-slide .text-white { color: #ffffff; }
html[data-theme="light"] .carousel-slide .text-slate-300 { color: #cbd5e1; }
html[data-theme="light"] .carousel-slide .text-brand-100 { color: #7dd3fc; }
html[data-theme="light"] #carousel { background: #0a0a0a; }

html[data-theme="light"] .cta-panel .text-white { color: #ffffff; }
html[data-theme="light"] .cta-panel .text-slate-400 { color: #94a3b8; }
html[data-theme="light"] .cta-panel .text-slate-200 { color: #e2e8f0; }
html[data-theme="light"] .cta-panel .grad-text {
  background: linear-gradient(90deg, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
}