/* ============================================================
   Scroll Motion & Hierarchical Reveal Choreography — Márcia Rodrigues
   Movimentos e apresentação em ritmo cinematográfico, lento e sereno
   
   TEMPO 1: Estruturas, Molduras, Cards, Arcos e Retratos entram com calma e amplitude
   TEMPO 2: Textos, Títulos, Parágrafos e Botões desabrocham pausadamente em seguida
   ============================================================ */

/* ------------------------------------------------------------
   TEMPO 1: Estruturas, Molduras, Cards, Arcos e Retratos (Ritmo Lento)
   ------------------------------------------------------------ */

.about-visual,
.about-copy,
.section-intro,
.path-card,
.care-heading,
.care-details,
.care-intro-block,
.formation-heading,
.formation-item,
.book-stage,
.book-copy,
.reflection blockquote,
.location-copy,
.location-office,
.faq > div:first-child,
.faq-list > details,
.contact-inner > div {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  filter: blur(6px);
  transition: opacity 2.2s cubic-bezier(0.12, 1, 0.28, 1),
              transform 2.2s cubic-bezier(0.12, 1, 0.28, 1),
              filter 1.8s cubic-bezier(0.12, 1, 0.28, 1);
  will-change: opacity, transform, filter;
}

/* Retratos e palcos visuais em arco (profundidade desacelerada) */
.about-visual,
.book-stage,
.hero-visual {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.91);
  filter: blur(7px);
  transition: opacity 2.5s cubic-bezier(0.12, 1, 0.28, 1),
              transform 2.5s cubic-bezier(0.12, 1, 0.28, 1),
              filter 2s cubic-bezier(0.12, 1, 0.28, 1);
  will-change: opacity, transform, filter;
}

/* Ornamentos botânicos */
.ornament {
  opacity: 0;
  transform: scale(0.75) rotate(-15deg);
  transition: opacity 2.6s ease 0.6s, transform 2.6s cubic-bezier(0.12, 1, 0.28, 1) 0.6s;
}

/* Estado Ativado do TEMPO 1 (Estrutura visível e assentada) */
.is-revealed,
.about-visual.is-revealed,
.about-copy.is-revealed,
.section-intro.is-revealed,
.path-card.is-revealed,
.care-heading.is-revealed,
.care-details.is-revealed,
.care-intro-block.is-revealed,
.formation-heading.is-revealed,
.formation-item.is-revealed,
.book-stage.is-revealed,
.book-copy.is-revealed,
.reflection blockquote.is-revealed,
.location-copy.is-revealed,
.location-office.is-revealed,
.faq > div:first-child.is-revealed,
.faq-list > details.is-revealed,
.contact-inner > div.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0px) !important;
}

.is-revealed .ornament,
.is-revealed.ornament {
  opacity: 0.55 !important;
  transform: scale(1) rotate(0deg) !important;
}

/* ------------------------------------------------------------
   TEMPO 2: Textos, Títulos, Parágrafos, Badges e Botões
   (Apresentação pausada e serena após o assentamento da estrutura)
   ------------------------------------------------------------ */

.about-copy h2,
.about-copy .lead,
.about-copy p,
.about-copy .credentials,
.about-copy .text-link,
.image-caption,
.path-content h3,
.path-content p,
.path-content .text-link,
.care-heading h2,
.care-heading p,
.care-heading .button,
.care-heading small,
.care-details .lead,
.care-list li,
.care-note,
.formation-heading h2,
.formation-heading p,
.formation-heading .text-link,
.formation-item .item-meta,
.formation-item h3,
.formation-item p,
.formation-item .icon,
.formation-item .item-action,
.book-copy h2,
.book-copy h3,
.book-copy .book-subtitle,
.book-copy p,
.book-copy .button,
.book-copy .book-credit,
.faq h2,
.faq p,
.faq-list summary,
.contact h2,
.contact p,
.contact .button,
.contact-instagram {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(4px);
  transition: opacity 1.9s cubic-bezier(0.12, 1, 0.28, 1),
              transform 1.9s cubic-bezier(0.12, 1, 0.28, 1),
              filter 1.6s cubic-bezier(0.12, 1, 0.28, 1);
}

/* Ativação completa de todos os textos quando o elemento ganha .is-revealed */
.is-revealed h1,
.is-revealed h2,
.is-revealed h3,
.is-revealed .lead,
.is-revealed p,
.is-revealed span,
.is-revealed a,
.is-revealed div,
.is-revealed li,
.is-revealed button,
.is-revealed svg,
.is-revealed strong,
.is-revealed small,
.is-revealed summary,
.is-revealed blockquote,
.is-revealed .item-meta,
.is-revealed .item-action,
.is-revealed .icon,
.is-revealed .image-caption,
.is-revealed .credentials,
.is-revealed .button,
.is-revealed .text-link {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: blur(0px) !important;
}

/* ------------------------------------------------------------
   DELAYS HIERÁRQUICOS (Intervalos espaçados e cadenciados)
   ------------------------------------------------------------ */

/* Seção Sobre */
.about-copy.is-revealed h2 { transition-delay: 0.4s; }
.about-copy.is-revealed .lead { transition-delay: 0.65s; }
.about-copy.is-revealed p:not(.lead) { transition-delay: 0.9s; }
.about-copy.is-revealed .credentials { transition-delay: 1.15s; }
.about-copy.is-revealed .text-link { transition-delay: 1.4s; }
.about-visual.is-revealed .image-caption { transition-delay: 0.75s; }

/* Caminhos de cuidado (3 Cards com cascata bem perceptível) */
.path-grid .path-card:nth-child(1) { transition-delay: 0.15s; }
.path-grid .path-card:nth-child(2) { transition-delay: 0.5s; }
.path-grid .path-card:nth-child(3) { transition-delay: 0.85s; }

.path-card.is-revealed .path-content h3 { transition-delay: 0.55s; }
.path-card.is-revealed .path-content p { transition-delay: 0.85s; }
.path-card.is-revealed .path-content .text-link { transition-delay: 1.15s; }

/* Seção Atendimento */
.care-heading.is-revealed h2 { transition-delay: 0.35s; }
.care-heading.is-revealed p { transition-delay: 0.6s; }
.care-heading.is-revealed .button { transition-delay: 0.85s; }
.care-heading.is-revealed small { transition-delay: 1.1s; }

.care-details.is-revealed .lead { transition-delay: 0.4s; }
.care-details.is-revealed .care-list li:nth-child(1) { transition-delay: 0.65s; }
.care-details.is-revealed .care-list li:nth-child(2) { transition-delay: 0.95s; }
.care-details.is-revealed .care-list li:nth-child(3) { transition-delay: 1.25s; }
.care-details.is-revealed .care-list li:nth-child(4) { transition-delay: 1.55s; }
.care-details.is-revealed .care-note { transition-delay: 1.8s; }

/* Seção Formação para psicólogas (Cuidar de quem também cuida) */
.formation-heading.is-revealed h2 { transition-delay: 0.35s; }
.formation-heading.is-revealed p { transition-delay: 0.65s; }
.formation-heading.is-revealed .text-link { transition-delay: 0.95s; }

.formation-list .formation-item:nth-child(1) { transition-delay: 0.25s; }
.formation-list .formation-item:nth-child(2) { transition-delay: 0.6s; }
.formation-list .formation-item:nth-child(3) { transition-delay: 0.95s; }

.formation-item.is-revealed .item-meta { transition-delay: 0.5s; }
.formation-item.is-revealed h3 { transition-delay: 0.75s; }
.formation-item.is-revealed p { transition-delay: 1s; }
.formation-item.is-revealed .icon { transition-delay: 0.85s; }
.formation-item.is-revealed .item-action { transition-delay: 1.15s; }

/* Seção Livro */
.book-stage.is-revealed { transition-delay: 0.2s; }
.book-copy.is-revealed h2 { transition-delay: 0.45s; }
.book-copy.is-revealed h3 { transition-delay: 0.7s; }
.book-copy.is-revealed .book-subtitle { transition-delay: 0.95s; }
.book-copy.is-revealed p:not(.book-subtitle) { transition-delay: 1.2s; }
.book-copy.is-revealed .button { transition-delay: 1.45s; }
.book-copy.is-revealed .book-credit { transition-delay: 1.7s; }

/* Seção FAQ */
.faq-list details:nth-child(1) { transition-delay: 0.15s; }
.faq-list details:nth-child(2) { transition-delay: 0.45s; }
.faq-list details:nth-child(3) { transition-delay: 0.75s; }
.faq-list details:nth-child(4) { transition-delay: 1.05s; }
.faq-list details:nth-child(5) { transition-delay: 1.35s; }

.faq-list details.is-revealed summary { transition-delay: 0.45s; }

/* Seção Contato */
.contact-inner > div.is-revealed h2 { transition-delay: 0.35s; }
.contact-inner > div.is-revealed p { transition-delay: 0.65s; }
.contact-inner > div.is-revealed .button { transition-delay: 0.95s; }
.contact-inner > div.is-revealed .contact-instagram { transition-delay: 1.25s; }

/* ------------------------------------------------------------
   HERO: Entrada Lenta, Fluida e Elegante ao Abrir a Página
   ------------------------------------------------------------ */
.hero-visual {
  opacity: 0;
  transform: translate3d(0, 55px, 0) scale(0.93);
  filter: blur(6px);
  animation: hero-reveal-visual 2.4s cubic-bezier(0.12, 1, 0.28, 1) 0.25s forwards;
}

.hero-copy {
  opacity: 0;
  transform: translate3d(0, 45px, 0);
  filter: blur(5px);
  animation: hero-reveal-copy 2.1s cubic-bezier(0.12, 1, 0.28, 1) 0.4s forwards;
}

.hero-copy h1 {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  filter: blur(4px);
  animation: hero-reveal-text 1.9s cubic-bezier(0.12, 1, 0.28, 1) 0.75s forwards;
}

.hero-copy p {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  filter: blur(3px);
  animation: hero-reveal-text 1.8s cubic-bezier(0.12, 1, 0.28, 1) 1.1s forwards;
}

.hero-copy .button {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: hero-reveal-text 1.7s cubic-bezier(0.12, 1, 0.28, 1) 1.4s forwards;
}

.hero-copy .hero-secondary {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  animation: hero-reveal-text 1.6s cubic-bezier(0.12, 1, 0.28, 1) 1.65s forwards;
}

.portrait-note {
  opacity: 0;
  transform: translate3d(-15px, 20px, 0);
  animation: hero-reveal-text 1.9s cubic-bezier(0.12, 1, 0.28, 1) 1.2s forwards;
}

@keyframes hero-reveal-visual {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes hero-reveal-copy {
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes hero-reveal-text {
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* ------------------------------------------------------------
   Interatividade e Hover nos Cards e Itens
   ------------------------------------------------------------ */
.path-card {
  transition: transform 0.5s cubic-bezier(0.12, 1, 0.28, 1),
              box-shadow 0.5s cubic-bezier(0.12, 1, 0.28, 1),
              opacity 2.2s cubic-bezier(0.12, 1, 0.28, 1),
              filter 1.8s cubic-bezier(0.12, 1, 0.28, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .path-card.is-revealed:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(53, 37, 57, 0.22);
  }
  .formation-item.is-revealed:hover {
    padding-left: 14px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
  }
  .care-list li.is-revealed:hover,
  .care-details.is-revealed .care-list li:hover {
    padding-left: 10px;
    background: rgba(116, 61, 119, 0.04);
  }
}

/* ------------------------------------------------------------
   Botão de Controle no Rodapé & Acessibilidade
   ------------------------------------------------------------ */
.motion-control {
  font: 11px var(--sans);
  color: var(--paper);
  background: transparent;
  border: 1px solid #94799a;
  border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.2s ease;
}
.motion-control:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--lilac);
}

html[data-scroll-motion="gentle"] * {
  transform: none !important;
  filter: none !important;
  transition: opacity 0.5s ease !important;
}

@media print {
  * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .motion-control {
    display: none;
  }
}
