/* Chakra Petch 700 self-hosted (latin e latin-ext, para acentos). font-display: swap evita texto invisível. */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakrapetch-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakrapetch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* "O que entregamos": cenas fullscreen. Sem JS (ou com movimento reduzido) as cenas empilham como blocos estáticos.
   Com a classe .entrega--js a seção vira o palco pinado: as cenas se sobrepõem e o scroll dirige os reveals. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entrega {
  position: relative;
  background: var(--branco);
}

.entrega__palco {
  position: relative;
}

.entrega__bloco {
  position: relative;
}

.entrega__cena {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.entrega__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foco por cena: no celular, que é o assunto de cada imagem */
.entrega__bloco--1 .entrega__imagem { object-position: 75% 50%; }
.entrega__bloco--2 .entrega__imagem { object-position: 65% 50%; }
.entrega__bloco--3 .entrega__imagem { object-position: 50% 40%; }
/* Criação de websites: a cena 3 foca mais abaixo, onde ficam o notebook e o celular */
.entrega[data-topico="websites"] .entrega__bloco--3 .entrega__imagem { object-position: 50% 60%; }

/* Cena 3 de websites no desktop: duas linhas, acima do celular pequeno da imagem */
@media (min-width: 768px) {
  .entrega[data-topico="websites"] .entrega__titulo--3 {
    font-size: min(clamp(1.7rem, 6.5vw, 6rem), 4.6rem);
    width: 60vw;
    line-height: 1;
  }
}

/* Cena 1 de websites no mobile: o celular vai para a direita e o título fica na faixa da esquerda */
@media (max-width: 767px) {
  .entrega[data-topico="websites"] .entrega__bloco--1 .entrega__imagem { object-position: 85% 50%; }
  .entrega[data-topico="websites"] .entrega__titulo--1 { width: 70vw; }
}

/* Fundo estático da cena 1 (última imagem do tópico anterior): o círculo do tópico abre por cima dele */
.entrega--js .entrega__fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.entrega__fundo-imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Sem JS (ou com movimento reduzido) o fundo não entra: a cena 1 já mostra a sua imagem */
.entrega:not(.entrega--js) .entrega__fundo {
  display: none;
}

.entrega__lamina {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.entrega__titulo {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.25rem;
  font-family: 'Chakra Petch', var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #111;
  text-align: left;
}

.entrega__etiqueta {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: var(--fonte-retro);
  font-size: 1.6rem;
  line-height: 1;
  color: #111;
}

/* Pinado: a seção ocupa a tela e as cenas se sobrepõem */
.entrega--js {
  height: 100svh;
  overflow: hidden;
}

.entrega--js .entrega__palco,
.entrega--js .entrega__bloco,
.entrega--js .entrega__cena {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* Estado inicial dos reveals: nada visível antes do scroll */
.entrega--js .entrega__bloco--1 .entrega__cena { clip-path: circle(0% at 70% 50%); }
.entrega--js .entrega__bloco--2 .entrega__cena { clip-path: inset(100% 0% 0% 0%); }
.entrega--js .entrega__lamina--esq { clip-path: inset(0% 50% 0% 50%); }
.entrega--js .entrega__lamina--dir { clip-path: inset(0% 50% 0% 50%); }

/* Frases viram partículas: o texto DOM fica transparente e preserva a leitura por leitores de tela */
.entrega--js .entrega__titulo {
  position: absolute;
  width: min(46vw, 40rem);
  padding: 0;
  color: transparent;
  left: 5vw;
  top: 50%;
}

.entrega--js .entrega__titulo--3 {
  top: 8svh;
}

/* Frase 2 no canto inferior esquerdo, na área livre à esquerda dos cards holográficos */
.entrega--js .entrega__titulo--2 {
  top: auto;
  bottom: 12svh;
  width: 38vw;
}

.entrega--js .entrega__etiqueta {
  position: absolute;
  left: 0;
  bottom: 4svh;
}

/* Will-change só enquanto a seção está pinada e animando */
.entrega--js.animando .entrega__cena,
.entrega--js.animando .entrega__lamina,
.entrega--js.animando .entrega__titulo,
.entrega--js.animando .entrega__imagem {
  will-change: transform, clip-path, filter;
}

@media (max-width: 767px) {
  .entrega--js .entrega__titulo {
    width: calc(100% - 2.5rem);
    left: 1.25rem;
    top: 12svh;
    padding: 0;
  }

  .entrega--js .entrega__titulo--3 {
    top: 12svh;
  }

  .entrega--js .entrega__titulo--2 {
    top: 12svh;
    bottom: auto;
    width: calc(100% - 2.5rem);
  }

  .entrega--js .entrega__etiqueta {
    left: 1.25rem;
    bottom: 3svh;
  }
}

/* Hospedagem e manutenção: sobrevoo, porta que abre e servidores com LEDs */

/* Sobrevoo: a imagem é 12% mais larga que a cena, para o pan não expor borda */
.entrega[data-topico="hospedagem"] .entrega__bloco--1 .entrega__imagem {
  width: 112%;
}

/* Empilhamento: o corredor fica por baixo da porta; a porta, por cima do sobrevoo */
.entrega[data-topico="hospedagem"] .entrega__bloco--1 { z-index: 1; }
.entrega[data-topico="hospedagem"] .entrega__bloco--3 { z-index: 2; }
.entrega[data-topico="hospedagem"] .entrega__bloco--2 { z-index: 3; }

/* A porta é formada por duas metades da mesma imagem; cada uma sai por um lado */
.entrega[data-topico="hospedagem"] .entrega__bloco--2 .entrega__lamina--esq { clip-path: inset(0% 50% 0% 0%); }
.entrega[data-topico="hospedagem"] .entrega__bloco--2 .entrega__lamina--dir { clip-path: inset(0% 0% 0% 50%); }

/* O corredor só aparece quando a porta começa a abrir */
.entrega[data-topico="hospedagem"].entrega--js .entrega__bloco--3 .entrega__cena {
  clip-path: inset(100% 0% 0% 0%);
}

/* Título 2 no centro da porta */
.entrega[data-topico="hospedagem"].entrega--js .entrega__titulo--2 {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 86vw;
  text-align: center;
}

/* Título 3 no topo, à esquerda, sobre o teto */
@media (min-width: 768px) {
  .entrega[data-topico="hospedagem"] .entrega__titulo--3 { width: 40vw; }
  .entrega[data-topico="hospedagem"].entrega--js .entrega__titulo--2 { width: 46vw; }
}

@media (max-width: 767px) {
  .entrega[data-topico="hospedagem"] .entrega__bloco--1 .entrega__imagem { object-position: 70% 50%; }
  .entrega[data-topico="hospedagem"] .entrega__bloco--2 .entrega__imagem { object-position: 50% 50%; }
  .entrega[data-topico="hospedagem"] .entrega__bloco--3 .entrega__imagem { object-position: 50% 50%; }
}

/* Corredor de servidores: a imagem e os LEDs ficam no mesmo zoom */
.entrega__zoom {
  position: absolute;
  inset: 0;
}

.entrega__zoom .entrega__imagem {
  display: block;
  width: 100%;
  height: 100%;
}

/* LEDs: 3 px, brancos, piscando por opacidade. Duração e atraso vêm do HTML (sem JS por LED) */
.led {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.9);
  opacity: 0.35;
  animation: led var(--d) ease-in-out var(--a) infinite;
}

@keyframes led {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Movimento reduzido: LEDs estáticos e acesos */
@media (prefers-reduced-motion: reduce) {
  .led {
    animation: none;
    opacity: 0.8;
  }
}

/* Hospedagem não usa o círculo da cena 1: o sobrevoo aparece sem máscara */
.entrega[data-topico="hospedagem"].entrega--js .entrega__bloco--1 .entrega__cena {
  clip-path: none;
}