/* ==========================================================================
   growthway_ FX — cluster EFEITOS-21B (texto & fundo · padrões 21st.dev)

   1 · Lume do ourives .... shimmer dourado varre os .scene-title UMA vez,
       depois do reveal do site.js (text-shimmer / animated-shiny-text:
       gradiente com background-clip:text + background-position animado)
   2 · Papel de cédula .... dot pattern nos fundos .scene-cream com spotlight
       que segue o mouse (dot-pattern + máscara radial em CSS vars)
   3 · Verniz do wordmark . brilho varre growthway_ no footer, no hover
   4 · Brasa viva ......... gradiente animado lentíssimo nos .acid (.lead-acid),
       ligado por JS só DEPOIS do reveal (classe .gw-21b-ember)

   Todas as regras só têm alvo quando o JS liga html.gw-fx-21b (ou cria os
   elementos gw-21b-*): sem JS o site fica intacto. prefers-reduced-motion
   desliga tudo (o JS nem roda; aqui é cinto e suspensório).
   ========================================================================== */

/* sentinela: o JS só liga o cluster se este CSS chegou */
.gw-21b-probe { position: fixed; visibility: hidden; }

/* ---------- 1) lume do ourives — shimmer 1x nos .scene-title ---------- */

/* o título vira plano posicionado p/ ancorar o clone (idêntico ao tipo-scroll) */
html.gw-fx-21b .scene-title { position: relative; z-index: 1; }

/* sem suporte a background-clip:text o JS nem cria o clone; display:none
   aqui é a última linha de defesa contra um clone visível duplicado */
.gw-21b-shimmer { display: none; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gw-21b-shimmer {
    display: block;
    pointer-events: none;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 250% 100%;
    background-position: 115% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gw21bSweep 1.25s cubic-bezier(0.35, 0, 0.25, 1) 1 both;
  }

  /* vence html.gw-fx .scene-title { position:relative } do tipo-scroll */
  html.gw-fx-21b .scene-title.gw-21b-shimmer {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: none;
    z-index: 2;
  }

  /* faixa de luz: ouro de guarda com um beijo do laranja na cauda */
  .gw-21b-shimmer.is-dark {
    background-image: linear-gradient(102deg,
      rgba(247, 216, 149, 0) 40%,
      rgba(247, 216, 149, 0.92) 49%,
      rgba(232, 98, 42, 0.4) 54%,
      rgba(247, 216, 149, 0) 62%);
  }

  .gw-21b-shimmer.is-light {
    background-image: linear-gradient(102deg,
      rgba(191, 138, 46, 0) 40%,
      rgba(191, 138, 46, 0.9) 49%,
      rgba(179, 68, 26, 0.5) 54%,
      rgba(191, 138, 46, 0) 62%);
  }
}

/* o clone nasce depois do reveal: palavras sempre assentadas e nítidas.
   O underscore do clone fica transparente como o resto e só dourou quando a
   faixa cruza o glifo — o _ laranja real permanece visível por baixo. */
.gw-21b-shimmer .split-word { opacity: 1 !important; transform: none !important; filter: none !important; }

/* página de teste: congela a faixa no meio da varredura */
.gw-21b-shimmer.is-hold { animation: none; }

@keyframes gw21bSweep {
  from { background-position: 115% 0; }
  to   { background-position: -15% 0; }
}

/* ---------- 2) papel de cédula — dot pattern + spotlight de mouse ---------- */

/* dot-pattern removido a pedido do cliente (2026-07-13) — as bolinhas de fundo saíram */
.gw-21b-dots { display: none !important; }

.gw-21b-dots-spot {
  opacity: 0;
  transition: opacity 0.55s ease;
  background-image:
    radial-gradient(circle, rgba(23, 23, 26, 0.32) 1px, rgba(23, 23, 26, 0) 1.7px),
    radial-gradient(circle, rgba(179, 68, 26, 0.2) 1px, rgba(179, 68, 26, 0) 1.7px);
  -webkit-mask-image: radial-gradient(300px circle at var(--gw21b-x, 50%) var(--gw21b-y, 50%),
    #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 78%);
  mask-image: radial-gradient(300px circle at var(--gw21b-x, 50%) var(--gw21b-y, 50%),
    #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 78%);
}

.gw-21b-dots-spot.is-on { opacity: 1; }

/* texto acima do papel pontilhado — mesmo padrão z das cenas fotográficas.
   O hero fica de fora (a foto sangrada em z1 tem coreografia própria);
   lá, só o bloco de texto sobe. */
html.gw-fx-21b .scene-cream:not(.hero-rh) > .container { position: relative; z-index: 1; }
html.gw-fx-21b .hero-rh .hero-copy { position: relative; z-index: 2; }

/* ---------- 3) verniz do wordmark — brilho no growthway_ do footer ---------- */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.gw-fx-21b .site-footer .brand:hover .brand-name,
  html.gw-fx-21b .site-footer .brand.gw-21b-shine-demo .brand-name {
    background-image: linear-gradient(105deg,
      var(--on-dark, #f4f1ea) 0%,
      var(--on-dark, #f4f1ea) 40%,
      #f2cf8f 47%,
      #ffe9c4 50%,
      rgba(232, 98, 42, 0.95) 55%,
      var(--on-dark, #f4f1ea) 62%,
      var(--on-dark, #f4f1ea) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gw21bShine 1.5s linear infinite;
  }

  /* o underscore permanece laranja, imune ao verniz */
  html.gw-fx-21b .site-footer .brand:hover .brand-name .brand-cursor,
  html.gw-fx-21b .site-footer .brand.gw-21b-shine-demo .brand-name .brand-cursor {
    -webkit-text-fill-color: var(--accent, #e8622a);
  }

  /* página de teste: faixa congelada no meio do wordmark */
  html.gw-fx-21b .site-footer .brand.gw-21b-shine-demo .brand-name {
    animation-play-state: paused;
    animation-delay: -1.125s;
  }
}

@keyframes gw21bShine {
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}

/* ---------- 4) brasa viva — gradiente animado nos .acid (pós-reveal) ---------- */

/* O clip é aplicado POR PALAVRA (.split-word), nunca no .acid inteiro:
   descendentes com filter/opacity inline (reveal do site.js) ficam FORA da
   máscara de background-clip:text do pai — o clip no próprio span convive
   com os efeitos inline dele mesmo. Sem GSAP não há .split-word: o JS marca
   o .acid com .gw-21b-solo e o clip vale nele direto. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html.gw-fx-21b .gw-21b-ember .split-word,
  html.gw-fx-21b .gw-21b-ember.gw-21b-solo {
    background-image: linear-gradient(100deg,
      #e8622a 0%, #ef8347 28%, #cfae7b 52%, #e8622a 76%, #ef8347 100%);
    background-size: 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gw21bEmber 11s ease-in-out infinite alternate;
  }

  /* cenas claras: só tons ≥ 4.5:1 sobre o creme (b3441a=4.8, 963912=6.2, 8a5a1f=5.0) */
  html.gw-fx-21b .scene-photo-light .gw-21b-ember .split-word,
  html.gw-fx-21b .scene-cream .gw-21b-ember .split-word,
  html.gw-fx-21b .scene-white .gw-21b-ember .split-word,
  html.gw-fx-21b .scene-photo-light .gw-21b-ember.gw-21b-solo,
  html.gw-fx-21b .scene-cream .gw-21b-ember.gw-21b-solo,
  html.gw-fx-21b .scene-white .gw-21b-ember.gw-21b-solo {
    background-image: linear-gradient(100deg,
      #b3441a 0%, #963912 30%, #8a5a1f 52%, #b3441a 76%, #963912 100%);
  }
}

@keyframes gw21bEmber {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* ---------- guardas ---------- */

/* mobile: spotlight fora (o JS já não o cria < 941px) */
@media (max-width: 940px) {
  .gw-21b-dots-spot { display: none !important; }
}

/* reduced motion: o JS nem liga o cluster; garante texto sólido de todo modo */
@media (prefers-reduced-motion: reduce) {
  .gw-21b-shimmer, .gw-21b-dots, .gw-21b-dots-spot { display: none !important; }

  html.gw-fx-21b .gw-21b-ember .split-word,
  html.gw-fx-21b .gw-21b-ember.gw-21b-solo,
  html.gw-fx-21b .site-footer .brand:hover .brand-name,
  html.gw-fx-21b .site-footer .brand.gw-21b-shine-demo .brand-name {
    animation: none !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}