@import url("header.css");
@import url("hero.css");
@import url("sobre.css");
@import url("autora.css");
@import url("compra.css");
@import url("faq.css");
@import url("footer.css");

/* ========= PALETA ========= */
:root {
  --caramelo: #c48a56;     /* gradiente botão / destaque */
  --caramelo-claro: #e1b37a;
  --marrom: #735a52;       /* textos escuros de apoio */
  --nav-text: #4a3a2e;     /* menu */
  --bege-claro: #f2eae6;   /* fundo header */
  --bege-apoio: #eadcce;
  --titulo: #f0e4d4;       /* título do hero */
  --autor: #c48a56;        /* nome da autora */
  --paragrafo: #d8c3a7;    /* texto do hero */
  --botao-texto: #fff5e4;  /* texto do botão */
}

/* ========= RESET ========= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #0b0b0b; /* evita bordas brancas */
  overflow-x: hidden;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: var(--marrom);
  scroll-behavior: smooth;
}

/* ===================== REVEAL ON SCROLL ===================== */

/* estado inicial (invisível) */
[data-anim] {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    filter 0.8s ease;
  will-change: opacity, transform, filter;
}

/* direções */
[data-anim="left"] {
  transform: translateX(-40px);
}

[data-anim="right"] {
  transform: translateX(40px);
}

[data-anim="up"] {
  transform: translateY(40px);   /* vem de baixo pra cima */
}

[data-anim="down"] {
  transform: translateY(-40px);  /* vem de cima pra baixo, se quiser usar */
}

/* quando fica visível na tela */
[data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* permite atrasar com data-delay="200" (opcional) */
[data-anim].is-visible[data-delay] {
  transition-delay: var(--anim-delay, 0ms);
}

/* acessibilidade: se o usuário pedir menos animação, não anima */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}