/* Animações e acabamento do site público (vitrine) da Fróis.
   Regras: só transform/opacity/clip-path (baratos para o celular), nada bloqueia o carregamento,
   e quem pede "reduzir movimento" no aparelho vê tudo parado (bloco no fim do arquivo).
   As classes de "esconder antes de aparecer" só valem com <html class="anima">, que o <head> liga
   apenas quando o navegador aceita movimento. Sem JS, tudo aparece normalmente. */

:root {
  --creme: #FDF6EE;
  --chocolate: #3B1F0F;
  --rosa: #E8A0BF;
  --dourado: #D6A353;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);   /* sai rápido e assenta devagar, como calda escorrendo */
  --cortina: cubic-bezier(0.65, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }
.manuscrita { font-family: 'Dancing Script', cursive; }

/* Foco visível em tudo que é clicável (teclado). */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--chocolate);
  outline-offset: 3px;
  border-radius: 0.75rem;
}

/* ---------- 1. Aparecer ao rolar (e entrada escalonada do banner) ---------- */
.anima .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--suave), transform 0.7s var(--suave);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anima .revelar.visivel { opacity: 1; transform: none; }
.anima .revelar.visivel.esgotado { opacity: 0.7; } /* esgotado continua "apagadinho" */
/* Depois de aparecer, o JS marca .pronto: tira o atraso para o "passar o mouse" responder na hora. */
.anima .revelar.pronto { transition: none; }
.anima .cartao.revelar.pronto,
.anima .passo.revelar.pronto {
  transition: transform 0.3s var(--suave), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---------- 2. Topo que se esconde ao descer e volta ao subir ---------- */
.topo { transition: transform 0.35s var(--suave), box-shadow 0.3s ease; }
.topo.rolou { box-shadow: 0 6px 20px -12px rgba(59, 31, 15, 0.35); }
.topo.escondido { transform: translateY(-100%); }

/* Botão Admin discreto: só contorno; ganha cor ao passar o mouse. */
.botao-admin {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.botao-admin:hover { background-color: rgba(214, 163, 83, 0.15); border-color: var(--dourado); }
.botao-admin svg { transition: transform 0.25s var(--suave); }
.botao-admin:hover svg { transform: rotate(-12deg); }

/* ---------- 3. Banner: manchas de cor "derretendo" e pote flutuando ---------- */
.banner { isolation: isolate; }
.banner .mancha {
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.banner .mancha.m1 { width: 18rem; height: 18rem; background: var(--rosa); top: -6rem; left: -5rem; }
.banner .mancha.m2 { width: 16rem; height: 16rem; background: var(--dourado); bottom: -7rem; right: 20%; opacity: 0.35; }
.anima .banner .mancha.m1 { animation: derreter 14s ease-in-out infinite alternate; }
.anima .banner .mancha.m2 { animation: derreter 18s ease-in-out infinite alternate-reverse; }
@keyframes derreter {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3rem, 1.5rem) scale(1.15); }
  100% { transform: translate(-1rem, 3rem) scale(0.95); }
}

.anima .flutuar { animation: flutuar 6s ease-in-out infinite; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
/* Granulado (confeitos) subindo devagar ao redor do pote. */
.confeito {
  position: absolute;
  width: 0.5rem; height: 0.18rem;
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
}
.anima .confeito { animation: confeito 7s linear infinite; animation-delay: var(--atraso, 0s); }
@keyframes confeito {
  0%   { opacity: 0; transform: translateY(20px) rotate(var(--giro, 30deg)); }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-120px) rotate(calc(var(--giro, 30deg) + 180deg)); }
}

/* "Hoje tem: <sabor>" escrito à mão, letra por letra, com cursor piscando. */
.cursor-digitando {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background: var(--chocolate);
}
.anima .cursor-digitando { animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

/* ---------- 4. Faixa de palavras: contorno que se enche de cor (cortina) ---------- */
.faixa-palavra {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--chocolate);
  white-space: nowrap;
}
.faixa-palavra .cheio {
  position: absolute; inset: 0;
  color: var(--chocolate);
  -webkit-text-stroke: 0;
  clip-path: inset(0 0 0 0);
}
.anima .faixa-palavra .cheio {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--cortina);
  transition-delay: calc(var(--i, 0) * 200ms + 150ms);
}
.anima .visivel .faixa-palavra .cheio { clip-path: inset(0 0 0 0); }
.faixa-ponto { color: var(--dourado); }

/* ---------- 5. Passos do "Como pedir": número vazado que se enche ---------- */
.passo { transition: transform 0.25s var(--suave), border-color 0.25s ease, box-shadow 0.25s ease; }
.passo:hover { transform: translateY(-4px); border-color: var(--dourado); box-shadow: 0 12px 24px -16px rgba(59, 31, 15, 0.45); }
.passo-numero {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dourado);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.passo:hover .passo-numero, .passo:focus-within .passo-numero { color: var(--dourado); }
.passo svg { transition: transform 0.35s var(--suave); }
.passo:hover svg { transform: scale(1.1) rotate(-6deg); }

/* ---------- 6. Categorias em círculo ---------- */
.categoria-circulo { transition: transform 0.25s var(--suave), background-color 0.2s ease, border-color 0.2s ease; }
.categoria:hover .categoria-circulo { transform: translateY(-3px); }
.categoria:active .categoria-circulo { transform: scale(0.94); }
.categoria[aria-selected="true"] .categoria-circulo { box-shadow: 0 0 0 4px var(--creme), 0 0 0 6px var(--dourado); }

/* ---------- 7. Cartões de sabor ---------- */
.cartao { transition: transform 0.3s var(--suave), box-shadow 0.3s ease, border-color 0.3s ease; }
.cartao:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -20px rgba(59, 31, 15, 0.5); border-color: var(--dourado); }
.cartao .pote { transition: transform 0.5s var(--suave); }
.cartao:hover .pote { transform: translateY(-8px) rotate(-6deg) scale(1.06); }
.cartao.esgotado:hover { transform: none; box-shadow: none; }
.cartao.esgotado:hover .pote { transform: none; }

/* Brilho que passa pelo botão rosa ao passar o mouse/focar. */
.brilho { position: relative; overflow: hidden; }
.brilho::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
}
.brilho:hover::after, .brilho:focus-visible::after { transition: transform 0.7s ease; transform: skewX(-20deg) translateX(420%); }

/* CTA fixo do celular: sobe de baixo quando aparece. */
.anima #ctaFixo:not(.hidden) { animation: subir 0.5s var(--suave) both; animation-delay: 0.6s; }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

/* Texto só para leitor de tela. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Quem pede menos movimento: tudo parado e visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Sem a classe "anima" nada fica escondido; estas linhas são só garantia. */
  .anima .revelar:not(.esgotado) { opacity: 1; }
  .anima .revelar { transform: none; }
  .faixa-palavra .cheio { clip-path: inset(0 0 0 0) !important; }
  .confeito { display: none; }
  .topo.escondido { transform: none; }
}

/* ---------- Carrossel de destaque: trilho sem barra de rolagem (deslizar continua) ---------- */
.carrossel { scrollbar-width: none; overscroll-behavior-x: contain; }
.carrossel::-webkit-scrollbar { display: none; }