/* ==========================================================
   VARIÁVEIS GLOBAIS — troque as cores aqui facilmente
   ========================================================== */
:root {
  /* Fundo da 1ª parte (hero). Branco estático por padrão. */
  --cor-fundo-estatico: #000000;

  /* Fundo da 2ª parte (conteúdo). Preto por padrão.
     PARA MUDAR DE COR: troque apenas o valor abaixo. Ex: #111827, #0a0a0a, #1e3a8a */
  --cor-fundo-secundario: #000000;

  --cor-texto-hero: #000000;
  --cor-texto-secundario: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--cor-fundo-estatico);
  -webkit-font-smoothing: antialiased;
}

/* Fonte personalizada (arquivo em /assets) */
@font-face {
  font-family: "Bruno Ace SC";
  src: url("../assets/BrunoAceSC-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   1ª PARTE — FUNDO ESTÁTICO (elemento: #hero)
   O branco fica no fundo; a imagem fundo.png entra como
   elemento <img id="imagem-fundo"> na frente dele.
   ========================================================== */
.fundo-estatico {
  background-color: var(--cor-fundo-estatico);
}

/* Imagem fundo.png na frente do fundo branco, atrás dos logos */
.imagem-fundo {
  object-fit: cover;
  object-position: center;

  animation: pulsar 5s ease-in-out infinite;
}

.imagem-fundo2 {
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
}

/* Acabamento prateado recortado pelo desenho original dos SVGs. */
.logo-vr {
  display: block;
  background: linear-gradient(
    170deg,
    #ffffff 0%,
    #e3e7ec 18%,
    #929ba6 36%,
    #f8fafc 47%,
    #ffffff 50%,
    #7c8793 53%,
    #b5bec8 65%,
    #f4f6f8 82%,
    #c2cad3 100%
  );
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;

  box-shadow: 0px 0px 58px 7px rgba(0, 0, 0, 0.20);
}

/* Acabamento prateado recortado pelo desenho original dos SVGs. */
.logo-visto {
  display: block;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e3e7ec 18%,
    #929ba6 36%,
    #f8fafc 47%,
    #ffffff 50%,
    #7c8793 53%,
    #b5bec8 65%,
    #f4f6f8 82%,
    #c2cad3 100%
  );
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;

  box-shadow: 0px 0px 58px 7px rgba(0, 0, 0, 0.20);
}

.logo-vr {
  --logo-mask: url("../assets/VR.svg");
  aspect-ratio: 1410 / 550;
  opacity: 0.25;          /* 50% conforme solicitado */
  animation: pulsar2 2.3s ease-in-out infinite;
}

.logo-visto {
  --logo-mask: url("../assets/VISTO.svg");
  aspect-ratio: 3012 / 550;
  opacity: 1;            /* 100% conforme solicitado */
}


.thermal_circle {
  width: 1500px;
  height: 1500px;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  opacity: 0.5;

  animation: pulsar 1s ease-in-out infinite;

/*

  -webkit-mask-image: radial-gradient(
      circle at center,
      #000 52%,
      rgba(0, 0, 0, 0.85) 62%,
      rgba(0, 0, 0, 0.45) 72%,
      transparent 100%
  );

  mask-image: radial-gradient(
      circle at center,
      #000 52%,
      rgba(0, 0, 0, 0.85) 62%,
      rgba(0, 0, 0, 0.45) 72%,
      transparent 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

*/
}


/* ==========================================================
   TRANSIÇÃO SUAVE — gradiente do branco para o fundo secundário.
   Cria o efeito de "rolagem suave" entre as duas partes.
   ========================================================== */
.transicao-gradiente {
  background: linear-gradient(
    to bottom,
    var(--cor-fundo-estatico) 0%,
    var(--cor-fundo-secundario) 100%
  );
}

/* ==========================================================
   2ª PARTE — FUNDO SECUNDÁRIO (elemento: #conteudo)
   Cor controlada por --cor-fundo-secundario no :root acima.
   ========================================================== */
.fundo-secundario {
  background-color: var(--cor-fundo-secundario);
  color: var(--cor-texto-secundario);
}

/* Blocos minimalistas flat — escalável (grid) */
.bloco-link {
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bloco-link:hover {
  transform: translateY(-4px);
}

.projeto-card {
  position: relative;
}

.milestones-trigger {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.projeto-card:hover .milestones-trigger,
.projeto-card:focus-within .milestones-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.milestones-trigger:hover,
.milestones-trigger:focus-visible {
  border-color: white;
  background: white;
  color: black;
  outline: none;
}

.milestones-modal[hidden] { display: none; }
.milestones-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.78);
}

.milestones-dialog {
  position: relative;
  width: min(100%, 42rem);
  max-height: min(85vh, 48rem);
  overflow-y: auto;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: #080808;
  color: white;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.milestones-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
}

.milestones-kicker {
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.milestones-list { margin-top: 2rem; }
.milestone { padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.milestone-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.milestone-heading h3 { margin: 0; font-weight: 700; font-size: 1rem; }
.milestone-heading time { color: rgba(255, 255, 255, 0.62); font-size: 0.78rem; text-transform: capitalize; white-space: nowrap; }
.milestone-items { display: grid; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; }
.milestone-items li { position: relative; padding-left: 1.1rem; }
.milestone-items li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--status-color); }
.status-iniciado { --status-color: #3b82f6; }
.status-pendente { --status-color: #facc15; }
.status-cancelado { --status-color: #ef4444; }
.status-removido { --status-color: #a855f7; }
.status-finalizado { --status-color: #fff; }

@media (max-width: 639px) {
  .projeto-card:hover .milestones-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .milestones-trigger {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    border-color: white;
    background: rgba(0, 0, 0, 0.72);
    color: white;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .projeto-card.is-milestones-visible .milestones-trigger,
  .projeto-card:focus-within .milestones-trigger {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .milestone-heading { display: block; }
  .milestone-heading time { display: block; margin-top: 0.35rem; }
}

/* Seta discreta — animação extra caso o Tailwind não carregue */
@keyframes seta-pulo {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 10px); opacity: 1; }
}

@keyframes pulsar {
  0%, 100% {opacity: 0.25;}
  50% {opacity: 0.5; }
}

@keyframes pulsar2 {
  from {opacity: 0.6;}
  20% {opacity: 0.3; }
  40% {opacity: 0.6; }
  to {opacity: 0.3;}
}

.seta-rolar {
  animation: seta-pulo 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .seta-rolar {
    animation: none;
  }
}