/* 14/11 (noite) · cenas dirigidas pelo scroll.
   scrolly.js escreve o progresso de cada cena em variáveis; aqui elas viram
   movimento. Sem a classe .scrolly (movimento reduzido, navegador antigo) a
   página fica como era: seções comuns, tudo à vista.

   ⚠ as artes de mármore dependem de mix-blend-mode: lighten chegar na poeira.
   por isso cada arte é a própria camada presa (sticky) e nenhum ancestral
   dela leva transform, opacity, filter ou isolation. */

/* ── base (vale com e sem .scrolly) ── */
.hp-txt, .st-txt, .one-txt, .meet-txt { display: contents; }
.hp-art-in { position: absolute; inset: 0; }
.hp-art img.hp-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hp-l { clip-path: inset(0 50% 0 0); }
.hp-r { clip-path: inset(0 0 0 50%); }
.hp-spark { display: none; }
.st-a, .st-b { display: block; }
.story.statement .art-vit { order: 2; }
html:not(.scrolly) .meet { display: flex; flex-direction: column; }
html:not(.scrolly) .meet-head { order: 1; } html:not(.scrolly) .meet .art-ag { order: 2; } html:not(.scrolly) .meet .lines { order: 3; }
.one-num { font-variant-numeric: tabular-nums; }

/* palavras que acendem com o scroll: --w é o progresso do bloco, --i o índice */
html.scrolly [data-words] .w { opacity: clamp(.13, calc(var(--w, 0) * (var(--n, 1) + 3) - var(--i, 0)), 1); }

/* ══ 1 · abertura: as mãos se aproximam, a faísca acende ══ */
html.scrolly .hero.hero-plain { display: block; align-content: normal; height: 230svh !important; min-height: 0; padding: 0; overflow: clip; --a: 0; --z: 0; --s: 0; --so: 0; --ao: 1; --to: 1; --hh: 50svh; }
html.scrolly .hp-art { position: sticky; inset: auto; top: 0; width: 100%; height: 100svh; z-index: auto; overflow: clip; opacity: var(--ao);
  -webkit-mask-image: none; mask-image: none; }
html.scrolly .hp-art-in { inset: auto; left: 50%; bottom: 0; height: var(--hh); aspect-ratio: 1200 / 670; min-width: 100%;
  transform: translate(-50%, calc(var(--z) * (var(--hh) / 2 - 50svh))) scale(calc(1 + var(--z) * .85)); transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); }
/* separadas, a caixa de cada metade apareceria: fecha o azul do fundo da imagem */
html.scrolly .hp-art img.hp-half { filter: contrast(1.26) brightness(.95); }
/* o vão entre as duas metades é fechado com o mesmo preto do fundo da imagem, para a faixa ficar contínua */
html.scrolly .hp-art-in::before { content: ""; position: absolute; inset: 0 34%; background: #000003; }
html.scrolly .hp-l { transform: translateX(calc((1 - var(--a)) * -8%)); }
html.scrolly .hp-r { transform: translateX(calc((1 - var(--a)) * 8%)); }
html.scrolly .hp-spark { display: block; position: absolute; left: 50%; top: 49.5%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0, rgba(255,244,224,.92) 5%, rgba(255,226,178,.34) 20%, rgba(255,214,150,.08) 42%, transparent 62%);
  transform: scale(var(--s)); opacity: var(--so); }
html.scrolly .hp-txt { position: sticky; top: 0; height: 100svh; margin-top: -100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px);
  align-content: start; padding: clamp(118px, 16vh, 170px) max(24px, 5vw) 0; opacity: var(--to); transform: translateY(calc((1 - var(--to)) * -9svh)); }
html.scrolly .hp-txt.off { visibility: hidden; }
@media (max-width: 900px) { html.scrolly .hero.hero-plain { --hh: 46svh; height: 210svh !important; } }

/* ══ 2 · a frase: as duas metades se encontram, o texto acende, o Vitruviano surge ══ */
html.scrolly .story.statement { display: block; align-content: normal; height: 290svh !important; min-height: 0; padding: 0; overflow: clip; --c: 0; --ho: 1; --hu: 0; --lo: 0; --vo: 0; --vs: 1.16; --vb: 0px; }
html.scrolly .story.statement > .art-vit { position: sticky; top: 0; width: 100%; max-width: none; height: 100svh; margin: 0; aspect-ratio: auto; display: grid; place-items: center; justify-self: auto;
  -webkit-mask-image: none; mask-image: none; opacity: var(--vo); }
html.scrolly .art-vit img { width: min(1500px, 100vw, 168svh); height: auto; aspect-ratio: 16 / 9; transform: scale(var(--vs)); filter: blur(var(--vb));
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
html.scrolly .st-txt { position: sticky; top: 0; height: 100svh; margin-top: -100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 max(24px, 5vw); }
html.scrolly .st-txt .h2 { opacity: var(--ho); transform: translateY(calc(var(--hu) * -14svh)) scale(calc(1 - var(--hu) * .3)); }
html.scrolly .st-a { transform: translateX(calc((1 - var(--c)) * -34vw)); opacity: var(--c); }
html.scrolly .st-b { transform: translateX(calc((1 - var(--c)) * 34vw)); opacity: var(--c); }
html.scrolly .st-txt .lead { text-shadow: 0 1px 14px rgba(3,4,12,.95), 0 0 34px rgba(3,4,12,.8); opacity: var(--lo); transform: translateY(calc(var(--hu) * -9svh)); }
@media (max-width: 760px) {
  html.scrolly .story.statement { height: 260svh !important; }
  html.scrolly .story.statement > .art-vit { width: 100%; margin: 0; }
  html.scrolly .art-vit img { width: 178vw; max-width: none; margin-left: -39vw; filter: none; }
  html.scrolly .story.statement > .art-vit, html.scrolly .meet > .art-ag { justify-items: start; }
}

/* ══ 3 · o número: o Pensador entra, 76 conta, a frase acende ══ */
html.scrolly .cosmos .case.one { display: block; align-content: normal; height: 220svh; min-height: 0; padding: 0 !important; max-width: none; overflow: clip; --po: 0; --so2: 0; }
html.scrolly .case.one > .art-pen { position: sticky; inset: auto; top: 0; width: 100%; height: 100svh; z-index: auto; -webkit-mask-image: none; mask-image: none;
  opacity: var(--po); transform: translateX(calc((1 - var(--po)) * -4%)) scale(calc(1.06 - var(--po) * .06)); }
html.scrolly .art-pen img { -webkit-mask-image: radial-gradient(ellipse 60% 56% at 34% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 56% at 34% 50%, #000 55%, transparent 100%); }
html.scrolly .one-txt { position: sticky; top: 0; height: 100svh; margin: -100svh auto 0; max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 90px);
  align-content: center; padding: 0 max(24px, 5vw); text-align: left; }
html.scrolly .one-txt .one-n { opacity: var(--no, 0); }
html.scrolly .one-txt .one-src { opacity: calc(var(--so2) * .7); }
@media (max-width: 760px) {
  html.scrolly .cosmos .case.one { height: 200svh; }
  html.scrolly .case.one > .art-pen { top: 0; }
  html.scrolly .art-pen img { height: 78vw; margin-top: 112px; object-position: 24% 50%;
    -webkit-mask-image: radial-gradient(ellipse 70% 52% at 40% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 52% at 40% 50%, #000 55%, transparent 100%); }
  html.scrolly .one-txt { grid-template-columns: minmax(0, 1fr); align-content: end; padding-bottom: 9svh; }
}

/* ══ 4 · marcas: a fila anda com o scroll ══ */
html.scrolly .brand-marquee { transform: translateX(calc(var(--mx, 0) * 1px)); }

/* ══ 5 · serviços: cada linha se desenha ao entrar e apaga ao sair do foco ══ */
html.scrolly .svc li { opacity: calc(.3 + var(--f, 0) * .7); }
html.scrolly .svc li::before { width: calc(var(--e, 0) * 100%); transition: none; }
html.scrolly .svc li:hover::before { width: calc(var(--e, 0) * 100%); }
html.scrolly .svc h3, html.scrolly .svc .svc-what { transform: translateX(calc((1 - var(--e, 0)) * -5vw)); }
html.scrolly .svc dl { opacity: var(--e2, 0); transform: translateY(calc((1 - var(--e2, 0)) * 26px)); }
html.scrolly .svc .svc-n { opacity: calc(var(--e, 0) * .55); }

/* ══ 6 · agência: as estátuas atravessam a tela e as três frases se revezam ══ */
html.scrolly .meet { display: block; height: 360svh; padding: 0; isolation: auto; overflow: clip; --ao2: 0; --ax: 0; --as: 1.1; --mh: 1; }
html.scrolly .meet > .art-ag { position: sticky; top: 0; width: 100%; max-width: none; height: 100svh; margin: 0; aspect-ratio: auto; display: grid; place-items: center;
  -webkit-mask-image: none; mask-image: none; opacity: var(--ao2); transform: translateX(calc(var(--ax) * 21vw)); }
html.scrolly .art-ag img { width: min(1300px, 100vw, 150svh); height: auto; aspect-ratio: 16 / 9; transform: scale(var(--as));
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 56%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 56%, transparent 100%); }
html.scrolly .meet-txt { display: block; position: sticky; top: 0; height: 100svh; margin-top: -100svh; }
html.scrolly .meet-head { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 0 max(24px, 5vw); opacity: var(--mh); transform: scale(calc(.94 + var(--mh) * .06)); }
html.scrolly .meet-head h2 { font-size: clamp(44px, 7vw, 128px); }
html.scrolly .meet .lines { position: absolute; left: max(24px, 5vw); top: 0; bottom: 0; width: min(40vw, 620px); margin: 0; border: 0; }
html.scrolly .meet .lines li { position: absolute; left: 0; right: 0; top: 50%; display: block; padding: 0; border: 0; opacity: var(--o, 0);
  transform: translateY(calc(-50% + (var(--y, 0)) * 7svh)); }
html.scrolly .meet .lines .px { display: block; margin-bottom: 18px; }
html.scrolly .meet .lines p { font-size: clamp(28px, 3.3vw, 56px); line-height: 1.04; text-wrap: balance; }
@media (max-width: 760px) {
  html.scrolly .meet { height: 330svh; }
  html.scrolly .meet > .art-ag { align-items: start; transform: none; }
  html.scrolly .meet > .art-ag img { width: 150vw; max-width: none; margin-top: 12svh; margin-left: -25vw; }
  html.scrolly .meet .lines { left: 22px; right: 22px; width: auto; top: auto; bottom: 0; height: 44svh; }
  html.scrolly .meet .lines li { top: 0; transform: translateY(calc(var(--y, 0) * 5svh)); }
  html.scrolly .meet .lines p { font-size: clamp(26px, 7.4vw, 34px); }
}
/* celular com a barra do navegador aberta: a tela fica baixa e as mãos encostavam no botão */
@media (max-width: 900px) and (max-height: 720px) { html.scrolly .hero.hero-plain { --hh: 38svh; } }

/* ══ abertura na Lua (14/11, noite): cinema ao ar livre. diretor e robô
   sentados de costas, o projetor aponta para o céu. .hp-scene tem a proporção
   da imagem e cobre a tela ancorada embaixo; a nuvem com os filmes (.hp-sky)
   mora dentro dela, então anda e cresce junto no zoom do scroll. ══ */
.hp-scene, .hp-sky { display: none; }
.hero-lua { --sx: 87.5%; --sy: 29%; --sw: 27%; }
.hero-lua .hp-art-in { display: none; }
.hero.hero-lua .hp-art { inset: 0; height: 100%; overflow: clip; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); }
html.scrolly .hero.hero-lua .hp-art { inset: auto; top: 0; height: 100svh; }
.hero-lua .hp-scene { display: block; position: absolute; left: 50%; bottom: 0; width: max(100%, calc(100svh * 1.7778)); aspect-ratio: 16 / 9; transform: translateX(-50%); transform-origin: var(--sx) var(--sy); }
html.scrolly .hero-lua .hp-scene { transform: translateX(-50%) scale(calc(1 + var(--a) * .1 + var(--z) * .75)); }
.hero-lua .hp-moon { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.hero-lua .hp-sky { display: block; position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); aspect-ratio: 16 / 10; transform: translate(-50%, -50%) rotate(-12deg); mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 18%, rgba(0,0,0,.55) 48%, transparent 72%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 18%, rgba(0,0,0,.55) 48%, transparent 72%); }
.hp-gas { position: absolute; inset: -18%; opacity: .5; background: radial-gradient(ellipse at 38% 42%, #d2552c, transparent 62%), radial-gradient(ellipse at 66% 58%, #2a52c8, transparent 64%), radial-gradient(ellipse at 52% 30%, #b0408f, transparent 60%);
  -webkit-mask: url(assets/nebula/a.webp) center / 100% 100% no-repeat; mask: url(assets/nebula/a.webp) center / 100% 100% no-repeat; animation: hp-gas 90s linear infinite; }
@keyframes hp-gas { to { transform: rotate(360deg); } }
.hp-sky video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; filter: saturate(1.15) contrast(1.05); }
.hp-sky video.on { opacity: calc(.24 + var(--z, 0) * .5); }
.hero-lua .hp-title, .hero-lua .hp-desc { text-shadow: 0 2px 22px rgba(3,4,14,.9), 0 0 48px rgba(3,4,14,.7); }
@media (min-width: 901px) { .hero-lua .hp-title { grid-column: 1 / span 6; font-size: clamp(30px, 3.3vw, 62px); } }
@media (max-width: 760px) {
  .hero-lua { --sx: 85%; --sy: 35%; --sw: 26%; }
  .hero-lua .hp-scene { width: auto; height: 62svh; left: 0; transform: translateX(calc(-72% + 50vw)); }
  html.scrolly .hero-lua .hp-scene { transform: translateX(calc(-72% + 50vw)) scale(calc(1 + var(--a) * .1 + var(--z) * .75)); }
  .hero.hero-lua .hp-art { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); }
  .hero-lua .hp-moon { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
}
@media (max-width: 760px) and (max-height: 720px) { .hero-lua .hp-scene { height: 50svh; } }
/* desktop: a cena encosta na direita, para a equipe e o projetor ficarem longe do texto e do botão */
@media (min-width: 761px) {
  .hero-lua .hp-scene { left: auto; right: 0; transform: none; }
  html.scrolly .hero-lua .hp-scene { transform: scale(calc(1 + var(--a) * .1 + var(--z) * .75)); }
}
@media (min-width: 901px) {
  .hero-lua .hp-title { font-size: clamp(28px, 3.05vw, 58px); }
  .hero-lua .hp-side { grid-template-columns: minmax(0, 21em) max-content; justify-content: start; column-gap: 36px; margin-top: 20px; }
}
/* 14/11 (pedido dele): a abertura da Lua não tem zoom nem cena presa. é uma
   tela comum, que sobe com o scroll; os filmes ficam sempre na mesma opacidade. */
html.scrolly .hero.hero-lua { height: 100svh !important; }
html.scrolly .hero.hero-lua .hp-art { opacity: 1; }
html.scrolly .hero.hero-lua .hp-txt { opacity: 1; transform: none; }
html.scrolly .hero.hero-lua .hp-txt.off { visibility: visible; }
@media (min-width: 761px) { html.scrolly .hero-lua .hp-scene { transform: none; } }
@media (max-width: 760px) { html.scrolly .hero-lua .hp-scene { transform: translateX(calc(-72% + 50vw)); } }
.hero-lua .hp-sky video.on { opacity: .26; }

/* ══ Vitruviano em grãos (vitfx.js): a tela das partículas fica por cima da foto; a foto só entra no fim ══ */
.vit-fx { display: none; }
html.scrolly .art-vit.fx { position: sticky; }
html.scrolly .art-vit .vit-fx { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.scrolly .art-vit.fx img { opacity: var(--vi, 0); }

/* ══ agência sem imagem (14/11): as três frases ficam no centro, grandes ══ */
html.scrolly .meet .lines { left: 50%; width: min(1000px, calc(100% - 48px)); transform: translateX(-50%); text-align: center; }
html.scrolly .meet .lines p { font-size: clamp(30px, 4.2vw, 72px); }
@media (max-width: 760px) { html.scrolly .meet .lines { left: 22px; right: 22px; width: auto; transform: none; top: 0; bottom: 0; height: auto; } html.scrolly .meet .lines li { top: 50%; transform: translateY(calc(-50% + var(--y, 0) * 5svh)); } html.scrolly .meet .lines p { font-size: clamp(28px, 8vw, 38px); } }

/* ══ abertura com menos texto: título e botão, mais nada ══ */
@media (min-width: 901px) { .hero-lua .hp-side { grid-template-columns: max-content; margin-top: 28px; } .hero-lua .hp-title { font-size: clamp(30px, 3.4vw, 64px); } }
/* sem a camada da imagem antes dele, o texto da agência não precisa mais subir uma tela */
html.scrolly .meet-txt { margin-top: 0; }

/* ══ clientes (14/11): as logos, todas em branco, numa fileira. cada uma sobe e acende conforme a faixa entra na tela ══ */
.clients { position: relative; padding: clamp(90px, 16vh, 180px) max(24px, 5vw); color: var(--paper); text-align: center; }
html.has-universe:not(.no-universe) .clients { background: transparent; }
.clients-title { margin: 0 0 clamp(40px, 8vh, 90px); font: 500 clamp(26px, 3vw, 52px)/1 var(--ui); letter-spacing: -.04em; }
.clients-row { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; column-gap: clamp(18px, 3vw, 54px); row-gap: 56px; }
.clients-row li { display: grid; place-items: center; height: clamp(56px, 6vw, 92px); }
.clients-row img { display: block; height: calc(var(--h, 1) * clamp(34px, 3.6vw, 56px)); width: auto; max-width: 100%; object-fit: contain; opacity: .86; }
.lg-w { filter: brightness(0) invert(1); } .lg-inv { filter: grayscale(1) invert(1) contrast(4); } .lg-g { filter: grayscale(1) contrast(1.15); }
html.scrolly .clients-row li { opacity: var(--e, 0); transform: translateY(calc((1 - var(--e, 0)) * 34px)) scale(calc(.92 + var(--e, 0) * .08)); }
@media (max-width: 900px) { .clients-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .clients-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } .clients-row li { height: 64px; } .clients-row img { height: calc(var(--h, 1) * 40px); } .clients-row li:last-child { grid-column: 1 / -1; } }



/* 14/11 (pedido dele): o clarão na ponta do facho, que só aparecia quando passava o filme de fundo rosado,
   agora fica sempre aceso: um miolo quente que respira, com a borda em arco-íris do gás em volta */
.hero-lua .hp-gas { opacity: .78; }
.hero-lua .hp-sky::before { content: ""; position: absolute; inset: -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse 46% 42% at 50% 52%, rgba(255, 196, 170, .62) 0, rgba(226, 120, 140, .38) 34%, rgba(150, 80, 160, .14) 60%, transparent 76%);
  animation: hp-nova 7s ease-in-out infinite alternate; }
@keyframes hp-nova { from { opacity: .82; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
.hero-lua .hp-sky video { z-index: 1; mix-blend-mode: screen; }
.hero-lua .hp-sky video.on { opacity: .3; }

/* as palavras ao lado do Vitruviano (vitfx.js): aparecem junto com a foto */
.vit-word { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; opacity: var(--vi, 0);
  font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.03em; line-height: 1; color: #f0f0f0; }
.vit-word.it { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: rgba(240,240,240,.66); }

/* ══ o manifesto do creative engineer (14/11, noite) ══
   como as notas do desenho de Leonardo: um trecho em cima, a escultura no meio, uma régua e um trecho embaixo.
   o texto fica parado; quem se mexe são os caracteres de código (manuscrito.js) */
.manifesto { display: none; }
html.scrolly .story.statement { height: 380svh !important; }
html.scrolly .story.statement > .art-vit { transform: scale(calc(1 - var(--mz, 0) * .32)); transform-origin: 50% 52%; }
html.scrolly .manifesto { display: block; position: absolute; inset: 0; pointer-events: none; opacity: var(--mr, 0); }
.mf-top, .mf-bot { position: absolute; left: 50%; width: min(760px, calc(100% - 48px)); transform: translateX(-50%); text-align: left; }
.mf-top { top: clamp(78px, 11svh, 120px); }
.mf-bot { bottom: clamp(26px, 5svh, 56px); }
.manifesto p { position: relative; margin: 0; font-family: var(--serif, "Fraunces", Georgia, serif); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.005em; color: rgba(236, 222, 196, .82); text-wrap: pretty; }
.manifesto .mf-t { font-size: clamp(22px, 2vw, 32px); line-height: 1.15; color: #f1e6cf; margin-bottom: .2em; }
.manifesto .mf-l { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; }
.manifesto .mc.cd { font-family: ui-monospace, Menlo, monospace; font-style: normal; font-size: .82em; color: rgba(236, 200, 140, .7); }
.mf-ruler { display: block; position: relative; height: 9px; margin: 0 0 14px; border-bottom: 1px solid rgba(236, 222, 196, .5);
  background: repeating-linear-gradient(90deg, rgba(236,222,196,.5) 0 1px, transparent 1px 22px) bottom / 100% 6px no-repeat; }
.mf-rain { position: absolute; left: -24px; right: -24px; top: -18px; bottom: -18px; width: calc(100% + 48px); height: calc(100% + 36px); z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 100%); }
@media (max-width: 760px) {
  html.scrolly .story.statement > .art-vit { transform: scale(calc(1 - var(--mz, 0) * .2)); }
  .mf-top { top: 82px; } .mf-bot { bottom: 22px; }
  .manifesto .mf-t { font-size: 21px; } .manifesto .mf-l { font-size: 14px; line-height: 1.45; }
}

/* a chuva de código ocupa a seção inteira (manuscrito.js), atrás do texto e com um vazio no meio, onde fica a escultura */
.mf-rain-all { display: none; }
html.scrolly .mf-rain-all { display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100svh; transform: translateX(-50%); z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 26% 40% at 50% 52%, transparent 0, rgba(0,0,0,.35) 70%, #000 100%); mask-image: radial-gradient(ellipse 26% 40% at 50% 52%, transparent 0, rgba(0,0,0,.35) 70%, #000 100%); }
html.scrolly .st-txt > :not(.mf-rain-all) { position: relative; z-index: 1; }
html.scrolly .st-txt > .manifesto { position: absolute; }
.mf-rain { display: none !important; }
@media (max-width: 760px) { html.scrolly .mf-rain-all { -webkit-mask-image: radial-gradient(ellipse 48% 26% at 50% 50%, transparent 0, rgba(0,0,0,.35) 70%, #000 100%); mask-image: radial-gradient(ellipse 48% 26% at 50% 50%, transparent 0, rgba(0,0,0,.35) 70%, #000 100%); } }

/* a chuva de código do site inteiro (chuva.js): fixa na tela, atrás de todo o conteúdo, só depois da abertura */
.code-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; }

/* ══ agência: o ano visto de cima (14/11, noite) ══
   --k é o avanço da cena presa (scrolly.js). cada peça tem o seu instante (--t, e --c para o selo) */
.yr { display: none; }
html.scrolly .yr { display: block; position: absolute; left: 50%; top: clamp(90px, 15svh, 150px); width: min(1120px, calc(100% - 48px)); transform: translateX(-50%);
  opacity: clamp(0, calc((var(--k, 0) - .19) * 14), 1); }
.yr-legend { display: flex; gap: clamp(14px, 2.4vw, 36px); justify-content: center; flex-wrap: wrap; margin: 0 0 clamp(16px, 3svh, 30px); font: 500 11px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: rgba(240,240,240,.7); }
.yr-legend span { display: inline-flex; align-items: center; gap: 8px; opacity: clamp(0, calc((var(--k, 0) - var(--lt)) * 14), 1); }
.yr-legend .lg-a { --lt: .27; } .yr-legend .lg-m { --lt: .5; } .yr-legend .lg-ok { --lt: .76; }
.yr-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.lg-a i { border: 1px solid rgba(240,240,240,.7); background: repeating-linear-gradient(135deg, rgba(240,240,240,.18) 0 2px, transparent 2px 6px); }
.lg-m i { background: linear-gradient(135deg, #ffd9a0, #c99a62); }
.lg-ok i { border-radius: 50%; background: #f2efe6; box-shadow: inset 0 0 0 3px #0d1426; }
.yr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, .7vw, 10px); align-items: end; }
.yr-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(3px, .5vw, 7px); padding-bottom: 26px; border-bottom: 1px solid rgba(240,240,240,.18); }
.yr-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 26px; border-radius: 6px; background: rgba(240,240,240,.025); border: 1px dashed rgba(240,240,240,.08); }
.yr-mo { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 11px var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: rgba(240,240,240,.55); }
/* a campanha da agência: um bloco alto, vazado, que cai de cima */
.yr-camp { --p: clamp(0, calc((var(--k, 0) - var(--t)) * 12), 1); position: relative; aspect-ratio: 16 / 31.6; border-radius: 6px; border: 1px solid rgba(240,240,240,.62);
  background: repeating-linear-gradient(135deg, rgba(240,240,240,.1) 0 2px, transparent 2px 9px), rgba(13,20,38,.55);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px; gap: 4px; overflow: hidden;
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * -60px)); }
.yr-camp b { font: 400 clamp(13px, 1.15vw, 18px)/1.05 var(--serif, Georgia, serif); font-style: italic; color: #f2efe6; letter-spacing: -.01em; }
.yr-camp span { font: 500 9px var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: rgba(240,240,240,.55); }
/* as peças da moonworks: três por mês, com os quadros da série; sobem e acendem em ordem */
.yr-tile { --p: clamp(0, calc((var(--k, 0) - var(--t)) * 30), 1); --a: clamp(0, calc((var(--k, 0) - var(--c)) * 40), 1); position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; border-radius: 5px;
  background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255,217,160,.75), 0 6px 24px rgba(0,0,0,.45), 0 0 22px rgba(255,200,140,calc(var(--p) * .18));
  opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 46px)) scale(calc(.8 + var(--p) * .2)); }
/* o selo de aprovada */
.yr-tile .ok { position: absolute; right: -5px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #f2efe6; box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transform: scale(calc(var(--a) * (1 + (1 - var(--a)) * .6))); opacity: var(--a); }
.yr-tile .ok::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3px; height: 6px; border: solid #0d1426; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
/* as três frases ficam embaixo do ano, como legenda */
html.scrolly .meet .lines { left: 50%; top: auto; bottom: clamp(36px, 9svh, 96px); height: 4.4em; width: min(980px, calc(100% - 48px)); transform: translateX(-50%); }
html.scrolly .meet .lines li { top: auto; bottom: 0; transform: translateY(calc(var(--y, 0) * 4svh)); }
html.mo.scrolly .meet .lines li { transform: none; }
html.scrolly .meet .lines p { font-size: clamp(22px, 2.5vw, 40px); }
html.scrolly .meet .lines .px { margin-bottom: 10px; }
@media (max-width: 760px) {
  html.scrolly .yr { top: 78px; width: calc(100% - 32px); }
  .yr-legend { flex-direction: column; align-items: center; gap: 6px; font-size: 9.5px; }
  .yr-grid { gap: 3px; }
  .yr-col { padding-bottom: 20px; gap: 3px; }
  .yr-mo { font-size: 8px; letter-spacing: 0; }
  .yr-camp { padding: 5px 2px; aspect-ratio: 1 / 3.5; } .yr-camp b { font-size: 10px; writing-mode: vertical-rl; transform: rotate(180deg); } .yr-camp span { display: none; }
  .yr-tile { aspect-ratio: 1 / 1.1; border-radius: 3px; }
  .yr-tile .ok { width: 10px; height: 10px; right: -3px; top: -3px; } .yr-tile .ok::after { left: 3.4px; top: 1.6px; width: 2px; height: 4.5px; }
  html.scrolly .meet .lines { bottom: 4svh; width: calc(100% - 44px); height: 8em; }
  html.scrolly .meet .lines p { font-size: clamp(19px, 5.6vw, 24px); }
}
.yr-tile { width: 100%; }
html.scrolly .yr { top: clamp(110px, 20svh, 200px); }
@media (max-width: 760px) { html.scrolly .yr { top: 96px; } }
@media (min-width: 761px) { html.scrolly .yr { top: clamp(130px, 24svh, 240px); width: min(1280px, calc(100% - 64px)); } }
.yr-tile { background-position: 50% 30%; }

/* ══ celular (14/11, noite): a abertura cobre a tela de ponta a ponta em qualquer altura de navegador,
   com a dupla e o projetor no centro ══ */
@media (max-width: 760px) {
  .hero-lua .hp-scene, html.scrolly .hero-lua .hp-scene { left: 0; width: max(170vw, calc(62svh * 1.7778)); height: auto; aspect-ratio: 16 / 9; transform: translateX(calc(50vw - 62%)); }
}
@media (max-width: 760px) and (max-height: 720px) {
  .hero-lua .hp-scene, html.scrolly .hero-lua .hp-scene { width: max(170vw, calc(52svh * 1.7778)); height: auto; }
}
/* o ano da agência no celular: duas fileiras de seis meses, peças maiores */
@media (max-width: 760px) {
  .yr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 18px; column-gap: 5px; }
  .yr-col { gap: 4px; padding-bottom: 22px; }
  .yr-mo { font-size: 9.5px; letter-spacing: .06em; }
  .yr-tile { aspect-ratio: 16 / 11; }
  .yr-camp { aspect-ratio: 16 / 36; }
  .yr-camp b { font-size: 11px; }
  html.scrolly .yr { top: 92px; }
}
@media (max-width: 760px) { .foot.foot-v2 { padding-top: 104px; } }

/* ══ celular, experiência de rolagem (14/11, noite) ══ */
.snap { position: absolute; left: 0; width: 1px; height: 1px; top: calc((100% - 100svh) * var(--sp)); pointer-events: none; }
.svc-pin, .story.statement { position: relative; }
@media (max-width: 760px) {
  /* sem o cabeçalho: o nome já está no título da abertura e o contato no botão */
  .site-head { display: none !important; }
  html.scrolly .hero.hero-lua .hp-txt, .hero-lua .hp-txt { padding-top: 54px; }
  .hero-plain { padding-top: 54px; }
  .foot.foot-v2 { padding-top: 64px; }
  /* cenas mais curtas: menos dedo para atravessar cada uma */
  html.scrolly .story.statement { height: 280svh !important; }
  html.scrolly .svc-pin { height: 490svh !important; }
  html.mo.scrolly .meet, html.scrolly .meet { height: 260svh !important; }
}
/* no toque, a página assenta em cada serviço e em cada fase depois de um movimento rápido */
@media (pointer: coarse) and (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  .snap { scroll-snap-align: start; }
}
@media (max-width: 760px) { html.scrolly .yr { top: 21svh; } }

/* 14/11 (pedido dele): na agência o texto vem em cima e o quadro do ano embaixo. a frase da vez entra no alto,
   numerada, e o ano se monta logo abaixo, perto do pé da tela */
html.scrolly .meet .lines { top: clamp(84px, 25svh, 250px); bottom: auto; height: 4.6em; }
html.scrolly .meet .lines li { top: 0; bottom: auto; }
html.scrolly .meet .lines .px { color: #d9b878; opacity: .9; }
@media (min-width: 761px) { html.scrolly .yr { top: clamp(280px, 44svh, 450px); bottom: auto; } }
@media (max-width: 760px) {
  html.scrolly .meet .lines { top: 64px; bottom: auto; height: 9em; }
  html.scrolly .yr { top: max(250px, 36svh); bottom: auto; }
}
.yr-legend .lg-m i { background: linear-gradient(135deg, #f1dcab, #c9a463) !important; }
.yr-col { border-bottom-color: rgba(226, 196, 134, .28); }
.yr-tile .ok { background: #e2c486; }
/* enquanto a miniatura não chega, o bloco é um pedaço do céu, nunca um buraco */
.yr-tile { background-color: #17304f; }
/* 15/11 (pedido dele): a moonworks também trabalha durante as campanhas. nos meses de campanha o bloco da agência
   fica com a altura de duas peças e a peça da moonworks entra em cima dele, com o selo, como nos outros meses */
.yr-col.is-camp .yr-camp { aspect-ratio: 16 / 20.8; }
@media (max-width: 760px) { .yr-col.is-camp .yr-camp { aspect-ratio: 16 / 23.9; } }