/* =====================================================================
   Lumivie - camada de movimento
   Regra que vale para tudo aqui: o movimento serve para guiar o olho e
   dar vida, nunca para chamar atencao para si mesmo. Nada pisca, nada
   salta, nada gira. Duracoes longas, curvas suaves, amplitude pequena.

   Duas situacoes desligam o movimento:
     - o visitante pediu menos animacao no sistema
     - o dono esta editando (item boiando atrapalha clicar)
   ===================================================================== */

/* ------------------------------------------------------- respiracao */

@keyframes boia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes boiaCurto {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes derivaA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28px, -22px) scale(1.06); }
  66%      { transform: translate(-18px, 16px) scale(.96); }
}

@keyframes derivaB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-32px, 20px) scale(1.08); }
}

@keyframes brilho {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}

@keyframes surge {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------- manchas de cor no topo */
/* Duas formas borradas atras do hero. Ficam abaixo de tudo, com opacidade
   baixa: dao profundidade sem competir com o texto.                   */

.hero { isolation: isolate; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  width: 380px; height: 380px;
  top: -80px; right: -60px;
  background: color-mix(in srgb, var(--c-gold) 42%, transparent);
  animation: derivaA 22s ease-in-out infinite;
}

.hero::after {
  width: 320px; height: 320px;
  bottom: -100px; left: -80px;
  background: color-mix(in srgb, var(--c-accent) 38%, transparent);
  animation: derivaB 27s ease-in-out infinite;
}

@media (max-width: 700px) {
  .hero::before { width: 240px; height: 240px; }
  .hero::after  { width: 200px; height: 200px; }
}

/* --------------------------------------------------- itens boiando */

.hero__media > img,
.hero__media > .ph {
  animation: boia 8s ease-in-out infinite;
}

.hero__badge {
  animation: boiaCurto 6.5s ease-in-out infinite;
  animation-delay: -2s;          /* fora de sincronia com a imagem */
}

.guarantee__seal {
  animation: boiaCurto 7s ease-in-out infinite;
}

/* ------------------------------------------------ placeholder vivo */
/* Enquanto nao ha foto real, um brilho lento atravessa o espaco.     */

.ph::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in srgb, #fff 26%, transparent) 50%,
    transparent 70%);
  background-size: 220% 100%;
  animation: brilho 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* ------------------------------------------------------ aparicoes */

.reveal {
  transform: translateY(22px) scale(.995);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-in { transform: none; }

/* --------------------------------------------------------- botoes */
/* Um reflexo atravessa o botao ao passar o mouse. Uma vez, rapido.  */

.btn { position: relative; overflow: hidden; isolation: isolate; }

.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    color-mix(in srgb, #fff 30%, transparent) 50%,
    transparent 65%);
  background-size: 250% 100%;
  background-position: -120% 0;
  transition: background-position .75s ease;
  pointer-events: none;
  z-index: -1;
}
.btn:hover::after { background-position: 220% 0; }

.btn--ghost::after { display: none; }
.btn--ghost { transition: border-color .3s ease, background-color .3s ease, transform .25s ease; }
.btn--ghost:hover { background: color-mix(in srgb, var(--c-ink) 5%, transparent); }

/* ---------------------------------------------------------- cards */

.card {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1),
              box-shadow .4s ease,
              border-color .4s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line));
}

.card__icon { transition: transform .4s cubic-bezier(.34, 1.4, .64, 1), background-color .4s ease; }
.card:hover .card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
}

/* ---------------------------------------------------- depoimentos */

.quote { transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease; }
.quote:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--c-accent) 32%, var(--c-line));
}
.quote .stars { transition: letter-spacing .4s ease; }
.quote:hover .stars { letter-spacing: .2em; }

/* --------------------------------------------------- ingredientes */

.ing__row {
  transition: background-color .35s ease, padding-left .35s ease;
  padding-inline: 0 0;
}
.ing__row:hover {
  background: color-mix(in srgb, var(--c-accent) 5%, transparent);
  padding-left: 16px;
}
.ing__row h3 { transition: color .35s ease; }
.ing__row:hover h3 { color: var(--c-accent); }

/* ----------------------------------------------------------- kits */

.kit { transition: border-color .3s ease, background-color .3s ease, transform .3s ease; }
.kit:hover { transform: translateX(3px); }
.kit__dot::after { transition: transform .25s cubic-bezier(.34, 1.5, .64, 1); }
.kit.is-active .kit__dot::after { animation: surge .25s ease; }

/* -------------------------------------------------------- galeria */

.gallery__main { overflow: hidden; border-radius: var(--radius); }
.gallery__main img,
.gallery__main .ph { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.gallery__main:hover img,
.gallery__main:hover .ph { transform: scale(1.04); }

.gallery__thumbs button { transition: border-color .3s ease, transform .3s ease; }
.gallery__thumbs button:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------ FAQ */

.faq summary { transition: color .3s ease, padding-left .3s ease; }
.faq summary:hover { color: var(--c-accent); padding-left: 6px; }
.faq details[open] > p { animation: surge .45s cubic-bezier(.22, .61, .36, 1); }
.faq summary::after { transition: transform .35s cubic-bezier(.34, 1.3, .64, 1), margin-top .35s ease; }

/* --------------------------------------------------------- rodape */

.footer a:not(.logo):not(.footer__admin) {
  transition: color .3s ease, transform .3s ease;
}
.footer a:not(.logo):not(.footer__admin):hover { transform: translateX(4px); }

/* Porta discreta do administrador: parece um detalhe de pontuacao ate
   alguem passar o mouse.                                            */
.footer__admin {
  display: inline-block;
  margin-left: 7px;
  font-size: .42rem;
  vertical-align: middle;
  color: var(--c-line);
  text-decoration: none;
  transition: color .35s ease, transform .35s cubic-bezier(.34, 1.5, .64, 1);
}
.footer__admin:hover { color: var(--c-accent); transform: scale(1.8); }

/* --------------------------------------------------------- logo */

.logo { transition: opacity .3s ease; }
.logo span { transition: color .4s ease; }
.logo:hover { opacity: .78; }

/* ---------------------------------------------- cronometro e selo */

.clock div { transition: background-color .3s ease; }
.countdown:hover .clock div { background: color-mix(in srgb, var(--c-bg) 20%, transparent); }

.guarantee__seal { transition: border-color .4s ease, box-shadow .4s ease; }
.guarantee__seal:hover {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-gold) 12%, transparent);
}

/* ------------------------------------------------ antes e depois */

.ba__handle::after { transition: transform .25s cubic-bezier(.34, 1.5, .64, 1); }
.ba:hover .ba__handle::after { transform: translate(-50%, -50%) scale(1.1); }

/* ===================================================================
   Desligamentos
   =================================================================== */

/* Editando: nada pode boiar embaixo do cursor de quem esta clicando. */
body.ed-ativo .hero__media > img,
body.ed-ativo .hero__media > .ph,
body.ed-ativo .hero__badge,
body.ed-ativo .guarantee__seal,
body.ed-ativo .ph::before,
body.ed-ativo .hero::before,
body.ed-ativo .hero::after {
  animation: none !important;
}
body.ed-ativo .gallery__main:hover img,
body.ed-ativo .gallery__main:hover .ph { transform: none; }

/* Preferencia do sistema: o site fica parado, e continua legivel. */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .hero__media > img, .hero__media > .ph,
  .hero__badge, .guarantee__seal, .ph::before {
    animation: none !important;
  }
  .btn::after { display: none; }
  .card:hover, .quote:hover, .kit:hover,
  .gallery__thumbs button:hover { transform: none; }
  .gallery__main:hover img, .gallery__main:hover .ph { transform: none; }
  .faq details[open] > p { animation: none; }
  .reveal { transform: none; transition: none; }
}