/* Animações das telas do diagnóstico. Só apresentação: nenhuma regra muda conteúdo ou layout.
   Ficam fora da impressão e do relatório exportado (que usa apenas style.css) e são desligadas
   para quem configurou o sistema para reduzir movimento. O estado "a revelar" (.reveal) só existe
   quando animations.js adiciona .anim-ready ao <html>; sem JavaScript tudo aparece normalmente. */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes diag-fade-in { from { opacity: 0 } to { opacity: 1 } }
  @keyframes diag-fade-up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
  @keyframes diag-slide-in { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
  @keyframes diag-scale-in { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: none } }
  @keyframes diag-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
  @keyframes diag-orbit { from { transform: rotate(25deg) } to { transform: rotate(385deg) } }
  @keyframes diag-pop { 0% { transform: scale(1) } 40% { transform: scale(1.22) } 100% { transform: scale(1) } }
  @keyframes diag-ready { 0% { transform: scale(1) } 45% { transform: scale(1.05) } 100% { transform: scale(1) } }
  @keyframes diag-bounce { 0%, 100% { transform: translateY(0) } 35% { transform: translateY(-6px) } 65% { transform: translateY(1px) } }
  @keyframes diag-wiggle { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-9deg) } 75% { transform: rotate(9deg) } }
  @keyframes diag-ring { 0% { box-shadow: 0 0 0 0 rgba(112, 222, 192, .6) } 75%, 100% { box-shadow: 0 0 0 14px rgba(112, 222, 192, 0) } }
  @keyframes diag-shine { from { transform: translateX(-120%) skewX(-18deg) } to { transform: translateX(420%) skewX(-18deg) } }
  @keyframes diag-toast { from { opacity: 0; translate: 0 14px } to { opacity: 1; translate: 0 0 } }

  /* Toda troca de tela entra com um fade suave */
  #main > * { animation: diag-fade-in .35s ease both; }

  /* Microinterações gerais */
  .btn { transition: transform .18s ease, filter .18s ease, box-shadow .2s ease; }
  .btn:hover:not(:disabled) { transform: translateY(-2px); }
  .btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
  #toast.visible { animation: diag-toast .35s cubic-bezier(.2, .7, .2, 1); }

  /* Revelação ao rolar: animations.js marca os blocos com .reveal e, ao entrarem na tela, .is-visible.
     A duração usa fill-mode backwards para não travar o transform dos efeitos de hover. */
  .anim-ready .reveal { opacity: 0; }
  .anim-ready .reveal.is-visible {
    opacity: 1;
    animation: diag-fade-up .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms) backwards;
  }

  /* ---------- Início ---------- */
  .hero h1, .hero-inner > div > p, .hero .btn-row { animation: diag-fade-up .75s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-inner > div > p { animation-delay: .12s; }
  .hero .btn-row { animation-delay: .24s; }
  .hero .small { animation: diag-fade-in .8s ease .45s both; }
  .hero-art > img { animation: diag-scale-in .9s cubic-bezier(.2, .7, .2, 1) .1s both, diag-float 7s ease-in-out 1.1s infinite; }
  .hero-art::after { animation: diag-orbit 60s linear infinite; }

  /* Anel pulsando no botão de começar */
  .hero .btn-row .btn { position: relative; }
  .hero .btn-row .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: diag-ring 2.6s ease-out 1.4s infinite;
  }

  .home-dimension { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .home-dimension:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(18, 60, 64, .1); }
  .home-dimension:hover .dimension-icon { animation: diag-wiggle .5s ease; }

  .gallery-card { transition: transform .3s ease, box-shadow .3s ease; }
  .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(18, 60, 64, .12); }
  .gallery-card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .gallery-card:hover img { transform: scale(1.05); }

  /* ---------- Orientações, revisão e pausa entre dimensões ---------- */
  .center-flow > * { animation: diag-fade-up .6s cubic-bezier(.2, .7, .2, 1) both; }
  .center-flow > *:nth-child(2) { animation-delay: .08s; }
  .center-flow > *:nth-child(3) { animation-delay: .16s; }
  .center-flow > *:nth-child(4) { animation-delay: .24s; }
  .center-flow > *:nth-child(n+5) { animation-delay: .32s; }
  .form-panel form > * { animation: diag-fade-up .5s cubic-bezier(.2, .7, .2, 1) both; }
  .form-panel form > *:nth-child(1) { animation-delay: .2s; }
  .form-panel form > *:nth-child(2) { animation-delay: .26s; }
  .form-panel form > *:nth-child(3) { animation-delay: .32s; }
  .form-panel form > *:nth-child(4) { animation-delay: .38s; }
  .form-panel form > *:nth-child(n+5) { animation-delay: .44s; }
  .chapter-pause h1 { animation: diag-scale-in .6s cubic-bezier(.3, 1.4, .5, 1) .1s both; }

  /* ---------- Perguntas ---------- */
  .interactive-flow .options > .option { animation: diag-slide-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .interactive-flow .options > .option:nth-child(2) { animation-delay: .05s; }
  .interactive-flow .options > .option:nth-child(3) { animation-delay: .1s; }
  .interactive-flow .options > .option:nth-child(4) { animation-delay: .15s; }
  .interactive-flow .options > .option:nth-child(5) { animation-delay: .2s; }
  .interactive-flow .option.unknown { animation: diag-fade-in .5s ease .3s backwards; }
  .option:has(input:checked) .answer-letter { animation: diag-pop .35s ease; }
  .current-dimension .dimension-icon { animation: diag-bounce .7s ease .15s; }
  .dimension-steps i.active { animation: diag-pop .45s ease .25s; }
  .chapter-link.current .circle { animation: diag-ring 2.4s ease-out .6s infinite; }
  .q-nav .btn.primary:not(:disabled) { animation: diag-ready .45s ease; }

  /* ---------- Resultado ---------- */
  .diagnostic-title { animation: diag-fade-up .6s cubic-bezier(.2, .7, .2, 1) .05s both; }
  .result-meta { animation: diag-fade-in .6s ease both; }
  .result-profile-detail.is-visible .profile-heading img { animation: diag-scale-in .8s cubic-bezier(.3, 1.4, .5, 1) .15s backwards; }
  .primary-profile { position: relative; overflow: hidden; }
  .primary-profile.is-visible::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(112, 222, 192, .22), transparent);
    animation: diag-shine 1.5s ease .5s both;
  }
  .result-hero.is-visible .result-score > strong { animation: diag-scale-in .7s cubic-bezier(.3, 1.4, .5, 1) .1s backwards; }

  /* Barras das dimensões crescem da esquerda, uma após a outra */
  .anim-ready .result-dimension .track i { transform: scaleX(0); transform-origin: left center; }
  .anim-ready .result-dimension.is-visible .track i {
    transform: scaleX(1);
    transition: transform 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms + .15s);
  }
  .result-dimension.is-visible .dimension-icon { animation: diag-pop .5s ease calc(var(--i, 0) * 90ms + .1s) backwards; }
  .result-priorities > li.is-visible .priority-number { animation: diag-pop .5s ease calc(var(--i, 0) * 120ms + .3s) backwards; }
}