/* ==========================================================================
   LEVLI Agência — camada de movimento e interação (carregada por todas as páginas, por último)
   Princípios: só opacity/transform/translate/rotate; nada contínuo fora da tela; tudo desligado com
   prefers-reduced-motion; o conteúdo nunca depende de animação para aparecer.
   A revelação ao rolar (data-reveal) está em styles.css §10 e main.js §4.
   ========================================================================== */

:root { --ease: cubic-bezier(.2, .7, .2, 1); interpolate-size: allow-keywords; }

/* Revelação das formas oficiais (só com .has-reveal, ou seja, sem "reduzir movimento") */
.has-reveal .final__art--arcos path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-reveal .final__art--arcos.is-in path { animation: mv-draw 1.4s var(--ease) both; }
.has-reveal .final__art--arcos.is-in path:nth-child(2) { animation-delay: .12s; }
.has-reveal .final__art--arcos.is-in path:nth-child(3) { animation-delay: .24s; }
.has-reveal .final__art--arcos.is-in path:nth-child(4) { animation-delay: .36s; }
@keyframes mv-draw { to { stroke-dashoffset: 0; } }

/* Foto da fundadora: a imagem se revela de baixo para cima, uma única vez */
.has-reveal .founder__photo[data-reveal].is-in img { animation: mv-clip 1.1s var(--ease) .1s backwards; }
@keyframes mv-clip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* Numeral das frentes: ganha presença tipográfica e entra com o bloco */
.hm-front__n { font-size: clamp(2.2rem, 4vw, 3rem); }
.has-reveal .hm-front__n { opacity: 0; }
.has-reveal .hm-front__n.is-in { opacity: 1; animation: mv-rise .8s var(--ease) backwards; }

@media (prefers-reduced-motion: no-preference) {

  /* ----- Abertura: entrada coordenada (CSS puro, sem esperar o JS) ----- */
  .hero__bar { animation: mv-fade 1s var(--ease) both; }
  .hero__copy > * { animation: mv-up 1s var(--ease) both; }
  .hero__copy > :nth-child(1) { animation-delay: .05s; }
  .hero__copy > :nth-child(2) { animation-delay: .15s; }
  .hero__copy > :nth-child(3) { animation-delay: .27s; }
  .hero__copy > :nth-child(4) { animation-delay: .38s; }
  .hero__copy > :nth-child(5) { animation-delay: .48s; }
  .hero .hero__art { animation: mv-up 1.1s var(--ease) .25s both; }
  .hero .band--dark { animation: mv-band 1.1s var(--ease) .45s both; }
  /* destaque da palavra-chave: sublinhado que se desenha */
  .hero__title em {
    background: linear-gradient(var(--rosa), var(--rosa)) 0 100% / 0 2px no-repeat;
    padding-bottom: .06em;
    animation: mv-underline 1s var(--ease) 1s forwards;
  }
  @keyframes mv-fade { from { opacity: 0; } }
  @keyframes mv-up { from { opacity: 0; translate: 0 26px; } }
  @keyframes mv-band { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  @keyframes mv-underline { to { background-size: 100% 2px; } }

  /* Formas da abertura da Home: arcos se desenham, estrela gira bem devagar */
  .hm-hero__arcos path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mv-draw 1.6s var(--ease) both; }
  .hm-hero__arcos path:nth-child(1) { animation-delay: .6s; }
  .hm-hero__arcos path:nth-child(2) { animation-delay: .72s; }
  .hm-hero__arcos path:nth-child(3) { animation-delay: .84s; }
  .hm-hero__arcos path:nth-child(4) { animation-delay: .96s; }
  /* O Brilho entra e flutua de leve; o manual só permite girar formas em múltiplos de 90°, então não há rotação contínua */
  .hm-hero__estrela { animation: mv-pop 1.2s var(--ease) .35s both; }
  .hm-hero__art.is-live .hm-hero__estrela svg, .hm-custom__art.is-live, .final__art--estrela.is-live { animation: mv-float 9s ease-in-out infinite alternate; }
  @keyframes mv-pop { from { opacity: 0; scale: .86; } }
  @keyframes mv-float { to { translate: 0 -8px; } }

  /* ----- Botões ----- */
  .btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease; }
  .btn:not(.is-pending):hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55); }
  .btn:not(.is-pending):active { transform: translateY(1px); box-shadow: none; }

  /* ----- Cards e ícones ----- */
  .hm-nav__item:hover { transform: translateY(-3px); }
  .hm-nav__ic, .hm-front__ic, .icard__ic, .chip__ic { transition: transform .4s var(--ease); }
  .hm-nav__item:hover .hm-nav__ic { transform: rotate(-10deg) scale(1.08); }
  .hm-front:hover .hm-front__ic { transform: rotate(-8deg) scale(1.05); }
  .icard:hover .icard__ic, .chip:hover .chip__ic { transform: rotate(-8deg) scale(1.08); }
  .icard, .chip { transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
  .icard:hover { transform: translateY(-3px); }
  .hm-card__title { transition: color .25s ease; }
  .hm-card:hover .hm-card__title { color: var(--vinho); }
  .hm-card__go svg { transition: transform .3s var(--ease); }
  .hm-card:hover .hm-card__go svg { transform: translateX(6px); }
  .footer__ig { transition: color .25s ease, border-color .25s ease; }
  .footer__ig:hover { border-color: var(--offwhite); }

  /* ----- FAQ: abertura e fechamento fluidos (progressivo: onde não há suporte, abre direto) ----- */
  .faq details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size .4s var(--ease), opacity .3s ease, content-visibility .4s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
  .faq summary { transition: color .2s ease; }
  .faq summary:hover { color: var(--cereja); }

  /* ----- Progresso de leitura ----- */
  .mv-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none;
    background: var(--cereja); box-shadow: 0 0 0 .5px rgba(231, 166, 180, .55);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: mv-progress linear both; animation-timeline: scroll(root);
  }
  @keyframes mv-progress { to { transform: scaleX(1); } }

  /* ----- Transição suave entre páginas (navegadores com View Transitions entre documentos) ----- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

/* ----- Composição editorial da Home: frentes pares espelham a grade em telas largas ----- */
@media (min-width: 1000px) {
  .hm-front--alt .hm-front__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .hm-front--alt .hm-front__head { order: 2; }
}

/* ----- Formas decorativas da abertura da Home ----- */
.hm-hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hm-hero__estrela { position: absolute; top: clamp(5.5rem, 12vw, 8rem); right: clamp(-1.5rem, 4vw, 6rem); width: clamp(4.5rem, 16vw, 14rem); }
.hm-hero__estrela svg { display: block; width: 100%; height: auto; }
.hm-hero__arcos { position: absolute; right: clamp(.5rem, 4vw, 4rem); bottom: 0; width: clamp(7rem, 20vw, 15rem); height: auto; opacity: .6; }
.hero__title, .hero__lead { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .mv-progress { display: none; }
}

/* Links de texto para outros serviços */
.mv-xlink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: var(--cereja); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-thickness .2s ease, color .2s ease; }
.mv-xlink:hover { text-decoration-thickness: 2px; color: var(--cereja); }
.plan--full .mv-xlink, .hero .mv-xlink, .final .mv-xlink { text-decoration-color: var(--rosa); }
.plan--full .mv-xlink:hover, .hero .mv-xlink:hover, .final .mv-xlink:hover { color: var(--rosa); }

/* Botão flutuante de WhatsApp (criado em main.js só quando o número está configurado) */
.wa-fab {
  position: fixed; z-index: 60; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55rem; min-width: 3.5rem; min-height: 3.5rem; padding: 0 1rem;
  justify-content: center; border-radius: 999px; text-decoration: none;
  background: var(--vinho); color: var(--offwhite); border: 2px solid var(--offwhite);
  box-shadow: 0 10px 26px -10px rgba(41, 41, 41, .65);
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; line-height: 1;
}
.wa-fab svg { width: 1.7rem; height: 1.7rem; flex: none; }
.wa-fab__t { display: none; }
.wa-fab:hover { background: var(--cereja); }
.wa-fab:focus-visible { outline: 3px solid var(--grafite); outline-offset: 3px; box-shadow: 0 0 0 5px var(--offwhite), 0 10px 26px -10px rgba(41, 41, 41, .65); }
@media (min-width: 640px) { .wa-fab { padding: 0 1.25rem 0 1.05rem; } .wa-fab__t { display: inline; } }
@media (prefers-reduced-motion: no-preference) {
  .wa-fab { animation: mv-fab .8s var(--ease) 1.4s both; transition: background-color .25s ease, transform .25s var(--ease); }
  .wa-fab:hover { transform: translateY(-3px); }
  .wa-fab:active { transform: translateY(0); }
  @keyframes mv-fab { from { opacity: 0; translate: 0 18px; scale: .9; } }
}
@media print { .wa-fab, .mv-progress { display: none; } }

/* Foto da fundadora em Arco (manual: "fotos em Arco ou recortadas por uma forma, uma por composição"); sem a malha de pontos */
.founder__frame img, .founder__frame::before { border-radius: 999px 999px 0 0; }
.founder__frame::after { display: none !important; }

/* Arcos da biblioteca nova são quadrados (colunas até a base): tamanhos ajustados para não invadir o texto */
.final__art--arcos { width: clamp(5rem, 14vw, 10rem); }
.pg-hero__arcos { width: clamp(5rem, 14vw, 10rem); opacity: .6; }