/* =====================================================================
   motor/v1/rituais/rituais.css · rituais 'esmalte' (salão) e 'barra' (academia), T8

   Conceito: o gesto do ofício como botão de confirmar.
   Momento-assinatura: no salão, a pessoa tira o pincel do vidrinho e pinta a unha
   com o dedo (a tinta fica onde passou); na academia, puxa a barra carregada do chão
   até o alto, e ela pesa, enverga e levanta pó de magnésio.
   Layout: o palco do gesto mora no herói (acima do nome no celular, à direita no
   desktop); a tira de confirmar repete o gesto, em arrasto horizontal, no fim do pedido.

   Só tokens do motor (--fundo, --fundo-2, --tinta, --tinta-suave, --destaque,
   --borda-forte, --foco, --dur-*, --curva-*), que já mudam com claro/escuro e com a
   paleta do tenant. O traço de nanquim (#1E1B2E) e a pele são do desenho da T2
   (assets/svg/ritual-salao.svg e ritual-academia.svg), iguais nos dois temas.
   touch-action: none SÓ no palco; a tira usa pan-y, então a página sempre rola.
   ===================================================================== */
:root {
  --ritual-linha: #1E1B2E;
  --ritual-pele: #F2C7A5;
  --ritual-unha: #FBEFE8;
  --ritual-vidro: #FFFDF6;
  --ritual-aco: #D9DDE0;
  --ritual-aco-escuro: #A9AFB6;
  --ritual-anilha-2: color-mix(in oklab, var(--ritual-linha) 82%, var(--tinta));
}

/* ---------- herói com ritual ---------- */
.heroi.ritual-heroi { min-height: 78svh; }
/* v1.3 (SAL-24): sem as listras de 1 px (moiré em tela de densidade 1) e sem a faixa rosa listrada do pé.
   Fica a toalha como um grão quase invisível (até 4%) e a borda de 1 px das outras seções. */
.heroi.esmalte {
  background-color: var(--fundo-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  border-bottom: 1px solid var(--borda);
}
/* v1.3 (ACAD-08): o piso de borracha deixou de ser uma faixa solta no pé do herói (127 px abaixo do chão
   da barra); ele nasce do próprio palco (.palco-barra::before), na altura exata do chão do desenho */
.heroi.barra { background-color: var(--fundo); }

.palco-ritual {
  position: relative;
  justify-self: end;
  display: grid;
  gap: var(--esp-2);
  /* celular: o palco é o momento do herói, então cresce (antes 50vw/210px) e ocupa o vazio acima do título */
  width: min(70vw, 280px);
  margin-bottom: var(--esp-2);
  border-radius: var(--raio-2);
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.palco-ritual svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.palco-ritual:focus-visible { outline: 3px solid var(--foco); outline-offset: 6px; }
.ritual-dica {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 1.4em;
  font-family: var(--fonte-dado);
  font-size: var(--t-menor);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  transition: opacity var(--dur-media) var(--curva-entrada);
}
.ritual-medidor {
  position: relative; height: 4px;
  border-radius: var(--raio-1);
  background: color-mix(in oklab, var(--tinta) 18%, transparent);
  overflow: hidden;
}
.ritual-medidor::before {
  content: ""; position: absolute; inset: 0;
  background: var(--destaque);
  transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
  transition: transform var(--dur-media) var(--curva-entrada);
}
.ritual-pronto {
  font-size: var(--t-menor); font-weight: 600; line-height: 1.3;
  color: var(--tinta);
  min-height: 1.3em;
}
.palco-ritual.is-pintada .ritual-dica,
.palco-ritual.is-levantada .ritual-dica { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .palco-ritual { cursor: grab; }
  .palco-ritual.is-pincel-na-mao, .palco-ritual.is-segurando { cursor: grabbing; }
  .palco-ritual.is-pintada, .palco-ritual.is-levantada { cursor: default; }
}

/* ---------- primeira dobra (v1.3: SAL-07, ACAD-03, ACAD-08) ----------
   Até 1023 px o texto vem primeiro (sobretítulo, nome, bordão, frase) e o palco depois, centrado, com
   altura de no máximo 46% da tela: quem chega do anúncio lê o que é e de quem é antes do gesto.
   --palco-prop = altura / largura do conjunto (desenho + dica + medidor); o palco nunca passa de 46svh. */
.palco-esmalte { --palco-prop: 1.32; }
.palco-barra { --palco-prop: 1.45; }
@media (max-width: 1023px) {
  .heroi.ritual-heroi { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; }
  .heroi.ritual-heroi > .palco-ritual {
    order: 1;
    justify-self: center;
    width: min(100%, 300px);
    width: min(100%, 300px, calc(46svh / var(--palco-prop)));
    margin-top: var(--esp-3);
    margin-bottom: 0;
  }
  /* a frase da demonstração desce para depois do gesto: nome, bordão e o desenho inteiro (a barra no
     chão, a unha) cabem na primeira tela de 360 x 740 e 390 x 844 */
  .heroi.ritual-heroi > .heroi-sub { order: 2; }
}
@media (max-width: 559px) {
  .heroi.ritual-heroi > .palco-ritual { width: min(100%, 300px, calc(38svh / var(--palco-prop))); }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .heroi.ritual-heroi > .palco-ritual { width: min(100%, 420px, calc(46svh / var(--palco-prop))); }
}
/* paisagem no celular: duas colunas, texto à esquerda, palco à direita na altura da tela */
@media (orientation: landscape) and (max-height: 500px) {
  .heroi.ritual-heroi { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-6); align-content: center; }
  .heroi.ritual-heroi > :not(.palco-ritual) { grid-column: 1; }
  .heroi.ritual-heroi > .palco-ritual { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; width: calc(72svh / var(--palco-prop)); }
}
@media (min-width: 1024px) {
  .heroi.ritual-heroi { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 330px); column-gap: var(--esp-7); }
  .heroi.ritual-heroi > :not(.palco-ritual) { grid-column: 1; }
  .heroi.ritual-heroi > .palco-ritual { grid-column: 2; grid-row: 1 / span 8; align-self: end; width: 100%; margin-bottom: 0; }
}

/* ---------- piso da academia (ACAD-08) ----------
   O desenho vai para o pé do palco (dica e medidor em cima) e o palco desce até o pé do herói; o piso é
   uma faixa de ponta a ponta atrás dele, com o topo exatamente na linha do chão do desenho (y = 226 de
   240, ou seja, 14/240 da largura acima do pé). O herói corta o que passa das bordas. */
@media (min-width: 1024px) {
  .palco-barra > .ra-svg { order: 2; }
  .heroi.barra > .palco-barra { margin-bottom: calc(-1 * var(--esp-8)); container-type: inline-size; }
}
.palco-barra::before { display: none; }
@media (min-width: 1024px) { .palco-barra::before {
  display: block;
  content: ""; position: absolute; z-index: -1;
  left: -100vw; right: -100vw; bottom: 0;
  height: 19px;
  height: calc(100cqi * 14 / 240);
  background-color: color-mix(in oklab, var(--tinta) 9%, var(--fundo));
  background-image: repeating-linear-gradient(90deg, transparent 0 119px, color-mix(in oklab, var(--tinta) 16%, var(--fundo)) 119px 120px);
  border-top: 1px solid color-mix(in oklab, var(--tinta) 22%, var(--fundo));
} }

/* ---------- esmalte: desenho ---------- */
.re-l { stroke: var(--ritual-linha); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.re-lf { fill: none; stroke: var(--ritual-linha); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.re-sombra { fill: var(--ritual-linha); }
.re-pele { fill: var(--ritual-pele); }
.re-unha-base { fill: var(--ritual-unha); }
.re-destaque { fill: var(--destaque); }
.re-tinta { fill: var(--ritual-linha); }
.re-papel { fill: var(--ritual-vidro); }
.re-gargalo { fill: var(--ritual-aco); }
.re-brilho { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; }
.re-pincelada { fill: none; stroke: var(--destaque); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.re-assentar {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform var(--dur-lenta) var(--curva-entrada);
}
.re-reflexo { opacity: 0; transition: opacity var(--dur-media) var(--curva-entrada) var(--dur-lenta); }
.palco-esmalte.is-pintada .re-assentar { transform: scaleY(1); }
.palco-esmalte.is-pintada .re-reflexo { opacity: 0.9; }
/* v1.1.1: o dedo desce até y=204 (+ sombra) num viewBox de 200 e sai do svg (overflow visível para o
   pincel); a folga de 5% da largura (= ~10 unidades) impede que o rótulo encoste no desenho no desktop */
.palco-esmalte > .re-svg { margin-bottom: 5%; }
.heroi.esmalte .heroi-nome { transition: color var(--dur-lenta) var(--curva-entrada); }
.heroi.esmalte.is-pintada .heroi-nome { color: var(--destaque); }

/* ---------- barra: desenho ---------- */
.ra-l { stroke: var(--ritual-linha); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.ra-lf { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.ra-sombra { fill: var(--ritual-linha); }
.ra-sombra-traco { fill: none; stroke: var(--ritual-linha); stroke-width: 14; stroke-linecap: round; }
.ra-barra-contorno { fill: none; stroke: var(--ritual-linha); stroke-width: 15; stroke-linecap: round; }
.ra-barra-aco { fill: none; stroke: var(--ritual-aco); stroke-width: 8; stroke-linecap: round; }
.ra-recartilhado { fill: none; stroke: #8C909B; stroke-width: 1.5; }
.ra-destaque { fill: var(--destaque); }
.ra-anilha-2 { fill: var(--ritual-anilha-2); }
.ra-aco-escuro { fill: var(--ritual-aco-escuro); }
.ra-brilho { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; }
.ra-giz { fill: #FFFFFF; }
.ra-marca-topo { fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: 0.8; }
.ra-marca-ponta { fill: none; stroke: var(--tinta-suave); stroke-width: 3; stroke-linecap: round; }
.palco-barra.is-levantada .ra-marca-topo { stroke: var(--destaque); stroke-dasharray: none; opacity: 1; }
.palco-barra.is-levantada .ra-marca-ponta { stroke: var(--destaque); }
.ra-poeira circle { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.ra-poeira.is-subindo circle { animation: ra-po 620ms var(--curva-entrada) both; animation-delay: calc(var(--i, 0) * 35ms); }
.ra-poeira.is-forte circle { animation-duration: 900ms; --sobe: -30px; }
/* cada grão sobe com a sua deriva lateral (--dx); os 4 de fora (.ra-giz-forte) só saem na batida forte */
@keyframes ra-po {
  0% { opacity: 0.95; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--sobe, -16px)) scale(1.35); }
}
.seta-cima {
  display: inline-block; width: 18px; height: 22px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M9 20V4M3 9l6-6 6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M9 20V4M3 9l6-6 6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: none; animation: none; opacity: 1;
}
.heroi.barra .heroi-nome { transition: transform var(--dur-lenta) var(--curva-mola); }
.heroi.barra.is-levantada .heroi-nome {
  transform: translateY(-0.04em);
  text-decoration: underline;
  text-decoration-color: var(--destaque);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

/* ---------- tira de confirmar (os dois rituais) ---------- */
.tira-ritual {
  position: relative; overflow: clip; isolation: isolate;
  display: grid; place-items: center;
  width: 100%; height: var(--altura-tira, 56px); min-height: 44px;
  padding-inline: var(--esp-5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background-color: var(--fundo-2);
  color: var(--tinta);
  font-family: var(--fonte-dado);
  font-size: var(--t-nota);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.tira-ritual:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.tira-ritual .texto-tira { position: relative; z-index: 3; pointer-events: none; padding-left: 30%; padding-right: 4px; opacity: calc(1 - var(--prog, 0) * 0.75); }
.tira-ritual::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--destaque); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); z-index: 4; }
.tira-ritual.is-arrastando { cursor: grabbing; }
.tira-ritual.is-confirmada { border-color: var(--destaque); cursor: default; }
.tira-ritual.is-confirmada .texto-tira { opacity: 0.45; }

.te-unha {
  position: absolute; inset: 9px 8px; z-index: 0;
  border-radius: 999px;
  border: 2px solid var(--borda-forte);
  background: color-mix(in oklab, var(--destaque) 7%, var(--fundo-2));
  overflow: hidden;
}
/* v1.3 (SAL-17, SAL-N2): a tira do salão é só a pílula da unha (um contorno, não dois). Ganha 14 px
   em cima para o pincel caber inteiro (ele tem 46 px e a ponta molha no meio da pílula), e o rótulo
   fica centrado na pista, numa linha, com folga do pincel em repouso dos dois lados. */
.tira-ritual.tira-esmalte {
  height: calc(var(--altura-tira, 56px) + 14px);
  padding: 14px 0 0;
  border-color: transparent;
  background: transparent;
}
.tira-esmalte .te-unha { inset: 20px 8px 6px; }
.tira-esmalte .te-pincel { top: 0; }
.tira-esmalte::before { left: 8px; right: 8px; border-radius: 0 0 var(--raio-2) var(--raio-2); }
.tira-esmalte .texto-tira {
  width: 100%;
  padding-inline: 40px;
  white-space: nowrap;
  text-align: center;
}
.tira-ritual.tira-esmalte.is-confirmada { border-color: transparent; }
.tira-esmalte.is-confirmada .te-unha { border-color: var(--destaque); }
.tira-esmalte:focus-visible { outline-offset: 0; }
@media (max-width: 400px) {
  .tira-esmalte .texto-tira { padding-inline: 36px; font-size: var(--t-micro); letter-spacing: 0; }
}
.te-tinta { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--destaque); }
.te-brilho { position: absolute; left: 12px; right: 14px; top: 6px; height: 3px; border-radius: 3px; background: color-mix(in oklab, white 55%, transparent); }
.te-pincel { position: absolute; left: 0; top: calc(50% - 36px); width: 30px; height: 46px; z-index: 2; pointer-events: none; transform-origin: 50% 91.3%; will-change: transform; }
.te-pincel svg { display: block; width: 100%; height: 100%; overflow: visible; }

.tb-chao { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--borda-forte); z-index: 0; }
.tb-barra { position: absolute; left: 0; top: calc(50% - 15px); width: 64px; height: 30px; z-index: 2; pointer-events: none; will-change: transform; }
.tb-barra svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ra-barra-mini { fill: var(--ritual-aco-escuro); stroke: var(--ritual-linha); stroke-width: 1.2; }
.ra-l-mini { stroke: var(--ritual-linha); stroke-width: 1.6; }
.tira-barra.is-pronta .tb-barra svg, .tira-esmalte.is-pronta .te-pincel svg { filter: drop-shadow(0 0 5px color-mix(in oklab, var(--destaque) 70%, transparent)); }

/* ---------- espelho da academia (ACAD-02) ----------
   O espelho oval de mão é da barbearia e do salão. Na academia, a confirmação é a ficha de treino:
   cartão retangular com a régua do destaque no alto, rótulo à esquerda e dado à direita. O atributo
   data-ritual mora no #heroi; o espelho fica no pedido, então a regra pergunta à página com :has(). */
:root:has(#heroi[data-ritual="barra"]) .espelho {
  width: min(100%, 26rem);
  min-height: 0;
  margin-bottom: var(--esp-7);
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  justify-items: stretch;
  text-align: left;
  border-radius: var(--raio-2);
  border: 1px solid var(--borda-forte);
  border-top: 8px solid var(--destaque);
  box-shadow: var(--sombra-2);
  background: var(--fundo-2);
}
:root:has(#heroi[data-ritual="barra"]) .espelho::after { content: none; }
:root:has(#heroi[data-ritual="barra"]) .espelho h3 { max-width: none; }
:root:has(#heroi[data-ritual="barra"]) .espelho-texto { max-width: none; }
:root:has(#heroi[data-ritual="barra"]) .espelho dl {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  margin-block: var(--esp-2);
  border-top: 1px solid var(--borda);
}
:root:has(#heroi[data-ritual="barra"]) .espelho dt,
:root:has(#heroi[data-ritual="barra"]) .espelho dd { margin: 0; padding-block: var(--esp-3); border-bottom: 1px solid var(--borda); align-self: stretch; display: flex; align-items: center; }
:root:has(#heroi[data-ritual="barra"]) .espelho dd { justify-content: flex-end; padding-left: var(--esp-4); text-align: right; font-family: var(--fonte-dado); }
:root:has(#heroi[data-ritual="barra"]) .espelho .link-whats,
:root:has(#heroi[data-ritual="barra"]) .espelho #espelho-novo { justify-self: stretch; border-radius: var(--raio-2); }

/* ---------- movimento reduzido: estado final, sem gesto, sem tira ---------- */
@media (prefers-reduced-motion: reduce) {
  .palco-ritual { cursor: default; touch-action: auto; }
  .palco-ritual svg { touch-action: auto; }
  .re-assentar, .re-reflexo, .heroi.esmalte .heroi-nome, .heroi.barra .heroi-nome, .ritual-medidor::before { transition: none; }
  .ra-poeira circle { animation: none !important; opacity: 0; }
  .tira-ritual { display: none; }
}

/* =====================================================================
   RITUAL VIVO (09/11/2026)
   Conceito: o objeto do ofício chega em cena como personagem e, enquanto ninguém mexe,
   mostra sozinho o gesto inteiro em versão curta; no fim passa a vez com a dica do gesto
   (ritualTextos.dicaVez do preset; sem ela, "Arraste o pincel" no salão e "Puxe a barra" na academia).
   Momento-assinatura: a barra despenca no chão e as anilhas tremem no pó de magnésio;
   o vidrinho entra girando e o pincel sai para escorrer o excesso.
   Movimento: a entrada é EM DOIS (12 poses/s, no JS) com antecipação e sobreposição;
   a demonstração roda a 60 qps com peso; a dica entra em 260 ms e sai em 160 ms.
   Só transform e opacity. Movimento reduzido: nada disso nasce (só o estado final).
   ===================================================================== */

/* ---------- a dica passa a vez: a dica do gesto ("Arraste o pincel", "Puxe a barra") empilhada sobre a dica do palco ---------- */
.ritual-dica.tem-vez { position: relative; }
.ritual-dica .dica-orig {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  transition: opacity 160ms var(--curva-saida), transform 160ms var(--curva-saida);
}
.ritual-dica .dica-vez {
  position: absolute; left: 0; top: 50%;
  display: inline-flex; align-items: center; gap: var(--esp-2);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(calc(-50% + 8px));
  transition: opacity 160ms var(--curva-saida), transform 160ms var(--curva-saida);
}
.ritual-dica.is-sua-vez .dica-orig { opacity: 0; transform: translateY(-8px); }
.ritual-dica.is-sua-vez .dica-vez {
  opacity: 1; transform: translateY(-50%);
  transition: opacity 260ms var(--curva-entrada) 60ms, transform 260ms var(--curva-entrada) 60ms;
}
.ritual-dica .vez-texto {
  font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--destaque);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ritual-dica .vez-dedo { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; }
.ritual-dica .vez-dedo::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--destaque); opacity: 0;
}
.ritual-dica.is-sua-vez .vez-dedo::after { animation: vez-pulso 1100ms var(--curva-entrada) 300ms infinite; }
@keyframes vez-pulso {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ---------- barra: a faixa da anilha ganha o nome ---------- */
.ra-faixa { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0.2); }
.ra-faixa-fundo { fill: var(--ritual-vidro); stroke: var(--ritual-linha); stroke-width: 2.5; }
.ra-faixa-nome {
  fill: var(--ritual-linha);
  font-family: var(--fonte-display, sans-serif); font-weight: 800; font-size: 11px; letter-spacing: 0.04em;
}
.palco-barra.is-levantada .ra-faixa {
  opacity: 1; transform: none;
  transition: opacity var(--dur-media) var(--curva-entrada) 120ms, transform var(--dur-lenta) var(--curva-mola) 120ms;
}
.palco-barra.is-carimbo .ra-faixa { animation: ra-carimbo 560ms var(--curva-entrada) 140ms both; }
.palco-barra.is-carimbo .ra-anilha:last-of-type .ra-faixa { animation-delay: 200ms; }   /* a segunda anilha chega um tique depois */
@keyframes ra-carimbo {
  0% { opacity: 0; transform: scale(1.6, 0.3); }
  45% { opacity: 1; transform: scale(0.9, 1.08); }
  70% { transform: scale(1.04, 0.97); }
  100% { opacity: 1; transform: none; }
}
/* pó de magnésio: os 4 grãos de fora só saem na batida forte (keyframes ra-po lá em cima) */
.ra-poeira .ra-giz-forte { visibility: hidden; }
.ra-poeira.is-forte .ra-giz-forte { visibility: visible; }

/* ---------- esmalte: a demonstração, a gota e o brilho da unha ---------- */
.re-demo { stroke-width: 15; }
.re-gota { pointer-events: none; }
.re-gota path { stroke-width: 2.5; }
.re-lampejo { fill: #FFFFFF; opacity: 0; transform: translateX(-30px); }
.palco-esmalte.is-brilho .re-lampejo { animation: re-lampejo 760ms var(--curva-entrada) 420ms both; }
@keyframes re-lampejo {
  0% { opacity: 0; transform: translateX(-30px); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(78px); }
}
.re-estrela { fill: #FFFFFF; stroke: var(--ritual-linha); stroke-width: 1.6; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); }
.palco-esmalte.is-brilho .re-estrela { animation: re-estrela 900ms var(--curva-mola) 760ms both; }
@keyframes re-estrela {
  0% { transform: scale(0) rotate(-45deg); opacity: 1; }
  45% { transform: scale(1.15) rotate(0deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(8deg); opacity: 1; }
  100% { transform: scale(0) rotate(30deg); opacity: 0; }
}

/* ---------- movimento reduzido: só o estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .ritual-dica .dica-vez { display: none; }
  .ritual-dica .dica-orig { opacity: 1 !important; transform: none !important; }
  .palco-barra.is-levantada .ra-faixa { transition: none; }
  .ra-faixa, .re-lampejo, .re-estrela, .ritual-dica .vez-dedo::after { animation: none !important; }
}