html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background:#0A0A0A; }
h1,h2,h3,h4,.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* trilho rail line that draws itself on scroll */
.rail-line { position: relative; }
.rail-line::before {
  content:""; position:absolute; left:0; top:50%; height:2px; width:0%;
  background: currentColor; transition: width 1.1s cubic-bezier(.4,0,.2,1);
}
.rail-line.rail-in::before { width:100%; }

/* duotone treatment: alto contraste + um acento por peça */
.duotone { position:relative; overflow:hidden; }
.duotone img { filter: grayscale(1) contrast(1.2) brightness(.85); display:block; width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease, filter 0.5s ease; }
.duotone:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.03); }
.duotone.duotone-ember::after{ content:""; position:absolute; inset:0; background:#A62F1E; mix-blend-mode:multiply; opacity:.55; pointer-events:none; transition: opacity 0.5s ease; }
.duotone.duotone-ember:hover::after{ opacity: 0.15; }
.duotone.duotone-ember::before{ content:""; position:absolute; inset:0; background:#0A0A0A; mix-blend-mode:color-dodge; opacity:.06; z-index:1; pointer-events:none; }
.duotone.duotone-teal::after{ content:""; position:absolute; inset:0; background:#017F6E; mix-blend-mode:multiply; opacity:.55; pointer-events:none; transition: opacity 0.5s ease; }
.duotone.duotone-teal:hover::after{ opacity: 0.15; }

/* hard shadow, no blur, no gradient — regra do manual */
.shadow-hard { box-shadow: 10px 10px 0 0 var(--sh, #E8432B); }

/* reveal padrao */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ==========================================
   REVEAL DINÂMICO DE TÍTULOS (PROXIMIDADE)
   ========================================== */
.title-reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Vem da esquerda se estiver mais perto da esquerda */
.title-reveal-left {
  transform: translateX(-60px);
}

/* Vem da direita se estiver mais perto da direita */
.title-reveal-right {
  transform: translateX(60px);
}

/* Estado visível */
.title-reveal.in {
  opacity: 1;
  transform: translateX(0);
}

/* hero confluence signature */
.confluence { position:relative; height: 100%; width:100%; }
.flow-anim { animation: flow 9s ease-in-out infinite; }
@keyframes flow {
  0%,100% { transform: translateX(-2%) scaleX(1); }
  50% { transform: translateX(2%) scaleX(1.03); }
}
.pulse-rec { animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 0%,100%{opacity:1;} 50%{opacity:.35;} }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #00C2A8; outline-offset: 3px;
}
::selection { background:#E8432B; color:#fff; }

/* marquee infinite slider */
.marquee-container {
  display: flex;
  overflow: hidden;
  background: #0A0A0A;
  gap: 1px;
}
.marquee-content {
  display: flex;
  gap: 1px;
  animation: marquee 35s linear infinite;
  min-width: max-content;
}
.marquee-content:hover {
  animation-play-state: paused;
}

/* Filtro para deixar todas as marcas na cor branca pura */
.marquee-content img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.marquee-content img:hover {
  opacity: 1;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.5px)); }
}

/* Custom Scrollbar for Modals */
.modal-scroll::-webkit-scrollbar { width: 6px; }
.modal-scroll::-webkit-scrollbar-track { background: #0A0A0A; }
.modal-scroll::-webkit-scrollbar-thumb { background: #2A2A28; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: #00C2A8; }

/* Marquee Scroll da Seção Empresa */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* ==========================================
   ANIMAÇÕES DA LOGO HERO
   ========================================== */
@keyframes logoFadeRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 0.25; transform: translateX(0); }
}

.animate-logo-fade-right {
  animation: logoFadeRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animação em cascata para cada parte interna da logo */
.animate-logo-fade-right rect:nth-child(1) {
  opacity: 0;
  animation: partFade 0.6s ease 0.2s forwards;
}
.animate-logo-fade-right rect:nth-child(2) {
  opacity: 0;
  animation: partFade 0.6s ease 0.35s forwards;
}
.animate-logo-fade-right rect:nth-child(3) {
  opacity: 0;
  animation: partFade 0.6s ease 0.5s forwards;
}
.animate-logo-fade-right circle {
  opacity: 0;
  animation: partFade 0.6s ease 0.65s forwards;
}

@keyframes partFade {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ==========================================
   ACESSIBILIDADE: REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  .rail-line::before, .reveal, .pulse-rec, .flow-anim, .marquee-content, .title-reveal,
  .animate-logo-fade-right, .animate-logo-fade-right rect, .animate-logo-fade-right circle { 
    transition: none !important; 
    animation: none !important; 
  }
  .rail-line::before { width: 100% !important; }
  .reveal, .title-reveal { opacity: 1 !important; transform: none !important; }
  
  /* Fixa a opacidade da logo e remove os transforms caso a animação seja cancelada */
  .animate-logo-fade-right { opacity: 0.25 !important; transform: none !important; }
  .animate-logo-fade-right rect, .animate-logo-fade-right circle { opacity: 1 !important; transform: none !important; }
}