/* ==========================================================================
   FUNDO, TRACOS E VIDRO
   A camada visual do filme. Tres sistemas:

   1. BACKDROP  o fundo que roda quadro a quadro com o scroll
   2. TRACOS    circulos e arcos vazados, so linha, sem volume
   3. VIDRO     paineis translucidos com desfoque atras

   Nenhuma esfera, nenhum cilindro: so linha, gradiente e vidro.
   ========================================================================== */

/* ==========================================================================
   1. BACKDROP
   Fica fixo atras de tudo. Duas partes: as manchas de gradiente, que sao
   CSS puro e se movem por transform, e o canvas, que redesenha a cada
   quadro em funcao da posicao do scroll. Rolar e passar o filme.
   ========================================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: filter var(--t-slow) var(--ease-soft);
}

/* As duas telas do fundo: gradiente (resolucao baixa, esticada) e tracado. */

.backdrop__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Sobre o ato escuro o fundo acende. A troca e suave, para a virada de
   ato nunca estalar. */
/* a tela do gradiente e desenhada pequena e esticada por CSS: degrade e
   macio, ninguem percebe, e o custo por quadro despenca */
.backdrop__canvas--grad { image-rendering: auto; }

/* a poeira que vira ferramenta fica por cima do gradiente, ainda atras de
   tudo que se le */
.backdrop__canvas--dust { z-index: 1; }

/* ==========================================================================
   2. TRACOS
   Circulo vazado e arco. Sao o eco do Green Dot em escala grande.

   No HTML:
     <div class="amb" aria-hidden="true">
       <span class="ring ring--accent" style="--x:70%; --y:40%; --size:40vmin" data-y="80"></span>
     </div>
   --x e --y sao o centro. data-y e a deriva com o scroll, em pixels.
   ========================================================================== */
.amb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.amb > * {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, var(--size, 120px));
  height: var(--h, var(--size, 120px));
  margin-left: calc(var(--w, var(--size, 120px)) / -2);
  margin-top: calc(var(--h, var(--size, 120px)) / -2);
  display: block;
}

/* O conteudo da cena sempre acima do ambiente.
   Aqui NAO se mexe em position: os filhos da abertura sao posicionados no
   absoluto, e forcar relative empilha tudo num canto. So z-index. */
.scene > .wrap,
.stage > .wrap { position: relative; }
.scene > .wrap,
.stage > *:not(.amb) { z-index: 1; }

/* ==========================================================================
   ESFERAS
   Bolas com degrade, no verde da Deloitte, em opacidade baixa. Elas dao
   profundidade sem roubar a leitura do texto que passa por cima.
   ========================================================================== */
.orb {
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%,
      rgba(190, 255, 150, var(--o-hi, .95)) 0%,
      rgba(71, 238, 1, var(--o-mid, .85)) 38%,
      rgba(12, 78, 4, var(--o-lo, .95)) 100%);
  opacity: var(--o-alpha, .3);
  filter: blur(var(--o-blur, 0px));
}
/* o brilho especular que faz a bola parecer redonda */
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 42%);
}
/* o halo que ela joga no fundo */
.orb::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71,238,1,.22) 0%, rgba(71,238,1,0) 62%);
}
.orb--soft  { --o-alpha: .16; --o-blur: 2px; }
.orb--ghost { --o-alpha: .09; --o-blur: 6px; }
.orb--lit   { --o-alpha: .42; }

/* eco da esfera: aneis concentricos atras dela, como no material de
   referencia. Fica so no rastro, nunca solto no meio da tela. */
.orb__echo {
  position: absolute;
  inset: -120% -10% -120% -180%;
  border-radius: 50%;
  border: 1px solid rgba(71, 238, 1, .10);
  pointer-events: none;
}

/* ==========================================================================
   3. VIDRO
   Painel translucido com desfoque atras. Usado com parcimonia: os dados,
   a dedicatoria, a moldura dos cases e a chamada final.
   ========================================================================== */
.glass {
  position: relative;
  background: linear-gradient(142deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--glass-r, 18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    background: linear-gradient(142deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  }
}

/* fio de luz correndo na borda de cima */
.glass::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events: none;
}

/* No escuro o vidro vira fumaca em vez de neve. */
.act--ink .glass,
.scene--hero .glass {
  background: linear-gradient(142deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .act--ink .glass,
  .scene--hero .glass {
    background: linear-gradient(142deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  }
}
.act--ink .glass::before,
.scene--hero .glass::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

/* Vidro com borda de gradiente verde. Para o painel que precisa gritar. */
.glass--edge {
  background-image:
    linear-gradient(142deg, rgba(255,255,255,.44), rgba(255,255,255,.12)),
    linear-gradient(140deg, rgba(0,184,28,.95), rgba(16,179,173,.5) 46%, rgba(255,255,255,0) 82%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
.act--ink .glass--edge {
  background-image:
    linear-gradient(142deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(140deg, rgba(0,184,28,.95), rgba(16,179,173,.5) 46%, rgba(255,255,255,0) 82%);
}

/* ==========================================================================
   4. MARCA D AGUA TIPOGRAFICA
   A palavra que cresce com o scroll no fundo do capitulo. Desenhada na
   fonte do proprio site, em contorno: e uma citacao tipografica, nao uma
   reproducao do logotipo de ninguem. O logotipo de verdade so aparece
   pequeno, na dedicatoria, ao lado da linha que diz para quem.
   ========================================================================== */
.mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 21vw, 380px);
  letter-spacing: -.045em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--mark-line, rgba(0,0,0,.14));
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.act--ink .mark,
.scene--hero .mark { --mark-line: rgba(255,255,255,.17); }
.mark--fill {
  color: var(--mark-fill, rgba(0,0,0,.04));
  -webkit-text-stroke: 0;
}
.act--ink .mark--fill { --mark-fill: rgba(255,255,255,.055); }
/* o ponto da marca d agua acompanha o traco: em cheio ele virava um
   quadrado verde no meio da tela */
.mark__dot { color: rgba(71, 238, 1, .16); -webkit-text-stroke: 0; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 760px) {
  .amb .is-desk { display: none; }
  .backdrop__blob { --b-alpha: .45; }
  .mark { font-size: clamp(56px, 27vw, 200px); }
  .glass { --glass-r: 16px; }
}