/* ==========================================================================
   MGX — o letreiro gigante da hero, com o efeito da marca da Remessa

   Pedido do dono (23/09/2026), com a captura do rodapé da Remessa: tirar os
   dois-pontos de "MGX DIGITAL:", e deixar o nome GRANDE no alto da hero, com
   o mesmo efeito do "remessa" — e o título da hero passando por cima da parte
   de baixo dele.

   A técnica é a da Remessa, copiada da fonte (components/landing/
   landing.module.css, `.marca span`), não de olho:
     · cor clara a 14%: a textura de trás vaza pelas letras (lá, a fumaça
       laranja; aqui, a rede azul da hero);
     · máscara de gradiente vertical: sólido em cima, some embaixo — é o que
       deixa o título pousar sobre o letreiro sem brigar com ele;
     · peso máximo, espaçamento -0,06em, entrelinha 0,74 (a caixa abraça a
       letra, sem o vão de ascendente/descendente);
     · opacidade que sobe ao entrar na tela, presa à rolagem.

   Tamanho medido, não chutado: "iHUB CREATORS" (nome novo, 23/09/2026) em
   Montserrat 900 com -0,06em mede 8,027em; 11,7vw ocupa ~94% da largura da
   tela. (O antigo "MGX DIGITAL" media 6,462em e usava 14,5vw.)
   ========================================================================== */

.mgx-marca-hero {
  /* sai do miolo de 1140px e ocupa a tela inteira; o corpo corta o excesso
     com overflow-x: clip (nunca vira rolagem lateral) */
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* A LUZ ATRÁS DAS LETRAS. O que faz o "remessa" ser bonito não é a letra:
     é a fumaça laranja passando POR TRÁS dela, vista através da letra
     translúcida. Aqui o fundo atrás do letreiro era preto liso, e a letra
     ficava chapada. Uma luz azul do iHub, do lado direito como na Remessa,
     e a letra passa a ter volume. Uma luz, nesta seção só — espalhar é o
     defeito da aura azul em toda seção. */
  /* A elipse tem de ACABAR dentro da caixa: a primeira versão tinha raio
     vertical de 120% e era cortada pela borda de cima e de baixo, deixando
     duas linhas retas visíveis no meio da hero. Aqui ela chega a zero a 2%
     da borda. */
  background:
    radial-gradient(36% 48% at 76% 50%, rgba(0, 167, 255, 0.36) 0%, rgba(0, 85, 145, 0.16) 52%, transparent 100%),
    radial-gradient(24% 44% at 20% 56%, rgba(0, 85, 145, 0.26) 0%, transparent 100%);
  padding-block: 1.2em;
  margin-block-start: calc(clamp(0.5rem, 2vw, 1.5rem) - 1.2em);
  /* o título sobe por cima da metade de baixo do letreiro */
  margin-block-end: calc(-0.36 * clamp(2.5rem, 11.7vw, 14rem) - 1.2em);
}

.mgx-marca-hero span {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 11.7vw, 14rem);
  letter-spacing: -0.06em;
  line-height: 0.74;
  white-space: nowrap;

  /* 14% de claro, puxado para o azul do iHub: a rede azul da hero vaza
     pelas letras, como a fumaça laranja vaza pelo "remessa" */
  color: color-mix(in srgb, #DCEFFF 17%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, #DCEFFF 17%, transparent);
  background: none;

  /* A máscara vale só para a caixa do texto. Com entrelinha de 0,74, o pé
     das letras fica FORA da caixa e era cortado seco: medido na primeira
     versão, uma linha reta visível atravessava a base das letras. Aqui a
     letra já chegou a zero antes do fim da caixa, e o corte não aparece. */
  -webkit-mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 76%);
          mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,.55) 48%, transparent 76%);
  padding-block-end: 0.12em;
}

/* o título vem para a frente do letreiro */
.elementor-3386 .elementor-element.elementor-element-9bd8dd7 {
  position: relative;
  z-index: 2;
}

/* o nome da marca continua no <h1> para leitor de tela e busca, invisível */
.mgx-oculto {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* a opacidade sobe ao entrar na tela, presa à rolagem — igual à Remessa.
   Onde não houver linha do tempo de rolagem, o letreiro já nasce aceso. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mgx-marca-hero span {
      animation: mgx-marca-acende linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes mgx-marca-acende { from { opacity: 0.25; } to { opacity: 1; } }