/* Grupo Mônaco · MOVIMENTO (R3)
   Só estado inicial, estado final e transição: nada aqui muda layout, cor de
   texto em repouso ou copy. Todo estado escondido mora sob html.js (o <head>
   põe a classe antes da 1ª pintura) E sob prefers-reduced-motion: no-preference,
   então sem JS ou com movimento reduzido o conteúdo já nasce no estado final.
   Estado inicial de reveal = opacity + transform + filter, nunca visibility.
   Suavizar texto é COR (scroll-read), nunca opacity.
   Linguagem do SignalIQ; favoritos do 21st portados sem biblioteca:
   Text Animation (bloco de censura), Reveal Text (lead), Text Scroll Read,
   Fill text + Preloader (abertura), Background Boxes, Border Beam, Timeline.
   Tempo: tokens --ease-expo e --dur-* de tokens.css. JS em assets/js/app.js. */

/* ---------- propriedades registradas: interpolam em transição/animação ---------- */
@property --lead-fio { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --feixe-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- some da tela, fica para o leitor de tela ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }

/* =======================================================================
   ABERTURA · só na 1ª visita da sessão (o <head> decide e põe html.intro).
   Papel + grade; o M se monta; a palavra do logo enche de onyx; a cortina
   sobe em 0,86 s e sai em 1,28 s. A saída é CSS puro: sem JS nenhum, ela
   termina sozinha fora da tela; o <head> ainda tira a classe em 2,5 s.
   ======================================================================= */
.abertura { display: none; }
html.intro .abertura {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--papel); pointer-events: auto;
  animation: abertura-sobe .42s cubic-bezier(.76,0,.24,1) .86s both;
}
html.intro .abertura::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grade-cor) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grade-cor) 1px, transparent 1px);
  background-size: var(--grade-passo) var(--grade-passo);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 85%);
}
.abertura__logo { position: relative; width: min(440px, 72vw); aspect-ratio: 5234.95 / 619.07; }
/* o M ocupa 948,88 de 5234,95 do logo horizontal */
.abertura__m { position: absolute; left: 0; top: 0; width: 18.126%; height: 100%; overflow: visible; }
.abertura__m path { fill: var(--onyx); transform-box: fill-box; transform-origin: 50% 100%;
  animation: abertura-m .5s var(--ease-expo) both; }
.abertura__m path:nth-child(2) { animation-delay: .08s; }
.abertura__m .apice { fill: var(--monaco-red-manual); animation-delay: .16s; }
/* a palavra: o próprio logo recortado depois do M (x > 20%); a base clara e o cheio onyx */
.abertura__base, .abertura__cheio { position: absolute; inset: 0;
  background: url(../img/logo-horizontal-black.svg) 0 0 / 100% 100% no-repeat; }
.abertura__base { clip-path: inset(0 0 0 20%); opacity: .12; }
.abertura__cheio { clip-path: inset(0 0 0 20%); animation: abertura-enche .6s cubic-bezier(.65,0,.35,1) .2s both; }
@keyframes abertura-m { from { opacity: 0; transform: translateY(55%) scaleY(.7); } to { opacity: 1; transform: none; } }
@keyframes abertura-enche { from { clip-path: inset(0 80% 0 20%); } to { clip-path: inset(0 0 0 20%); } }
@keyframes abertura-sobe { to { transform: translateY(-100%); visibility: hidden; pointer-events: none; } }

/* =======================================================================
   TRANSIÇÃO ENTRE PÁGINAS (View Transitions entre documentos).
   Uma cortina onyx com o M sobe cobrindo a página que sai e continua
   subindo revelando a que entra. O cabeçalho tem nome próprio e não pisca.
   Navegador sem suporte ignora a regra e navega normal.
   ======================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.hdr { view-transition-name: hdr; }
/* Até 1100 o .hdr rola com a página e entra na cortina junto com ela (com nome, ele
   desceria do alto da tela quando a página está rolada); quem fica por cima da
   cortina é a barra de vidro do pé, com nome próprio (R4 A4). */
@media (max-width: 1100px) {
  .hdr { view-transition-name: none; }
  .barra { view-transition-name: barra; }
}
::view-transition-image-pair(root) {
  background: var(--onyx) url(../img/monaco-mark-white.svg) 50% 50% / 64px auto no-repeat;
}
/* uma passada só: acelera cobrindo a que sai, segura 120 ms com o M inteiro na
   tela e desacelera revelando a que entra (0,90 s no total) */
::view-transition-old(root) { mix-blend-mode: normal; animation: vt-cobre .32s cubic-bezier(.7,0,.84,0) both; }
::view-transition-new(root) { mix-blend-mode: normal; animation: vt-descobre .46s cubic-bezier(.16,1,.3,1) .44s both; }
::view-transition-group(hdr) { animation-duration: .5s; animation-timing-function: var(--ease-expo); }
/* A barra do celular troca o nome de uma vez, quando a cortina já cobriu a página que
   sai (0,32 s). O cruzamento padrão deixava "Início" e "Sobre nós" um sobre o outro por
   um quarto de segundo. O M e o menu são iguais nas duas e não se mexem. */
::view-transition-old(barra) { animation: vt-barra-sai .32s steps(1, end) both; }
::view-transition-new(barra) { animation: vt-barra-entra .32s steps(1, end) both; }
@keyframes vt-barra-sai { to { opacity: 0; } }
@keyframes vt-barra-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-cobre { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes vt-descobre { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* M dos heróis: o logo oficial cheio por baixo do traço, nas cores do manual (é a
   marca, não interface). Sem JS, em movimento reduzido e na impressão já nasce cheio. */
.m-traco .m-cheio path { fill: var(--onyx); stroke: none; }
.m-traco .m-cheio .apice { fill: var(--monaco-red-manual); }

/* =======================================================================
   ESTADOS DE ENTRADA · tudo aqui dentro some em movimento reduzido.
   O JS arma por ITEM (entra ~8% na tela) e desarma só quando o item sai
   96px além da borda; --d é o atraso que ele calcula para a coreografia.
   ======================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---- reveal por item (data-reveal) ---- */
  html.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px);
    transition: opacity .6s var(--ease-expo), transform .8s var(--ease-expo), filter .6s var(--ease-expo); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; transition-delay: var(--d, 0ms); }

  /* ---- título por linha com bloco de censura (data-wipe) ----
     O título inteiro espera invisível; armado, cada linha recebe UM bloco da cor
     do texto que varre e revela. Na palavra-chave (.hl) o mesmo bloco leva uma
     faixa na cor dela (gradiente de paradas secas, app.js): a borda é uma só, e o
     vermelho passa no tempo do preto. No "2018," (.hl-box) o vermelho fica como fundo. */
  html.js [data-wipe] { position: relative; }
  html.js [data-wipe]:not(.is-in) { opacity: 0; }
  html.js [data-wipe] .w-p { opacity: 0; }
  html.js [data-wipe].is-in .w-p { opacity: 1;
    transition: opacity 0s linear calc(var(--d, 0ms) + var(--li, 0) * 110ms + 380ms); }
  .w-bloco { position: absolute; z-index: 1; pointer-events: none; background: currentColor; clip-path: inset(0 100% 0 0); }
  html.js [data-wipe].is-in .w-bloco {
    animation: w-varre .76s cubic-bezier(.77,0,.18,1) calc(var(--d, 0ms) + var(--li, 0) * 110ms) both; }
  html.js [data-wipe].is-in .w-bloco.w-feito { animation: none; }   /* remedido depois de revelado */
  html.js [data-wipe] .hl-box { background: linear-gradient(var(--monaco-red), var(--monaco-red)) 0 0 / 0% 100% no-repeat; }
  html.js [data-wipe].is-in .hl-box { background-size: 100% 100%;
    transition: background-size .38s cubic-bezier(.77,0,.18,1) calc(var(--d, 0ms) + var(--li, 0) * 110ms + 380ms); }

  /* ---- lead palavra a palavra (data-lead): blur + cascata; o fio vermelho cresce ---- */
  html.js [data-lead]:not(.is-in) { opacity: 0; }
  html.js [data-lead] { --lead-fio: 0; transition: --lead-fio .9s var(--ease-expo); }
  html.js [data-lead].is-in { --lead-fio: 1; transition-delay: var(--d, 0ms); }
  html.js [data-lead] .l-p { opacity: 0; filter: blur(8px);
    transition: opacity .5s var(--ease-expo), filter .7s var(--ease-expo); }
  html.js [data-lead].is-in .l-p { opacity: 1; filter: none;
    transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 22ms); }

  /* ---- decodificação de rótulo (data-decode): aparece já embaralhado ---- */
  html.js [data-decode]:not(.is-in) { opacity: 0; }
  html.js [data-decode] { transition: opacity .2s linear; }
  html.js [data-decode].is-in { transition-delay: var(--d, 0ms); }

  /* ---- fios e colchetes que desenham (data-draw) ---- */
  html.js .moldura[data-draw]::before { opacity: 0; inset: -18px;
    transition: inset .9s var(--ease-expo), opacity .3s linear; }
  html.js .moldura[data-draw].is-in::before { opacity: 1; inset: -1px; transition-delay: var(--d, 0ms); }
  html.js svg[data-draw] > path { stroke-dasharray: 1 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1); }
  html.js svg[data-draw].is-in > path { stroke-dashoffset: 0;
    transition-delay: calc(var(--d, 0ms) + var(--pi, 0) * 180ms); }
  /* o M cheio dos heróis entra quando o último traço acaba (2 × 180 ms + 1,8 s), numa
     varredura com a inclinação das pernas: a borda anda 44,3% da largura na altura do M */
  html.js svg[data-draw] .m-cheio { clip-path: polygon(0% 0%, 0% 0%, -44.3% 100%, -44.3% 100%);
    transition: clip-path .7s cubic-bezier(.65,0,.35,1); }
  html.js svg[data-draw].is-in .m-cheio { clip-path: polygon(0% 0%, 144.3% 0%, 100% 100%, -44.3% 100%);
    transition-delay: calc(var(--d, 0ms) + 2160ms); }
  html.js [data-draw]:not(svg):not(.moldura) { clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.65,0,.35,1); }
  /* colchete que aponta para a esquerda (--prazo na home, --dir na /solucoes) se desenha da direita */
  html.js :is(.anota--prazo, .anota--dir) .colchete[data-draw] { clip-path: inset(0 0 0 100%); }
  html.js [data-draw]:not(svg):not(.moldura).is-in { clip-path: inset(0 0 0 0); transition-delay: var(--d, 0ms); }

  /* ---- foto que entra em foco (data-focus): desfocada e escura para nítida ---- */
  html.js [data-focus] { filter: blur(14px) brightness(.6) saturate(.7); transform: scale(1.02);
    transition: filter 1.5s var(--ease-expo), transform 1.8s var(--ease-expo); }
  html.js [data-focus].is-in { filter: none; transform: none; transition-delay: var(--d, 0ms); }

  /* ---- scroll-read (data-scrollread): cinza AA para a cor final, por COR ----
     Cinco paradas calculadas em luz linear pelo JS (--sr-0 a --sr-4): a
     luminância anda reta entre os extremos, e como os dois passam AA, todo
     meio-termo passa. Onde há view(), a rolagem dirige; senão o JS pinta. */
  /* inset 0: o padrão (auto) herda o scroll-padding-top do html e adiantaria a
     leitura em relação à conta do JS de reserva */
  @supports (animation-timeline: view()) {
    html.js .sr-css { view-timeline: --sr block; view-timeline-inset: 0; }
    html.js .sr-css .sr-u { animation: sr-cor linear both; animation-timeline: --sr;
      animation-range: cover var(--a, 20%) cover var(--b, 50%); }
  }

  /* ---- paralaxe leve (data-parallax): rolagem dirige onde há scroll(); senão o JS ---- */
  @supports (animation-timeline: scroll()) {
    html.js [data-parallax].plx-topo { animation: plx-topo linear both; animation-timeline: scroll(root block);
      animation-range: 0px 1200px; }
    html.js [data-parallax].plx-meio { animation: plx-meio linear both; animation-timeline: view(block 0);
      animation-range: cover 0% cover 100%; }
  }

  /* ---- palavra-marca do rodapé rolando devagar (data-marquee-word) ---- */
  .mq-trilho { display: flex; width: max-content;
    animation: mq var(--mq-dur, 40s) linear var(--mq-atraso, 0s) infinite; }
  .mq-trilho > span { padding-right: .45em; }
  .mq-trilho.pausa { animation-play-state: paused; }

  /* ---- Background Boxes: célula da grade do hero acende perto do cursor (só ponteiro fino) ---- */
  .grade-celula { position: absolute; left: 0; top: 0; width: var(--grade-passo); height: var(--grade-passo);
    background: color-mix(in srgb, var(--monaco-red) 9%, transparent); opacity: 0; pointer-events: none; }

  /* ---- Border Beam: uma passada vermelha na borda do simulador quando ele vira humanizado ---- */
  #simulador { position: relative; }
  .borda-feixe { position: absolute; inset: 0; z-index: 6; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--feixe-ang), transparent 0deg 292deg, var(--monaco-red) 342deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: feixe-gira 1.7s cubic-bezier(.45,0,.25,1) both; }
}

@keyframes w-varre { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes sr-cor { 0% { color: var(--sr-0); } 25% { color: var(--sr-1); } 50% { color: var(--sr-2); } 75% { color: var(--sr-3); } 100% { color: var(--sr-4); } }
@keyframes plx-topo { from { translate: 0 0; } to { translate: 0 216px; } }
@keyframes plx-meio { from { translate: 0 -48px; } to { translate: 0 48px; } }
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes feixe-gira { 0% { --feixe-ang: 0deg; opacity: 1; } 88% { opacity: 1; } 100% { --feixe-ang: 360deg; opacity: 0; } }

/* =======================================================================
   MOVIMENTO REDUZIDO · nada anima, nada fica escondido. As regras acima já
   não se aplicam; aqui ficam as que moram fora daquele bloco: a abertura e o
   reveal legado (.reveal) das internas, que o site.css esconde sem condição
   (era isto que reprovava .publicos e .cta-inner no movimento.py).
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .abertura { display: none !important; }
  .reveal, .publicos.reveal, .cta-inner.reveal { opacity: 1; transform: none; }
}
/* trava do <head>: se o app.js não rodou, ele tira html.js e o legado aparece */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* trava do app.js no WebKit: enquanto o CSS não vale nada transiciona; sem isto, o
   que tem transição animava do "sem CSS" até o estado inicial quando a folha chegava */
html.carregando *, html.carregando *::before, html.carregando *::after { transition: none !important; }
/* sentinela: o app.js só começa quando esta folha, a última do <head>, já vale */
:root { --css-ok: 1; }

/* impressão: tudo no estado final */
@media print {
  .abertura { display: none !important; }
  [data-reveal], [data-wipe], [data-lead], [data-decode], [data-focus], [data-draw], .m-cheio, .w-p, .l-p, .reveal {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .w-bloco, .borda-feixe, .grade-celula { display: none !important; }
}