/* Bulb Hub — animações do site (rascunho, 2026-10-10)
   Origem de cada uma:
   - Notas de animação de cada página no Figma (quadros "Notas — …").
   - Comentários do Figma de 10/10 (assinatura, pingente, laranja assoviando, chaveiro, fósforo, glitch).
   Transição entre seções: SÓ a costura de adesivo (decisão do Pedro, 10/10). Sem troca de cor da
   página, sem cortina, sem faixa inclinada: a seção muda no corte, e o adesivo costura as duas. */

/* ---------- Costura de adesivo ----------
   Um adesivo montado em cima da borda entre duas seções, metade em cada uma.
   Uso: <div class="costura" style="--x:78%;--r:6deg;--w:190"><img src="/assets/stickers/…" alt=""></div>
   como último filho da seção de cima. --x é a posição horizontal do centro, --w a largura em px do
   Figma, --r a rotação final. Ele entra com um giro quando a borda aparece e acompanha a rolagem
   um pouco mais devagar que a página (--deriva, calculado no site.js). */
.costura{position:absolute;left:var(--x,80%);bottom:0;width:calc(var(--w,190) * var(--px));z-index:6;pointer-events:none;
  transform:translate(-50%, calc(50% + var(--deriva,0px))) rotate(var(--r,6deg));}
.costura>img,.costura>.anim{width:100%;height:auto;filter:drop-shadow(0 calc(8 * var(--px)) calc(14 * var(--px)) rgba(0,0,0,.22));}
.costura>*{opacity:0;transform:rotate(-16deg) scale(.82);transition:opacity .45s var(--ease),transform .8s cubic-bezier(.3,1.5,.5,1);}
.costura.in>*{opacity:1;transform:none;}

/* ---------- Animações de entrada (notas do Figma) ---------- */
/* Adesivo solto dentro de uma seção: entra com um pequeno giro (notas da Home e de Branding) */
.adesivo{position:absolute;width:calc(var(--w,190) * var(--px));transform:rotate(var(--r,0deg));z-index:3;}
.adesivo>img,.adesivo>.anim{width:100%;height:auto;filter:drop-shadow(0 calc(6 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,.18));}
.js .adesivo>*{opacity:0;transform:rotate(-14deg) scale(.85);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.3,1.5,.5,1);}
.js .adesivo.in>*{opacity:1;transform:none;}

/* Fio que cresce da esquerda para a direita (Setup, Distribuição, etapas) */
.js .fio-cresce{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);}
.js .in .fio-cresce,.js .fio-cresce.in{transform:scaleX(1);}
/* Itens que entram um a um na rolagem (frentes da Distribuição) */
.js .entra{opacity:0;transform:translateY(calc(24 * var(--px)));transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .entra.in,.js .in>.entra{opacity:1;transform:none;}
.js .in>.entra:nth-child(2){transition-delay:.12s;} .js .in>.entra:nth-child(3){transition-delay:.24s;}
.js .in>.entra:nth-child(4){transition-delay:.36s;} .js .in>.entra:nth-child(5){transition-delay:.48s;}

/* Sublinhado que cresce no hover ("Saiba mais" e links de texto) */
.sublinha{position:relative;text-decoration:none;}
.sublinha::after{content:"";position:absolute;left:0;right:0;bottom:-.2em;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .4s var(--ease);}
.sublinha:hover::after{transform:scaleX(1);}

/* Faixas em loop: logos "Confiado por" (param com o mouse) e "For the brave" (sentido contrário) */
.loop{overflow:hidden;}
.loop .trilho{display:flex;width:max-content;animation:corre var(--tempo,40s) linear infinite;}
.loop.contrario .trilho{animation-direction:reverse;}
.loop.pausa:hover .trilho{animation-play-state:paused;}
@keyframes corre{to{transform:translateX(-50%);}}

/* Topo da Home: nuvens flutuam devagar em loop; a placa sobe um pouco quando a página carrega */
.flutua{animation:flutua 9s ease-in-out infinite alternate;}
.flutua.b{animation-duration:12s;animation-delay:-4s;}
@keyframes flutua{from{transform:translate3d(0,0,0);}to{transform:translate3d(calc(18 * var(--px)),calc(-8 * var(--px)),0);}}
/* "backwards": depois de entrar, a animação solta a opacidade e o transform, para a cena da rolagem poder mexer neles */
.sobe-ao-carregar{animation:sobeCarrega 1.2s var(--ease) backwards .2s;}
@keyframes sobeCarrega{from{transform:translateY(calc(40 * var(--px)));opacity:0;}to{transform:none;opacity:1;}}

/* Topo de /servicos: zoom lento na foto de fundo */
.zoom-lento{animation:zoomLento 18s ease-out both;}
@keyframes zoomLento{from{transform:scale(1);}to{transform:scale(1.08);}}

/* Cards de case: sobem um pouco no hover e a capa dá um zoom leve */
.card-case{transition:transform .4s var(--ease);}
.card-case .capa{overflow:hidden;}
.card-case .capa img{transition:transform .8s var(--ease);}
.card-case:hover{transform:translateY(calc(-6 * var(--px)));}
.card-case:hover .capa img{transform:scale(1.05);}

/* Plano de Growth: = e × acendem em laranja um a um */
.js .acende{transition:color .4s var(--ease);}
.js .in .acende{color:var(--laranja);}
.js .in .acende:nth-of-type(2){transition-delay:.35s;} .js .in .acende:nth-of-type(3){transition-delay:.7s;}
.js .in .acende:nth-of-type(4){transition-delay:1.05s;}

/* ---------- Animações novas (comentários do Figma, 10/10) ---------- */
/* Pingente (chave de hotel em /sobre) e chaveiro (Go-to-Market): chacoalham de leve, com pausa.
   O pivô fica na argola, no topo do adesivo (--pivo ajusta por adesivo). */
.chacoalha>img,.chacoalha>.anim{transform-origin:var(--pivo,50% 4%);}
.in.chacoalha>img,.in.chacoalha>.anim{animation:chacoalha 4.2s ease-in-out infinite;animation-delay:.9s;}
@keyframes chacoalha{
  0%,62%,100%{rotate:0deg;}
  66%{rotate:7deg;} 71%{rotate:-6deg;} 76%{rotate:4.5deg;} 81%{rotate:-3deg;} 86%{rotate:1.5deg;} 91%{rotate:-.6deg;}
}

/* Glitch leve nos aparelhos eletrônicos (iMac, Nokia, Tamagotchi): duas cópias com deslocamento de
   cor por instantes curtos. O site.js monta as cópias dentro de .glitch. */
.glitch:not(.costura):not(.adesivo){position:relative;}
.glitch .g1,.glitch .g2{position:absolute;inset:0;width:100%;height:auto;opacity:0;pointer-events:none;}
.in.glitch .g1{animation:glitchA 3.8s steps(1) infinite;}
.in.glitch .g2{animation:glitchB 3.8s steps(1) infinite;}
@keyframes glitchA{
  0%,86%,100%{opacity:0;transform:none;clip-path:inset(0);}
  87%{opacity:.85;transform:translate(calc(-4 * var(--px)),0);clip-path:inset(18% 0 58% 0);filter:hue-rotate(160deg) saturate(3);}
  89%{opacity:.85;transform:translate(calc(5 * var(--px)),0);clip-path:inset(52% 0 24% 0);filter:hue-rotate(160deg) saturate(3);}
  91%{opacity:.7;transform:translate(calc(-2 * var(--px)),0);clip-path:inset(70% 0 8% 0);filter:hue-rotate(160deg) saturate(3);}
  93%{opacity:0;}
}
@keyframes glitchB{
  0%,87%,100%{opacity:0;transform:none;clip-path:inset(0);}
  88%{opacity:.8;transform:translate(calc(4 * var(--px)),0);clip-path:inset(34% 0 44% 0);filter:hue-rotate(-60deg) saturate(3);}
  90%{opacity:.8;transform:translate(calc(-5 * var(--px)),0);clip-path:inset(8% 0 78% 0);filter:hue-rotate(-60deg) saturate(3);}
  92%{opacity:0;}
}
.in.glitch>img:first-child{animation:glitchBase 3.8s steps(1) infinite;}
@keyframes glitchBase{0%,86%,94%,100%{transform:none;}88%{transform:translate(calc(1 * var(--px)),0) skewX(-1deg);}90%{transform:translate(calc(-1 * var(--px)),0);}}

/* Animação gerada em vídeo (Envato) e recortada em folha de quadros com transparência.
   <span class="anim quadros" style="--src:url(…png);--n:24;--col:6;--lin:4;--dur:2.4s"></span>
   O site.js troca o adesivo estático por isto só quando a folha carregou. */
.anim.quadros{display:block;aspect-ratio:var(--ar,1);background-image:var(--src);background-repeat:no-repeat;
  background-size:calc(var(--col) * 100%) calc(var(--lin) * 100%);}

/* Adesivos seguem o cursor de leve (11/10): o site.js escreve --cx/--cy no contêiner; quem anda é o
   conteúdo, para somar com o giro de entrada e com a profundidade da Home sem disputar a mesma regra. */
.segue-cursor>*{translate:var(--cx,0px) var(--cy,0px);}
.segue-cursor>.brilho{translate:calc(-50% + var(--cx,0px)) calc(-50% + var(--cy,0px));}

/* Cenas presas na rolagem ([data-palco]): o espaço de rolagem é um <div class="percurso"> depois da
   seção; cada página diz a altura dele. Sem JS ou com movimento reduzido, ele não existe. */
.percurso{display:none;}
/* a seção presa fica acima da seguinte: o adesivo de costura na borda de baixo dela (ex.: caixa de laranjas
   de /servicos, tamagotchi de /eventos) aparece inteiro, em vez de cortado pela seção de baixo (12/10) */
.js [data-palco]>.secao:first-child{z-index:3;}
@media (prefers-reduced-motion: reduce){ .js [data-palco]>.percurso{display:none !important;} }

/* ---------- Movimento reduzido: tudo parado no estado final ---------- */
@media (prefers-reduced-motion: reduce){
  .costura>*,.js .adesivo>*,.js .entra,.js .fio-cresce{opacity:1 !important;transform:none !important;transition:none !important;}
  .costura{--deriva:0px !important;}
  .loop .trilho,.flutua,.sobe-ao-carregar,.zoom-lento{animation:none !important;}
  .in.chacoalha>*,.in.glitch>*,.in.glitch .g1,.in.glitch .g2{animation:none !important;}
}

/* Assinatura "Bulb Hub" no adesivo "Hello my name is" (comentário do Pedro, 10/10: o nome aparece
   como se estivesse sendo assinado em tempo real). Base = o adesivo com a caixa do nome vazia;
   por cima, o adesivo original, revelado da esquerda para a direita no ritmo das letras.
   Montado pelo site.js a partir de [data-anim="assinatura"]. Toca quando aparece e de novo no hover. */
.assina{position:relative;display:block;}
.assina img{width:100%;height:auto;display:block;}
.assina .tinta{position:absolute;inset:0;clip-path:inset(24% 90.6% 22% 8%);}
.in .assina .tinta,.in.assina .tinta{animation:assina 2.6s cubic-bezier(.45,.05,.55,.95) .5s both;}
.assina.de-novo .tinta{animation:assina 2.6s cubic-bezier(.45,.05,.55,.95) both;}
@keyframes assina{
  0%{clip-path:inset(24% 90.6% 22% 8%);}
  13%{clip-path:inset(24% 78% 22% 8%);}   /* B */
  21%{clip-path:inset(24% 71% 22% 8%);}   /* u */
  25%{clip-path:inset(24% 68% 22% 8%);}   /* l */
  35%{clip-path:inset(24% 58.5% 22% 8%);} /* b */
  44%{clip-path:inset(24% 56% 22% 8%);}   /* espaço: a caneta sobe */
  58%{clip-path:inset(24% 41% 22% 8%);}   /* H */
  68%{clip-path:inset(24% 32% 22% 8%);}   /* u */
  86%{clip-path:inset(24% 14% 22% 8%);}   /* b */
  100%{clip-path:inset(24% 9% 22% 8%);}
}
@media (prefers-reduced-motion: reduce){ .assina .tinta{animation:none !important;clip-path:none;} }

/* Fogo no fósforo (comentário do Pedro, 10/10): a própria chama do adesivo, recortada, tremula a
   partir da base, com um brilho que pulsa. A cópia só cresce (escala >= 1), então cobre sempre a
   chama original por baixo. Montado pelo site.js a partir de [data-anim="fogo"]. */
[data-anim="fogo"]{isolation:isolate;}
[data-anim="fogo"] .chama{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;
  clip-path:polygon(86.1% 76.5%,82.6% 70.5%,83.7% 64%,85.6% 60.2%,87.7% 57.6%,88.8% 62%,90.1% 66.8%,89.5% 72.4%,88.3% 75.8%);
  transform-origin:86.1% 75.8%;}
[data-anim="fogo"] .brilho{position:absolute;left:86.1%;top:66%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,90,.55) 0%,rgba(255,150,40,.22) 38%,rgba(255,120,30,0) 70%);mix-blend-mode:screen;opacity:.75;}
.in[data-anim="fogo"] .chama,.in [data-anim="fogo"] .chama{animation:chama 1.9s ease-in-out infinite;}
.in[data-anim="fogo"] .brilho,.in [data-anim="fogo"] .brilho{animation:brilho 1.3s ease-in-out infinite alternate;}
@keyframes chama{
  0%,100%{transform:scale(1,1) skewX(0deg);}
  18%{transform:scale(1.02,1.07) skewX(-3deg);}
  37%{transform:scale(1.01,1.03) skewX(2.5deg);}
  55%{transform:scale(1.03,1.09) skewX(-1.5deg);}
  74%{transform:scale(1,1.02) skewX(3deg);}
}
@keyframes brilho{from{opacity:.45;scale:.92;}to{opacity:.85;scale:1.08;}}

/* Laranja assoviando (comentário do Pedro, 10/10): os lábios pulsam no ritmo do assovio e notas
   musicais saem da boca e sobem flutuando. Montado pelo site.js a partir de [data-anim="assovio"]. */
[data-anim="assovio"] .labios{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;
  clip-path:inset(43.4% 42% 49.6% 49.4%);transform-origin:53.6% 46.8%;}
[data-anim="assovio"] .nota{position:absolute;left:57%;top:44%;font-weight:700;font-size:calc(var(--tam,50) * var(--px));line-height:1;font-family:"Apple Symbols","Segoe UI Symbol",sans-serif;color:var(--escuro);
  opacity:0;pointer-events:none;text-shadow:0 0 calc(3 * var(--px)) #fff,0 0 calc(3 * var(--px)) #fff;}
.in[data-anim="assovio"] .labios,.in [data-anim="assovio"] .labios{animation:labios 2.4s ease-in-out infinite;}
.in[data-anim="assovio"] .nota,.in [data-anim="assovio"] .nota{animation:nota 2.4s ease-out infinite;}
[data-anim="assovio"] .nota:nth-of-type(2){--tam:40;animation-delay:.8s !important;}
[data-anim="assovio"] .nota:nth-of-type(3){--tam:56;animation-delay:1.6s !important;}
@keyframes labios{0%,100%{transform:scale(1);}12%{transform:scale(1.14,1.1);}24%{transform:scale(.96);}40%{transform:scale(1.12,1.08);}55%{transform:scale(1);}}
@keyframes nota{
  0%{opacity:0;transform:translate(0,0) rotate(-8deg) scale(.8);}
  12%,60%{opacity:1;}
  100%{opacity:0;transform:translate(calc(70 * var(--px)),calc(-110 * var(--px))) rotate(14deg) scale(1.1);}
}
@media (prefers-reduced-motion: reduce){
  [data-anim="fogo"] .chama,[data-anim="fogo"] .brilho,[data-anim="assovio"] .labios{animation:none !important;}
  [data-anim="assovio"] .nota{display:none;}
}