/* ==========================================================================
   styles.css | Landing page Michelle Demetrio
   --------------------------------------------------------------------------
   Com a migracao para Tailwind, este arquivo ficou pequeno. Ele guarda so o
   que o Tailwind nao resolve sozinho:

   1. Fontes locais (@font-face)
   2. Variaveis de cor da marca (espelham o tailwind.config do index.html)
   3. Estado inicial das animacoes de entrada (evita "piscada" antes do JS)
   4. Ajustes finos: accordion do FAQ, barra de rolagem, selecao de texto

   Os estilos de layout, cor e tipografia ficam nas classes utilitarias do
   index.html. Para mexer na aparencia, edite o HTML.
   ========================================================================== */


/* ==========================================================================
   1. FONTES LOCAIS
   Caminhos relativos a este arquivo. Em servidor Linux o nome do arquivo
   diferencia maiuscula de minuscula: confira se bate com a pasta /fonts.
   ========================================================================== */
@font-face {
  font-family: 'Anothers';
  src: url('fonts/ANOTHER_DISPLAY.OTF') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat/MONTSERRAT-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat/MONTSERRAT-MEDIUM.TTF') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat/MONTSERRAT-BOLD.TTF') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. TOKENS DA MARCA
   Mesmos valores do tailwind.config. Ficam aqui para uso em CSS puro.
   ========================================================================== */
:root {
  --color-cream: #F2EDE2;
  --color-white: #FFFFFF;
  --color-rose: #DBB49F;
  --color-terra: #C17F5E;
  --color-terra-dark: #A56748;
  --color-olive-light: #929B70;
  --color-olive: #6E7654;
  --color-forest: #4A5138;
  --color-blush: #EDE1D3;

  --header-h: 4.5rem;

  color-scheme: light only;
}

/* Evita a pagina "pular" para o lado quando um menu abre e trava o scroll */
html {
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  background: var(--color-cream);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A fonte Anothers tem um so peso: impede o navegador de criar negrito falso */
.font-display {
  font-synthesis-weight: none;
}

::selection {
  background: var(--color-rose);
  color: var(--color-forest);
}


/* ==========================================================================
   3. ANIMACAO DE ENTRADA
   O estado inicial so e aplicado quando ha JavaScript (classe .js no <html>),
   para que sem JS o conteudo apareca normalmente.
   ========================================================================== */
.js [data-reveal]:not([data-reveal-group]),
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-reveal]:not([data-reveal-group]).is-in,
.js [data-reveal-group] > .is-in {
  opacity: 1;
  transform: none;
}

/* Itens de uma mesma lista entram em cascata curta */
.js [data-reveal-group] > * {
  transition-delay: calc(var(--i, 0) * 70ms);
}


/* --- CTA flutuante: so aparece quando nenhum outro CTA esta na tela.
       Sem JavaScript, a barra fica sempre visivel. --- */
.js [data-floating-cta] {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}

.js [data-floating-cta].is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s;
}

@media (min-width: 1024px) {
  .js [data-floating-cta] {
    transform: translateY(calc(100% + 2rem));
  }
}


/* ==========================================================================
   4. AJUSTES FINOS
   ========================================================================== */

/* --- Accordion do FAQ: abre e fecha com transicao onde o navegador suporta.
       Em navegadores sem suporte, o <details> abre na hora (sem quebrar). --- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }
}

.faq-item summary::-webkit-details-marker { display: none; }

/* --- Moldura da foto enquanto o arquivo ainda nao existe (ver script.js) --- */
.media.is-empty img { display: none; }

.media.is-empty::after {
  content: attr(data-placeholder);
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-terra-dark);
}

/* --- Movimento reduzido: desliga transicoes e animacoes --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal]:not([data-reveal-group]),
  .js [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }
}