/* ==========================================================================
   MOVIMENTO — cada tipo de elemento tem a sua própria entrada:

   Hero (carregamento, CSS puro)
     header ......... desce do topo
     nome de fundo .. sai do desfoque e assenta (+ parallax leve ao rolar)
     título ......... é "escrito" da esquerda p/ direita; "sem dor" acende
     frase .......... sai do desfoque
     foto ........... sobe e assenta (sem fade: é o LCP)
     chips .......... surgem com mola e ficam flutuando

   Ao rolar (.reveal / .reveal-group > .reveal-item, disparado pelo JS)
     --title  ....... sobe de dentro de uma máscara
     --text   ....... sai do desfoque
     --action ....... sobe
     --list   ....... desliza da esquerda (+ ícone de check se desenha)
     --wipe   ....... cortina de baixo p/ cima (cards de serviço, foto zoom-out)
     --zoom   ....... cresce levemente (cards de atendimento, ícone se desenha)
     --from-left / --from-right / --from-left-media ... entram pelas laterais (depoimentos)
     --rise  ........ sobe e cresce (grupos e cards dos planos)
     --slide  ....... desliza da direita (FAQ)
     --pop    ....... aproxima com leve desfoque (título "Tire dúvidas", plano "Mais escolhido")
     --wipe-right ... cortina da esquerda p/ direita (foto do Sobre)
     .reveal--fade .......... só opacidade (rodapé)

   Sem JS ou com "reduzir movimento": nada some, nada se move.
   ========================================================================== */

/* ---------- Ao rolar ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal,
  .reveal-group > .reveal-item {
    opacity: var(--from-opacity, 0);
    transform: var(--from-transform, translateY(var(--reveal-y, var(--reveal-y-text))));
    clip-path: var(--from-clip, none);
    filter: var(--from-filter, none);
    transition-property: opacity, transform, clip-path, filter;
    transition-duration: var(--reveal-dur, var(--reveal-dur-block));
    transition-timing-function: var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal.is-visible,
  .reveal-group.is-visible > .reveal-item {
    opacity: 1;
    transform: none;
    clip-path: var(--to-clip, none);
    filter: none;
  }

  /* Depois de assentar, o reveal sai de cena para não atrasar hover/active */
  .reveal.is-done,
  .reveal-group.is-done > .reveal-item { transition: none; }

  /* Detalhes internos que acompanham o reveal */
  .services__grid:not(.is-visible) .service__bg img { transform: scale(1.18); }
  .about__media:not(.is-visible) img { transform: scale(1.14); }
  .care__grid:not(.is-visible) .care__icon,
  .about__credentials:not(.is-visible) svg { stroke-dashoffset: 100; }
}

/* Papéis (cada um com o seu movimento) */
.reveal-item--title {
  --reveal-dur: var(--reveal-dur-title);
  --reveal-delay: 0ms;
  --from-opacity: 1;
  --from-transform: translateY(0.45em);
  --from-clip: inset(-0.3em -0.3em 100% -0.3em);
  --to-clip: inset(-0.3em);
}
.reveal-item--text {
  --reveal-dur: var(--reveal-dur-text);
  --reveal-delay: var(--reveal-step);
  --from-transform: translateY(8px);
  --from-filter: blur(6px);
}
.reveal-item--action { --reveal-y: 12px; --reveal-dur: 720ms; --reveal-delay: calc(var(--reveal-step) * 2); }
.reveal-item--list   { --reveal-dur: 750ms; --from-transform: translateX(-18px); }
.reveal-item--wipe {
  --reveal-dur: 1100ms;
  --from-opacity: 1;
  --from-transform: none;
  --from-clip: inset(100% 0 0 0);
  --to-clip: inset(0);
}
.reveal-item--zoom   { --reveal-dur: 800ms; --from-transform: scale(0.94); }
.reveal-item--from-left { --reveal-dur: 820ms; --from-transform: translateX(-24px); }
.reveal-item--slide  { --reveal-dur: 700ms; --from-transform: translateX(28px); }
.reveal-item--pop    { --reveal-dur: 900ms; --from-transform: scale(0.9); --from-filter: blur(4px); }

.reveal-item--wipe-right {
  --reveal-dur: 1300ms;
  --from-opacity: 1;
  --from-transform: none;
  --from-clip: inset(0 100% 0 0);
  --to-clip: inset(0);
}
.reveal--from-right { --reveal-dur: 1000ms; --from-transform: translateX(48px) rotate(2deg); }
.reveal--from-left-media { --reveal-dur: 1000ms; --from-transform: translateX(-48px) rotate(-2deg); }
.reveal-item--rise { --reveal-dur: 900ms; --from-transform: translateY(40px) scale(0.96); }
.reveal--fade       { --reveal-dur: 900ms; --from-transform: none; }

/* Imagens e ícones que respondem ao reveal */
.service__bg img { transition: transform 1600ms var(--ease-out); }
.about__media img { transition: transform 1600ms var(--ease-out); }
.care__icon,
.about__credentials svg {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 350ms);
}

/* Cascata em grades: o atraso vai no <li> e reinicia a cada linha */
.services__grid > li:nth-child(2),
.care__grid > li:nth-child(2),
.about__credentials > li:nth-child(2),
.accordion > details:nth-child(2) { --reveal-delay: var(--reveal-step); }
.services__grid > li:nth-child(3),
.care__grid > li:nth-child(3),
.about__credentials > li:nth-child(3),
.accordion > details:nth-child(3) { --reveal-delay: calc(var(--reveal-step) * 2); }
.services__grid > li:nth-child(4),
.care__grid > li:nth-child(4),
.accordion > details:nth-child(4) { --reveal-delay: calc(var(--reveal-step) * 3); }
.accordion > details:nth-child(5) { --reveal-delay: calc(var(--reveal-step) * 4); }
.accordion > details:nth-child(6) { --reveal-delay: calc(var(--reveal-step) * 5); }
.accordion > details:nth-child(7) { --reveal-delay: calc(var(--reveal-step) * 6); }
.accordion > details:nth-child(8) { --reveal-delay: calc(var(--reveal-step) * 7); }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .services__grid > li:nth-child(3),
  .care__grid > li:nth-child(3) { --reveal-delay: 0ms; }
  .services__grid > li:nth-child(4),
  .care__grid > li:nth-child(4) { --reveal-delay: var(--reveal-step); }
}

/* Depoimento: título, texto e botão entram em sequência pela esquerda */
.case__text > :nth-child(2) { --reveal-delay: calc(var(--reveal-step) * 1); }
.case__text > :nth-child(3) { --reveal-delay: calc(var(--reveal-step) * 2); }
.case__text > :nth-child(4) { --reveal-delay: calc(var(--reveal-step) * 3); }
.case__text > :nth-child(5) { --reveal-delay: calc(var(--reveal-step) * 4); }
.case__text > :nth-child(6) { --reveal-delay: calc(var(--reveal-step) * 5); }
.case__media { --reveal-delay: calc(var(--reveal-step) * 2); }

/* ---------- Carregamento (hero + header) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: header-drop 800ms var(--ease-out) 80ms backwards; }

  .hero__name {
    animation: name-in 1600ms var(--ease-out) 100ms backwards;
  }

  .hero__title {
    animation: title-write 1100ms cubic-bezier(0.65, 0, 0.35, 1) 250ms backwards;
  }
  .hero__title .hl {
    animation: glow-in 900ms var(--ease-out) 1150ms backwards;
  }

  .hero__lead {
    animation: blur-in 900ms var(--ease-out) 700ms backwards;
  }

  .hero__actions > * {
    animation: rise-in 720ms var(--ease-out) backwards;
  }
  .hero__actions > :nth-child(1) { animation-delay: 850ms; }
  .hero__actions > :nth-child(2) { animation-delay: 950ms; }

  /* foto (LCP): só sobe e assenta, sem fade */
  .hero__photo {
    animation: photo-rise 1300ms var(--ease-out) 150ms backwards;
  }

  /* chips: surgem com mola e depois flutuam devagar */
  .hero__chips li {
    animation:
      chip-pop 800ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--chip-delay) backwards,
      chip-float 6s ease-in-out calc(var(--chip-delay) + 800ms) infinite;
  }
  .hero__chips li:nth-child(1) { --chip-delay: 1300ms; }
  .hero__chips li:nth-child(2) { --chip-delay: 1500ms; animation-duration: 800ms, 7s; }

  /* Acordeão: abre e fecha deslizando (navegadores com ::details-content) */
  :root { interpolate-size: allow-keywords; }
  .accordion details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 420ms var(--ease-out), content-visibility 420ms allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; }

  /* Parallax leve do nome + barra de progresso (scroll-driven, sem JS) */
  @supports (animation-timeline: scroll()) {
    .hero__name {
      animation:
        name-in 1600ms var(--ease-out) 100ms backwards,
        name-drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .scroll-progress {
      display: block;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

/* ---------- Keyframes ---------- */
@keyframes header-drop { from { translate: 0 -100%; } }
@keyframes name-in     { from { opacity: 0; filter: blur(14px); transform: scale(1.06); } }
@keyframes name-drift  { to { translate: 0 18vh; } }
@keyframes title-write {
  from { clip-path: inset(-0.3em 100% -0.3em -0.3em); transform: translateX(-10px); }
  to   { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); transform: none; }
}
@keyframes glow-in     { from { color: var(--text); text-shadow: 0 0 0 transparent; } }
@keyframes blur-in     { from { opacity: 0; filter: blur(8px); } }
@keyframes rise-in     { from { opacity: 0; transform: translateY(14px); } }
@keyframes photo-rise  { from { transform: translateY(48px) scale(0.97); } }
@keyframes chip-pop    { from { opacity: 0; scale: 0.75; } }
@keyframes chip-float  { 50% { translate: 0 -8px; } }
@keyframes progress    { from { scale: 0 1; } }

/* Barra de progresso de leitura (só aparece onde scroll-driven é suportado) */
.scroll-progress {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-header) + 1);
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Celular: entradas laterais viram entradas de baixo (não criam rolagem horizontal) */
@media (max-width: 767.98px) {
  .reveal--from-right,
  .reveal--from-left-media { --from-transform: translateY(32px); }
  .reveal-item--slide,
  .reveal-item--from-left { --from-transform: translateY(14px); }
  .reveal-item--list { --from-transform: translateY(12px); }
}

/* ==========================================================================
   PLANOS DE TRATAMENTO
   - cards: sobem em sequência; plano 5 sessões "chega" com leve zoom e desfoque
   - preço antigo: o risco é desenhado da esquerda p/ direita (explica "de → por")
   - selo "Mais escolhido": aparece depois do card; o destaque verde pulsa 2×
   ========================================================================== */
.planos__grid > .reveal-item--rise:nth-child(2) { --reveal-delay: calc(var(--reveal-step) * 1); }
.planos__grid > .reveal-item--rise:nth-child(3) { --reveal-delay: calc(var(--reveal-step) * 2); }
.plans > li:nth-child(2) { --reveal-delay: 90ms; }
.plans > li:nth-child(3) { --reveal-delay: 180ms; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .plans:not(.is-visible) .plan__old s::after { transform: scaleX(0); }
  .plans:not(.is-visible) .plan__tag { opacity: 0; scale: 0.9; }
  .plan__tag { transition: opacity 400ms var(--ease-out) 700ms, scale 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms; }
  .plans.is-visible .plan--featured { animation: featured-pulse 1.8s var(--ease-out) 1.1s 2 backwards; }
}
@keyframes featured-pulse {
  0%   { box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ==========================================================================
   CELULAR — chamada para o clique: anel que se expande a partir do botão
   (mesma ideia do pulso do plano "Mais escolhido"). Só "Planos de tratamento"
   (hero) e "Tire dúvidas comigo". Pausa entre os pulsos; sem movimento se o
   usuário pediu menos animação.
   ========================================================================== */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .hero__actions .btn--primary,
  .contact__btn { position: relative; }
  .hero__actions .btn--primary::after,
  .contact__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
  }
  .hero__actions .btn--primary::after { animation: cta-ring 3.2s var(--ease-out) 2.6s infinite; }
  .contact__inner.is-visible .contact__btn::after { animation: cta-ring 3.2s var(--ease-out) 1.2s infinite; }
}
@keyframes cta-ring {
  0%   { inset: 0;     opacity: 0.75; }
  42%  { inset: -10px; opacity: 0; }
  100% { inset: -10px; opacity: 0; }
}

/* Celular — seta da sanfona dos planos "balança" para baixo enquanto o grupo está fechado (convida ao toque).
   Usa a propriedade `translate`, para não brigar com o `transform: rotate` da seta aberta. */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .planos__grid.is-accordion .pgroup:not(.is-open) .pgroup__chev { animation: chev-nudge 1.6s var(--ease-out) infinite; }
}
@keyframes chev-nudge {
  0%, 55%, 100% { translate: 0 0; }
  20% { translate: 0 5px; }
  38% { translate: 0 1px; }
}