/* Estilos base herdados do site atual + acréscimos para as novas seções */
html { scroll-behavior: smooth; }
body { background-color: #050505; overflow-x: hidden; }

/* Animações */
.slide-up { animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Revelação ao rolar (sem JS o conteúdo fica visível). O JS aplica --delay em cascata entre irmãos */
.reveal, .reveal-left, .reveal-right { transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0s); }
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .reveal-left { opacity: 0; transform: translateX(-40px); }
.js .reveal-right { opacity: 0; transform: translateX(40px); }
.js .is-visible { opacity: 1 !important; transform: none !important; }

/* Hero dividido — Ken Burns lento e contínuo (cada lado numa fase diferente) */
.bg-img { animation: kenburns 32s ease-in-out infinite alternate; }
.hero-container:nth-child(2) .bg-img { animation-delay: -16s; animation-direction: alternate-reverse; }
@keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, 1%, 0); } }

/* Entrada escalonada dos elementos do hero */
.stagger > * { opacity: 0; animation: slideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .15s; }
.stagger > *:nth-child(2) { animation-delay: .30s; }
.stagger > *:nth-child(3) { animation-delay: .45s; }
.stagger > *:nth-child(4) { animation-delay: .60s; }
.stagger > *:nth-child(5) { animation-delay: .75s; }
.stagger-late > *:nth-child(1) { animation-delay: .45s; }
.stagger-late > *:nth-child(2) { animation-delay: .60s; }
.stagger-late > *:nth-child(3) { animation-delay: .75s; }
.stagger-late > *:nth-child(4) { animation-delay: .90s; }

/* Cabeçalho fixo que ganha fundo depois do hero */
header[data-sticky] { position: fixed; transition: background-color .6s ease, padding .6s ease, border-color .6s ease; border-bottom: 1px solid transparent; }
header[data-sticky].is-scrolled { background-color: rgba(5, 5, 5, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: 1rem; padding-bottom: 1rem; border-color: #18181b; }

/* Indicador de scroll */
.scroll-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fadeInUp 1.5s 1.4s ease forwards; }
.scroll-hint span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scroll-hint i { display: block; width: 1px; height: 4.5rem; background: linear-gradient(to bottom, #D4AF37, transparent); transform-origin: top; animation: scrollLine 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Faixa em movimento (marquee) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; white-space: nowrap; }
.marquee__set i { display: block; width: 4px; height: 4px; background: #D4AF37; transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Anel pulsante da foto */
.ring-pulse { position: relative; }
.ring-pulse::before, .ring-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; border: 1px solid rgba(212, 175, 55, .6); animation: ringPulse 3.2s ease-out infinite; }
.ring-pulse::after { animation-delay: 1.6s; }
@keyframes ringPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }

/* Linha vertical que cresce */
.js .line-grow { transform: scaleY(0); transform-origin: top; transition: transform 1.2s .4s cubic-bezier(0.16, 1, 0.3, 1); }
.js .line-grow.is-visible { transform: scaleY(1) !important; }

/* Links do menu com sublinhado que cresce */
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: #D4AF37; transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Botões: seta desliza e brilho passa no dourado */
.btn-arrow svg { transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-arrow:hover svg { transform: translateX(6px); }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .8s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-shine:hover::after { left: 125%; }
.overlay-dark { background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.2) 100%); }
@media (max-width: 768px) {
  .hero-container { height: 50vh; min-height: 420px; }
  .content-box { padding-top: 5rem; }
}

/* Cards com imagem (ecossistema e insights) */
.card-img { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease; filter: grayscale(100%); }
.group:hover .card-img { transform: scale(1.06); filter: grayscale(0%); }
.card-lift { transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1), border-color .5s ease, box-shadow .7s ease; }
.card-lift:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.pilar { transition: background-color .5s ease; }
.pilar:hover { background-color: #111111; }
.pilar span { display: inline-block; transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1); }
.pilar:hover span { transform: translateX(6px); }

/* Textura sutil (404 / páginas internas) */
.noise-bg { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); }

/* Texto de artigos e política */
.prose-dark p { margin-bottom: 1.5rem; }
.prose-dark h2 { font-family: "Playfair Display", serif; color: #fff; font-size: 1.5rem; line-height: 1.3; margin: 3rem 0 1.25rem; font-weight: 400; }
.prose-dark h3 { color: #fff; font-weight: 500; font-size: 0.95rem; letter-spacing: .08em; text-transform: uppercase; margin: 2rem 0 .75rem; }
.prose-dark ul, .prose-dark ol { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.prose-dark li { position: relative; padding-left: 1.5rem; margin-bottom: .75rem; }
.prose-dark li::before { content: ""; position: absolute; left: 0; top: .75em; width: .75rem; height: 1px; background: #D4AF37; }
.prose-dark blockquote { border-left: 1px solid #D4AF37; padding-left: 1.5rem; margin: 2.5rem 0; font-family: "Playfair Display", serif; font-style: italic; font-size: 1.25rem; color: #e4e4e7; line-height: 1.6; }
.prose-dark strong { color: #e4e4e7; font-weight: 500; }
.prose-dark a { color: #D4AF37; text-decoration: underline; text-underline-offset: 4px; }

/* Barra de rolagem */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #D4AF37; }

/* Quem pede menos movimento recebe tudo estático e visível */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stagger > *, .scroll-hint, .fade-in-up { opacity: 1 !important; }
  .js .reveal, .js .reveal-left, .js .reveal-right, .js .line-grow { opacity: 1; transform: none; }
}