/* EX Tintometria — abertura: a lata vista de cima, a receita e o botão de pausa.
   Camadas da lata (de baixo para cima):
   - aura: o brilho macio do anel (fraco em repouso, um pouco mais forte no "Cor pronta");
   - anel do espectro: o fio fino da logo (os bicos dos corantes saem dele);
   - janela: um círculo logo dentro do anel; na troca, as latas passam por baixo dele;
     - corpo da lata: tinta (SVG que anima) + luz (SVG parado) + brilho que varre + aro cromado (CSS);
   - ar: bicos, gotas caindo, respingos e os lampejos do anel (SVG).
   Cada peça parada fica na sua própria camada (will-change), para o navegador não redesenhar o aro e a luz
   a cada quadro. Todo o movimento é do GSAP (abertura.js): nada aqui tem transition/animation, para a
   pausa parar tudo. */

.lata {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}
.lata > * { position: absolute; }

/* Anel do espectro: o mesmo fio fino da logo */
.lata__anel,
.lata__aura {
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--amarelo), var(--laranja), var(--vermelho), var(--magenta), var(--violeta), var(--azul), var(--ciano), var(--verde), var(--amarelo));
}
.lata__anel {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
}
/* Brilho do anel: uma faixa estreita e macia feita com máscara (sem blur, não pesa no celular).
   Um véu claro por cima tira a saturação, para o brilho não virar neon. */
.lata__aura {
  inset: -2.5%;
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)),
    conic-gradient(from 200deg, var(--amarelo), var(--laranja), var(--vermelho), var(--magenta), var(--violeta), var(--azul), var(--ciano), var(--verde), var(--amarelo));
  opacity: 0;
  -webkit-mask: radial-gradient(closest-side, transparent 92.4%, rgba(0, 0, 0, .3) 95%, #000 97.1%, rgba(0, 0, 0, .3) 98.7%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 92.4%, rgba(0, 0, 0, .3) 95%, #000 97.1%, rgba(0, 0, 0, .3) 98.7%, transparent 100%);
  will-change: opacity;
}

/* A janela recorta a lata num círculo logo dentro do anel: na troca, as latas passam por baixo dele */
.lata__janela { inset: 0; }
/* o recorte só existe durante a troca de lata (recorte em volta de camadas animadas custa caro a cada quadro) */
.lata__janela.em-troca {
  -webkit-clip-path: circle(48.9% at 50% 50%);
  clip-path: circle(48.9% at 50% 50%);
}
.lata__corpo { position: absolute; inset: 0; will-change: transform; }
/* a cor da base fica numa camada própria: mudar a cor não redesenha as manchas de corante */
.lata__base { position: absolute; inset: 10%; border-radius: 50%; background: #EDEEEA; }
.lata__tinta, .lata__luz, .lata__ar {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
}
.lata__tinta { will-change: transform; }
.lata__luz { will-change: transform; pointer-events: none; }
.lata__ar { overflow: visible; pointer-events: none; }
.lata__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Brilho que atravessa a tinta no "Cor pronta" (só transform: não redesenha nada) */
.lata__varredura {
  position: absolute; inset: 10%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.lata__varredura i {
  position: absolute; top: -30%; bottom: -30%; left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .15) 60%, rgba(255, 255, 255, .05) 78%, rgba(255, 255, 255, 0));
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Aro cromado da lata, de dentro para fora: a sombra de contato com a tinta, o lábio, o canal da tampa
   (o sulco mais fundo), uma faixa lisa, um segundo sulco fino e o friso enrolado.
   Perfil radial (simétrico) + reflexos do ambiente (cônico) + luz vinda do alto à esquerda (linear). */
.lata__borda {
  position: absolute; inset: 7%;
  border-radius: 50%;
  will-change: transform;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .4) 100%),
    radial-gradient(closest-side,
      transparent 91.6%,
      rgba(0, 0, 0, .72) 92%,          /* sombra de contato com a tinta */
      rgba(0, 0, 0, .2) 92.8%,
      rgba(255, 255, 255, .5) 93.5%,   /* crista do lábio */
      rgba(255, 255, 255, 0) 94.2%,
      rgba(0, 0, 0, .46) 95%,          /* fundo do canal da tampa */
      rgba(0, 0, 0, .06) 95.8%,
      rgba(255, 255, 255, .16) 96.3%,  /* faixa lisa */
      rgba(0, 0, 0, .2) 96.9%,         /* sulco fino */
      rgba(255, 255, 255, .52) 97.8%,  /* crista do friso */
      rgba(255, 255, 255, 0) 98.7%,
      rgba(0, 0, 0, .55) 100%),
    conic-gradient(from 215deg, #F4F6F8, #8E949C 13%, #E3E6EA 25%, #6A7078 41%, #F0F2F4 57%, #969CA4 71%, #E6E9EC 85%, #F4F6F8);
  -webkit-mask: radial-gradient(closest-side, transparent 91.5%, #000 92%);
  mask: radial-gradient(closest-side, transparent 91.5%, #000 92%);
}
/* Reflexos finos no friso: a luz do teto bate no alto à esquerda e, mais fraca, embaixo à direita */
.lata__borda::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 112deg, rgba(255, 255, 255, .5) 132deg, rgba(255, 255, 255, 0) 150deg,
    rgba(255, 255, 255, 0) 276deg, rgba(255, 255, 255, .95) 308deg, rgba(255, 255, 255, .35) 322deg, rgba(255, 255, 255, 0) 344deg);
  -webkit-mask: radial-gradient(closest-side, transparent 96.9%, #000 97.5%, #000 98.1%, transparent 98.9%);
  mask: radial-gradient(closest-side, transparent 96.9%, #000 97.5%, #000 98.1%, transparent 98.9%);
}

/* ---------- Receita (mesmas medidas do cartão do site: a abertura não muda de altura) ---------- */
.receita {
  position: relative;
  z-index: 0;
  width: 88%;
  margin: 14px auto 0;
  padding: 15px 16px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #141619 0%, #0C0D0F 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .085),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  will-change: transform; /* o cartão muda a cada quadro (os ml): fica numa camada própria */
}
.receita::before { /* a sombra macia fica numa camada parada, que não é redesenhada quando os números mudam */
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .9);
  will-change: transform;
  pointer-events: none;
}
/* Nome da cor em cima, produto embaixo: nomes da coleção como "Rosa Maravilha" cabem inteiros */
.receita__cabeca {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  margin-bottom: 8px;
}
.receita__titulo { min-width: 0; }
.receita__rotulo { color: var(--prata-2); font-size: .8125rem; line-height: 1.4; }
.receita__cor {
  display: block;
  overflow: hidden;
  font-size: 1.1875rem; font-weight: 700; font-stretch: 112%;
  line-height: 1.3;
  height: 1.3em;
  white-space: nowrap;
}
.receita__cor-texto { display: inline-block; will-change: transform; }
.receita__base {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--prata); font-size: .8125rem; white-space: nowrap;
}
.receita__amostra {
  position: relative;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--alvo, #1E4D5C);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 6px 8px -4px rgba(255, 255, 255, .25);
}

/* Destaque que desliza de linha em linha; por dentro, a carga na cor do corante acompanha os ml */
.receita__foco {
  position: absolute; left: 8px; right: 8px; top: 0;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.receita__foco i { /* a carga anda como um nível de líquido: a borda da frente fica nítida e clara */
  position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui, #fff) 4%, transparent), color-mix(in srgb, var(--ui, #fff) 18%, transparent) 78%, color-mix(in srgb, var(--ui, #fff) 34%, transparent));
  box-shadow: inset -1.5px 0 0 color-mix(in srgb, var(--ui, #fff) 75%, transparent);
  transform: translateX(-100%);
  opacity: 0; /* o abertura.js posiciona e mostra */
}
.receita__linhas { list-style: none; display: grid; gap: 1px; margin: 0 -8px; }
.receita__linha {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 4px 8px;
  font-size: .875rem;
  line-height: 1.45;
  color: #A4AAB2;
}
.receita__ponto {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%;
  margin-left: 1px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .26);
}
.receita__ponto i { /* halo da linha ativa */
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ui) 0%, transparent 100%);
  opacity: 0;
  transform: scale(.4);
}
.receita__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receita__ml { /* leitura de instrumento: a Archivo condensada */
  font-variant-numeric: tabular-nums;
  font-stretch: 72%; font-weight: 640; font-size: 1rem; letter-spacing: .01em;
  color: #D9DDE2;
  text-align: right;
  transform-origin: 100% 50%;
}

.receita__estado {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  color: var(--prata);
  font-size: .8125rem;
  line-height: 1.4;
  display: flex; align-items: center; gap: 8px;
}
.estado__icone { width: 16px; height: 16px; flex: none; overflow: visible; }
.estado__icone circle, .estado__icone path { fill: none; }
.estado__trilho { stroke: rgba(255, 255, 255, .16); stroke-width: 1.6; }
.estado__progresso { stroke: #E6E9EC; stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 0 999; }
.estado__fundo { fill: var(--verde) !important; }
.estado__check { stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 999; }
.estado__janela { display: block; overflow: hidden; height: 1.4em; flex: 1; min-width: 0; }
.estado__texto { display: block; white-space: nowrap; will-change: transform; }
.receita__estado.pronta { color: var(--papel); }

/* ---------- Pausa ---------- */
.dosagem__pausa {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(18, 19, 22, .82);
  border: 1px solid #3A3D42;
  color: var(--prata);
  cursor: pointer;
}
.dosagem__pausa[hidden] { display: none; } /* só aparece quando há animação para pausar */
.dosagem__pausa:hover { color: var(--papel); border-color: #6A7078; }
.dosagem__pausa svg { width: 16px; height: 16px; fill: currentColor; }
.dosagem__pausa .icone-tocar { display: none; }
.dosagem__pausa[aria-pressed="true"] .icone-pausa { display: none; }
.dosagem__pausa[aria-pressed="true"] .icone-tocar { display: block; }

/* Notebooks com tela baixa: a receita não espreme o nome da cor quando a lata encolhe */
@media (min-width: 901px) and (max-height: 860px) {
  .receita { width: max(88%, 290px); }
}
/* Celular e tablet: a lata fica um pouco menor que o cartão (as mesmas medidas do site) */
@media (max-width: 900px) {
  .lata { width: 74%; margin-inline: auto; }
}
/* Celular estreito: o nome da cor e a base empilham, e o cartão não muda de altura entre receitas */
@media (max-width: 21.25em) { /* 340px */
  .receita { width: 100%; padding-inline: 14px; }
  .receita__cabeca { flex-direction: column; gap: 6px; }
}

@media (forced-colors: active) {
  .lata__aura, .receita__foco, .lata__varredura { display: none; }
}

/* Movimento reduzido: tudo parado no estado final (o abertura.js monta a receita pronta) */
@media (prefers-reduced-motion: reduce) {
  .dosagem__pausa { display: none; }
}

/* Os ml do cartão são sorteados: o aviso fica à direita do nome da coleção, sem ocupar altura */
.receita__rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.receita__aviso {
  color: var(--prata-2);
  font-size: .6875rem;
  white-space: nowrap;
}