/* ==========================================================================
   Movimento: ícones animados, revelação progressiva, enhancements de scroll
   Princípios: só transform/opacity · hover só com ponteiro real ·
   prefers-reduced-motion respeitado · sem JS, tudo visível.
   ========================================================================== */

@layer motion {
  /* ------------------------------------------------------------------
     Revelação progressiva
     Estado oculto só existe com .js + sem preferência por menos movimento.
     Animação (não transição) com fill "backwards": depois de pronta, o
     elemento volta ao estilo natural e o hover continua livre.
     ------------------------------------------------------------------ */
  @keyframes reveal-up {
    from { opacity: 0; translate: 0 1.6rem; }
  }
  @keyframes reveal-blur {
    from { opacity: 0; translate: 0 1.6rem; filter: blur(9px); }
  }
  @keyframes reveal-fade {
    from { opacity: 0; }
  }
  @keyframes reveal-scale {
    from { opacity: 0; scale: 0.94; translate: 0 1rem; }
  }
  @keyframes reveal-left {
    from { opacity: 0; translate: -2rem 0; }
  }
  @keyframes reveal-right {
    from { opacity: 0; translate: 2rem 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal]:not(.is-in) {
      opacity: 0;
    }
    [data-reveal].is-in {
      animation: reveal-up 0.95s var(--ease-out) backwards;
      animation-delay: calc(var(--d, 0) * 75ms);
    }
    [data-reveal="blur"].is-in { animation-name: reveal-blur; }
    [data-reveal="fade"].is-in { animation-name: reveal-fade; }
    [data-reveal="scale"].is-in { animation-name: reveal-scale; }
    [data-reveal="left"].is-in { animation-name: reveal-left; }
    [data-reveal="right"].is-in { animation-name: reveal-right; }

    /* Rede de segurança: se o JS falhar, nada fica escondido. */
    .reveal-fallback [data-reveal]:not(.is-in) {
      opacity: 1;
    }

    /* Entrada do hero: um único momento coreografado, sem depender de JS. */
    [data-hero] {
      animation: reveal-up 1.05s var(--ease-out) backwards;
      animation-delay: calc(90ms + var(--d, 0) * 95ms);
    }
    [data-hero="blur"] {
      animation-name: reveal-blur;
    }
  }

  /* ------------------------------------------------------------------
     Ícones animados
     Grade 64×64 · traço = --ico · acento = --ico-accent
     .d  = traço que desenha (pathLength=1)
     .fill = preenchimento de acento (pop) · .ink = traço sobre acento
     ------------------------------------------------------------------ */
  .ico {
    --ico-size: 3.5rem;
    inline-size: var(--ico-size);
    block-size: var(--ico-size);
    fill: none;
    stroke: var(--ico);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    flex: none;
  }
  .ico * {
    transform-box: fill-box;
    transform-origin: center;
  }
  .ico .acc { stroke: var(--ico-accent); }
  .ico .ink { stroke: var(--ico-ink, var(--forest-900)); }
  .ico .fill { fill: var(--ico-accent); stroke: none; }
  .ico .light { fill: var(--ico-accent); stroke: none; opacity: 0; }
  .ico .d { stroke-dasharray: 1; }
  .ico .d[style*="dasharray:none"] { stroke-dasharray: none; }

  /* Repouso das partes nomeadas */
  .ico--cards .c1 { rotate: -13deg; transform-origin: 50% 118%; }
  .ico--cards .c3 { rotate: 13deg; transform-origin: 50% 118%; }
  .ico--cards .c2 { transform-origin: 50% 118%; }
  .ico--crane .jib { transform-box: view-box; transform-origin: 24px 17px; }
  .ico--unlock .shackle { transform-box: view-box; transform-origin: 22px 29px; }
  .ico--gavel .gv { transform-box: view-box; transform-origin: 12px 45px; }

  /* Transições das partes (interruptíveis) */
  .ico--house :is(.door, .light, .roof),
  .ico--crane :is(.jib, .cable, .load),
  .ico--invest .coin,
  .ico--key :is(.keybody, .tag),
  .ico--cards :is(.c1, .c3),
  .ico--target :is(.arrow, .bull),
  .ico--unlock .shackle,
  .ico--wallet .coinin,
  .ico--piggy .coinin,
  .ico--coins .topcoin,
  .ico--donut .ring,
  .ico--pulse .fill,
  .ico--route .fill,
  .ico--roller :is(.drip, .handle) {
    transition: translate 0.45s var(--ease-out), scale 0.5s var(--ease-spring), rotate 0.55s var(--ease-spring), opacity 0.3s var(--ease-out);
  }

  @keyframes ico-draw {
    0% { stroke-dashoffset: 1; opacity: 0; }
    2% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }
  @keyframes ico-redraw {
    0% { stroke-dashoffset: 1; opacity: 0; }
    2% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }
  @keyframes ico-pop {
    from { opacity: 0; scale: 0.4; }
    to { opacity: 1; scale: 1; }
  }
  @keyframes bar-grow {
    from { scale: 1 0; }
    to { scale: 1 1; }
  }
  @keyframes dot-bounce {
    0%, 55%, 100% { translate: 0 0; }
    28% { translate: 0 -5px; }
  }
  @keyframes gavel-hit {
    0% { rotate: 0deg; }
    35% { rotate: -24deg; }
    62% { rotate: 7deg; }
    100% { rotate: 0deg; }
  }
  @keyframes coin-flip {
    0% { scale: 1 1; }
    50% { scale: 0.05 1; }
    100% { scale: 1 1; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal]:not(.is-in) .ico .d { stroke-dashoffset: 1; opacity: 0; }
    .js [data-reveal]:not(.is-in) .ico .fill { opacity: 0; scale: 0.4; }
    [data-reveal].is-in .ico .d {
      animation: ico-draw 0.85s var(--ease-out) both;
      animation-delay: calc(160ms + var(--i, 0) * 80ms + var(--d, 0) * 75ms);
    }
    [data-reveal].is-in .ico .fill {
      animation: ico-pop 0.6s var(--ease-spring) both;
      animation-delay: calc(480ms + var(--i, 0) * 40ms + var(--d, 0) * 75ms);
    }
    [data-reveal].is-in .ico .bar {
      transform-origin: 50% 100%;
      animation: ico-draw 0.85s var(--ease-out) both, bar-grow 0.7s var(--ease-spring) both;
      animation-delay: calc(160ms + var(--b, 0) * 90ms + var(--d, 0) * 75ms);
    }
    /* Ícones fora de um bloco [data-reveal] (ex.: dentro do dialog) ficam estáticos. */

    /* "Ao vivo": o ícone do passo ativo anima enquanto o passo está em foco */
    .is-active .ico--chat .dot {
      animation: dot-bounce 1s var(--ease-in-out) infinite;
      animation-delay: calc(var(--k, 0) * 150ms);
    }
    .is-active .ico--target .bull { animation: ico-pop 0.8s var(--ease-spring) both; }
    .is-active .ico--unlock .shackle { rotate: -32deg; translate: -1px -3px; }
    .is-active .ico--cards .c1 { rotate: -21deg; }
    .is-active .ico--cards .c3 { rotate: 21deg; }
  }

  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--house .door { scale: 0.2 1; transform-origin: 0 50%; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--house .light { opacity: 1; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--house .roof { translate: 0 -2.5px; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--crane .jib { rotate: 3.2deg; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--crane .cable { scale: 1 1.4; transform-origin: 50% 0; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--crane .load { translate: 0 6px; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--invest .coin { translate: 0 -5px; animation: coin-flip 0.7s var(--ease-in-out); }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--chart .bar {
      animation: bar-grow 0.6s var(--ease-spring) both;
      animation-delay: calc(var(--b, 0) * 70ms);
      transform-origin: 50% 100%;
    }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--key .keybody { rotate: -16deg; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--key .tag { rotate: 24deg; translate: 3px 6px; opacity: 0.4; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--chat .dot {
      animation: dot-bounce 0.9s var(--ease-in-out) infinite;
      animation-delay: calc(var(--k, 0) * 140ms);
    }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--cards .c1 { rotate: -22deg; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--cards .c3 { rotate: 22deg; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--target .arrow { translate: 2.5px -2.5px; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--target .bull { scale: 1.5; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--unlock .shackle { rotate: -32deg; translate: -1px -3px; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--percent .strike { animation: ico-redraw 0.6s var(--ease-out) both; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--wallet .coinin { translate: 0 9px; opacity: 0; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--piggy .coinin { translate: 0 8px; opacity: 0; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--gavel .gv { animation: gavel-hit 0.7s var(--ease-in-out); }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--coins .topcoin { translate: 0 -6px; rotate: 8deg; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--donut .ring { rotate: 120deg; }

    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--roller .drip { scale: 1 1.7; transform-origin: 50% 0; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--roller .handle { translate: 3px 0; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--pulse .fill { scale: 1.35; }
    [data-ico-host]:is(:hover, :focus-visible, :focus-within) .ico--route .fill { scale: 1.4; }
  }

  /* ------------------------------------------------------------------
     Tique animado (listas de verificação)
     ------------------------------------------------------------------ */
  .tick {
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tick circle {
    fill: var(--gold-500);
    stroke: none;
  }
  .tick path {
    stroke: var(--forest-900);
    stroke-dasharray: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal]:not(.is-in) .tick circle { scale: 0.4; opacity: 0; }
    .js [data-reveal]:not(.is-in) .tick path { stroke-dashoffset: 1; opacity: 0; }
    [data-reveal].is-in .tick circle {
      transform-box: fill-box;
      transform-origin: center;
      animation: ico-pop 0.55s var(--ease-spring) both;
      animation-delay: calc(220ms + var(--d, 0) * 75ms);
    }
    [data-reveal].is-in .tick path {
      animation: ico-draw 0.6s var(--ease-out) both;
      animation-delay: calc(420ms + var(--d, 0) * 75ms);
    }
  }

  /* ------------------------------------------------------------------
     Enhancements guiados por scroll (Chrome/Edge/Safari 26+).
     Decorativos: sem suporte, simplesmente não aparecem.
     ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
      @keyframes progress-grow {
        to { transform: scaleX(1); }
      }
      .progress {
        animation: progress-grow linear both;
        animation-timeline: scroll(root);
      }
    }
  }

  /* ------------------------------------------------------------------
     Menos movimento: mantém a informação, remove deslocamentos e loops
     ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .btn::after { display: none; }
    .btn:hover,
    .card--lift:hover { transform: none; }
    .ico .d,
    .ico .fill { animation: none; }
  }
}