/* PROSOLARBOT — robô SEMPRE por baixo de textos/carrosséis
   Aparece depois da 1ª seção (#inicio) e desce até sumir */

:root {
  --robot-size: min(52vw, 440px);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.robot-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1.1s ease;
}

.robot-fundo.is-active {
  opacity: 1;
}

.robot-fundo__img {
  position: absolute;
  inset: -12% -5% auto;
  width: 110%;
  height: 124%;
  background:
    linear-gradient(180deg, rgba(8, 16, 32, 0.78), rgba(8, 16, 32, 0.58) 45%, rgba(8, 16, 32, 0.85)),
    url("/assets/robot-scroll/fundo.jpg") center / cover no-repeat;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  filter: saturate(0.85) brightness(0.7);
  transition: opacity 0.45s ease;
}

.robot-fundo__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 55%, transparent 20%, rgba(8, 16, 32, 0.5) 100%);
}

/* Robô: camada baixa — atrás de TUDO o conteúdo das seções */
.robot-guide {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--robot-size);
  height: auto;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}

.robot-guide.is-ready {
  opacity: 1;
}

.robot-guide.is-exiting,
.robot-guide.is-hidden {
  opacity: 0 !important;
  transition: opacity 0.6s ease;
}

.robot-guide__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48vh;
  object-fit: contain;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

/* Hero (1ª seção) fica por cima; robô ainda não aparece nela */
body.robot-cinematic #inicio {
  position: relative;
  z-index: 10;
}

body.robot-cinematic #inicio .robot-hero-slot {
  display: none !important;
}

/* Todas as seções de conteúdo acima do robô */
body.robot-cinematic main,
body.robot-cinematic #solucoes,
body.robot-cinematic #servicos,
body.robot-cinematic #setores,
body.robot-cinematic #projetos,
body.robot-cinematic #clientes,
body.robot-cinematic #resultados,
body.robot-cinematic #depoimentos,
body.robot-cinematic #sobre,
body.robot-cinematic #blog,
body.robot-cinematic #contato,
body.robot-cinematic footer,
body.robot-cinematic header {
  position: relative;
  z-index: 5;
}

body.robot-cinematic #solucoes,
body.robot-cinematic #servicos,
body.robot-cinematic #projetos,
body.robot-cinematic #clientes,
body.robot-cinematic #resultados,
body.robot-cinematic #depoimentos,
body.robot-cinematic #sobre,
body.robot-cinematic #blog,
body.robot-cinematic #contato {
  background: transparent !important;
}

/* #setores usa vidro translúcido (setores-glass.css) — não forçar transparent */

/* Textos, cards, carrosséis SEMPRE por cima do robô */
body.robot-cinematic main h1,
body.robot-cinematic main h2,
body.robot-cinematic main h3,
body.robot-cinematic main h4,
body.robot-cinematic main p,
body.robot-cinematic main a,
body.robot-cinematic main button,
body.robot-cinematic main li,
body.robot-cinematic main span,
body.robot-cinematic main label,
body.robot-cinematic main input,
body.robot-cinematic main textarea,
body.robot-cinematic main select,
body.robot-cinematic main form,
body.robot-cinematic main article,
body.robot-cinematic main .card-ativ,
body.robot-cinematic main .psb-cap-grid,
body.robot-cinematic main .psb-cap-card,
body.robot-cinematic main .animate-marquee,
body.robot-cinematic main .relative.overflow-hidden,
body.robot-cinematic main .grid,
body.robot-cinematic main .mx-auto,
body.robot-cinematic main .section-divider,
body.robot-cinematic [data-robot-item] {
  position: relative;
  z-index: 8;
}

/* Carrosséis com empilhamento reforçado */
body.robot-cinematic .animate-marquee,
body.robot-cinematic #clientes .relative.overflow-hidden,
body.robot-cinematic #depoimentos .relative {
  z-index: 12 !important;
  isolation: isolate;
}

/* Interação suave — sem bordas/contornos amarelos em textos */
[data-robot-item] {
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  will-change: transform, opacity, filter;
  box-shadow: none !important;
  outline: none;
}

[data-robot-item="card"] {
  background-color: rgba(10, 22, 40, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 0.75rem;
}

[data-robot-item="title"],
[data-robot-item="text"],
[data-robot-item="cta"],
[data-robot-item="icon"],
[data-robot-item="carousel"] {
  box-shadow: none !important;
  outline: none !important;
}

[data-robot-item="title"],
[data-robot-item="text"] {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

/* Cards: só sombra neutra, sem anel dourado */
[data-robot-item="card"].is-near {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

[data-robot-item="title"].is-near,
[data-robot-item="text"].is-near {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  box-shadow: none !important;
}

@media (max-width: 1023px) {
  :root {
    --robot-size: min(70vw, 260px);
  }

  .robot-guide__img {
    max-height: 34vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robot-fundo,
  .robot-guide {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
 * Tema azul escuro a partir de Projetos e cases
 * ------------------------------------------------------------------ */

html {
  background-color: #0a1628;
}

body {
  transition:
    background-color 1.25s ease,
    background-image 1.25s ease,
    box-shadow 1.25s ease;
}

body.psb-deep-blue {
  background-color: #020b18 !important;
  background-image: linear-gradient(
    180deg,
    #031525 0%,
    #071a2e 42%,
    #020b18 100%
  ) !important;
}

/* Robô e fundo somem com transição ao entrar em Projetos */
body.psb-deep-blue .robot-fundo {
  opacity: 0 !important;
  transition: opacity 1.15s ease;
}

body.psb-deep-blue .robot-guide {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

body.psb-deep-blue #projetos,
body.psb-deep-blue #resultados,
body.psb-deep-blue #depoimentos,
body.psb-deep-blue #sobre,
body.psb-deep-blue #blog,
body.psb-deep-blue #contato,
body.psb-deep-blue footer {
  background-color: transparent !important;
  transition: background-color 1.25s ease, box-shadow 1.25s ease;
}

body.psb-deep-blue #projetos {
  box-shadow: inset 0 40px 80px -40px rgba(2, 11, 24, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.psb-deep-blue .robot-fundo,
  body.psb-deep-blue .robot-guide {
    transition: none !important;
  }
}