/* ============================================================
   Amora Variedades — animações e interações
   Entradas escalonadas + efeito de luz (shine) + hover rico.
   Usa as variáveis de identidade definidas em styles.css
   ============================================================ */

/* ---------------- keyframes base ---------------- */
@keyframes amSurgir      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes amSurgirIc    { from { opacity: 0; transform: translateY(12px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes amSurgirLado  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes amLuz         { 0% { left: -130%; opacity: 0; } 12% { opacity: 1; } 100% { left: 135%; opacity: 0; } }
@keyframes amPulso       { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes amFlutuar     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------------- efeito de LUZ que varre no hover ---------------- */
.passo, .fb-card, .beneficio, .produto-card, .faq-lista details, .ajuda-artigo, .ajuda-indice a {
  position: relative;
  overflow: hidden;
}
.passo::after, .fb-card::after, .beneficio::after, .produto-card::after,
.faq-lista details::after, .ajuda-artigo::after, .ajuda-indice a::after {
  content: ""; position: absolute; top: -15%; left: -130%; width: 55%; height: 130%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .62) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 3;
}
.passo:hover::after, .fb-card:hover::after, .beneficio:hover::after, .produto-card:hover::after,
.faq-lista details:hover::after, .ajuda-artigo:hover::after, .ajuda-indice a:hover::after {
  animation: amLuz .9s ease;
}

/* ============================================================
   HERO — selos (Escolhido a dedo / Pedido no WhatsApp / Novidades)
   ============================================================ */
.selo {
  cursor: default; border-radius: 999px; padding: 6px 12px 6px 6px; margin: -6px 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s, background .3s;
}
.selo .ic { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.selo:hover { transform: translateY(-4px); color: var(--principal-escuro); background: rgba(169,123,68,.09); }
.selo:hover .ic {
  background: var(--acento); color: #fff;
  transform: scale(1.18) rotate(-10deg);
  box-shadow: 0 8px 20px rgba(169, 123, 68, .45);
}
/* entrada escalonada dos selos */
.hero-texto.in-view .selo { animation: amSurgir .6s both; }
.hero-texto.in-view .selo:nth-child(1) { animation-delay: .45s; }
.hero-texto.in-view .selo:nth-child(2) { animation-delay: .58s; }
.hero-texto.in-view .selo:nth-child(3) { animation-delay: .71s; }

/* ============================================================
   BENEFÍCIOS (Entrega / PIX / Atendimento humano)
   ============================================================ */
.beneficio {
  border-radius: 16px; cursor: default;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, box-shadow .35s;
}
.beneficio .ic { transition: transform .38s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.beneficio h4 { transition: color .3s; }
.beneficio:hover {
  transform: translateY(-6px);
  background: var(--surface-2);
  box-shadow: 0 14px 30px rgba(169, 123, 68, .18);
}
.beneficio:hover .ic {
  background: var(--acento); color: #fff;
  transform: scale(1.14) translateY(-3px);
  box-shadow: 0 10px 22px rgba(169, 123, 68, .45);
}
.beneficio:hover h4 { color: var(--acento); }
.beneficio:hover + .beneficio::before, .beneficio:hover::before { opacity: 0; }
.beneficio::before { transition: opacity .3s; }
/* entrada escalonada */
.beneficios.in-view .beneficio { animation: amSurgir .65s both; }
.beneficios.in-view .beneficio:nth-child(1) { animation-delay: .05s; }
.beneficios.in-view .beneficio:nth-child(2) { animation-delay: .17s; }
.beneficios.in-view .beneficio:nth-child(3) { animation-delay: .29s; }
.beneficios.in-view .beneficio:nth-child(4) { animation-delay: .41s; }

/* ============================================================
   COMO COMPRAR — cada elemento entra separado e reage ao mouse
   ============================================================ */
.passo { cursor: default; transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s, background .38s; }
.passo-ic { transition: transform .4s cubic-bezier(.2,.7,.2,1), background .32s, color .32s, box-shadow .32s; }
.passo-num { transition: color .32s, transform .32s; }
.passo h3 { transition: color .3s; }
.passo p { transition: color .3s; }

.passo:hover {
  transform: translateY(-10px);
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: 0 22px 44px rgba(169, 123, 68, .22);
}
.passo:hover .passo-ic {
  background: var(--acento); color: #fff;
  transform: scale(1.16) rotate(-8deg);
  box-shadow: 0 12px 26px rgba(169, 123, 68, .5);
}
.passo:hover .passo-num { color: var(--acento); transform: scale(1.12); }
.passo:hover h3 { color: var(--acento); }
.passo:hover p { color: var(--texto); }

/* entrada: número → ícone → título → texto */
.passo.in-view .passo-num { animation: amSurgir .5s both .05s; }
.passo.in-view .passo-ic  { animation: amSurgirIc .6s both .15s; }
.passo.in-view h3         { animation: amSurgir .55s both .3s; }
.passo.in-view p          { animation: amSurgir .55s both .42s; }

/* ============================================================
   FEEDBACKS — "O que dizem sobre a Amora"
   ============================================================ */
.fb-card { cursor: default; border: 1.5px solid transparent; transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s, border-color .3s, background .38s; }
.fb-stars { transition: transform .3s, letter-spacing .3s; transform-origin: left center; }
.fb-avatar { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s; }
.fb-card blockquote { transition: color .3s; }

.fb-card:hover {
  transform: translateY(-9px);
  background: linear-gradient(165deg, var(--surface) 0%, #fbf3e8 100%);
  border-color: rgba(169, 123, 68, .35);
  box-shadow: 0 22px 44px rgba(169, 123, 68, .2);
}
.fb-card:hover .fb-stars { transform: scale(1.06); letter-spacing: 5px; }
.fb-card:hover .fb-avatar {
  background: var(--acento);
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 10px 22px rgba(169, 123, 68, .45);
}
.fb-card:hover blockquote { color: var(--principal-escuro); }

/* entrada: estrelas → citação → autor */
.fb-card.in-view .fb-stars   { animation: amSurgir .5s both .05s; }
.fb-card.in-view blockquote  { animation: amSurgir .6s both .18s; }
.fb-card.in-view .fb-autor   { animation: amSurgirLado .6s both .34s; }
/* brilho sutil e contínuo nas estrelas */
.fb-card.in-view .fb-stars { text-shadow: 0 0 0 transparent; }
.fb-card:hover .fb-stars { text-shadow: 0 2px 10px rgba(169, 123, 68, .5); }

/* ============================================================
   FAQ — perguntas frequentes
   ============================================================ */
.faq-lista details {
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s, box-shadow .3s;
}
.faq-lista summary { transition: color .3s; }
.faq-lista summary::after { transition: transform .3s, color .3s, opacity .3s; }
.faq-lista details:hover {
  transform: translateX(5px);
  border-color: var(--acento);
  background: linear-gradient(100deg, var(--surface) 0%, #fbf3e8 100%);
  box-shadow: 0 12px 26px rgba(169, 123, 68, .16);
}
.faq-lista details:hover summary { color: var(--acento); }
.faq-lista details:hover summary::after { transform: scale(1.25) rotate(90deg); }
.faq-lista details[open]:hover summary::after { transform: scale(1.25) rotate(45deg); }
.faq-lista details[open] { border-color: var(--acento); box-shadow: 0 10px 24px rgba(169, 123, 68, .14); }
.faq-lista details[open] p { animation: amSurgir .4s both; }
/* entrada escalonada das perguntas */
.faq-lista.in-view details { animation: amSurgirLado .55s both; }
.faq-lista.in-view details:nth-child(1) { animation-delay: .05s; }
.faq-lista.in-view details:nth-child(2) { animation-delay: .14s; }
.faq-lista.in-view details:nth-child(3) { animation-delay: .23s; }
.faq-lista.in-view details:nth-child(4) { animation-delay: .32s; }
.faq-lista.in-view details:nth-child(5) { animation-delay: .41s; }

/* ============================================================
   CARDS DE PRODUTO — brilho + reação ao mouse
   ============================================================ */
.produto-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s; border: 1.5px solid transparent; }
.produto-card:hover { border-color: rgba(169, 123, 68, .3); box-shadow: 0 22px 44px rgba(169, 123, 68, .2); }
.produto-corpo h3 { transition: color .28s; }
.produto-card:hover .produto-corpo h3 { color: var(--acento); }
.produto-corpo .preco { transition: transform .28s, color .28s; transform-origin: left center; }
.produto-card:hover .produto-corpo .preco { transform: scale(1.05); color: var(--acento); }
.fav-btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.fav-btn:hover { transform: scale(1.18) rotate(-8deg); background: #fff; color: var(--acento); }
.produto-card .add { transition: transform .25s, background .25s, box-shadow .25s, letter-spacing .25s; }
.produto-card:hover .add { box-shadow: 0 10px 24px rgba(74, 62, 52, .28); }

/* ============================================================
   BOTÕES — leve brilho ao passar o mouse
   ============================================================ */
.btn-principal { position: relative; overflow: hidden; }
.btn-principal::after {
  content: ""; position: absolute; top: -20%; left: -140%; width: 55%; height: 140%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.btn-principal:hover::after { animation: amLuz .8s ease; }

/* ============================================================
   PÁGINA DE AJUDA — cards e índice
   ============================================================ */
.ajuda-indice a { transition: transform .28s, border-color .28s, color .28s, background .28s, box-shadow .28s; }
.ajuda-indice a:hover { transform: translateY(-4px); background: var(--surface-2); box-shadow: 0 10px 22px rgba(169, 123, 68, .2); }
.ajuda-indice a:hover .icon { transform: scale(1.15); }
.ajuda-indice .icon { transition: transform .3s; }
.ajuda-artigo { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s; }
.ajuda-artigo:hover { transform: translateY(-4px); border-color: rgba(169, 123, 68, .35); box-shadow: 0 18px 38px rgba(169, 123, 68, .16); }
.ajuda-ic { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.ajuda-artigo:hover .ajuda-ic { background: var(--acento); color: #fff; transform: scale(1.1) rotate(-7deg); box-shadow: 0 10px 24px rgba(169, 123, 68, .45); }

/* ============================================================
   Títulos de seção — sublinhado dourado que cresce
   ============================================================ */
.sec-head h2 { position: relative; display: inline-block; }
.sec-head h2::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--acento), transparent);
  border-radius: 3px; transition: width .8s cubic-bezier(.2,.7,.2,1) .25s;
}
.sec-head.in-view h2::after { width: 72px; }

/* ============================================================
   Ícones do rodapé e redes — reação ao mouse
   ============================================================ */
.social-btn { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s, box-shadow .3s; }
.social-btn:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px rgba(74, 62, 52, .3); }
.pay-badge { transition: transform .28s, color .28s; }
.pay-badge:hover { transform: translateY(-3px); color: var(--principal); }
.fcol a { transition: color .25s, transform .25s; }
.fcol a:hover { transform: translateX(4px); }
.whats-float { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s; }
.whats-float:hover { transform: scale(1.12) rotate(6deg); box-shadow: 0 16px 34px rgba(74, 62, 52, .4); }

/* ============================================================
   Acessibilidade — respeita "reduzir movimento"
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .passo, .fb-card, .beneficio, .produto-card, .faq-lista details, .selo,
  .ajuda-artigo, .ajuda-indice a, .social-btn, .whats-float { transition: none !important; }
  .passo::after, .fb-card::after, .beneficio::after, .produto-card::after,
  .faq-lista details::after, .ajuda-artigo::after, .ajuda-indice a::after,
  .btn-principal::after { display: none !important; }
  .hero-texto.in-view .selo, .beneficios.in-view .beneficio,
  .passo.in-view .passo-num, .passo.in-view .passo-ic, .passo.in-view h3, .passo.in-view p,
  .fb-card.in-view .fb-stars, .fb-card.in-view blockquote, .fb-card.in-view .fb-autor,
  .faq-lista.in-view details, .faq-lista details[open] p { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sec-head h2::after { transition: none; }
}