/* Kali Riat Pinturas: animações.
   Ideia central: tudo que é amarelo "é pintado" na tela (pincelada da esquerda
   para a direita) e as fotos são reveladas como um rolo passando de cima para baixo.
   Só roda com JS ativo e sem preferência por movimento reduzido. */

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

  /* ---------- Entrada do hero (CSS puro, sem esperar scroll) ---------- */
  .js [data-hero] { animation: rise .9s var(--ease-out) both; }
  .js [data-hero="1"] { animation-delay: .05s; }
  .js [data-hero="2"] { animation-delay: .15s; }
  .js [data-hero="3"] { animation-delay: .35s; }
  .js [data-hero="4"] { animation-delay: .5s; }
  .js [data-hero="5"] { animation-delay: .65s; }

  .js .eyebrow__bar { animation: brush .6s var(--ease-brush) .25s both; transform-origin: left center; }
  .js .hero__swipe { animation: swipe .75s var(--ease-brush) .7s both; }

  .js .collage__blob path:first-child { animation: blob 1.1s var(--ease-out) .2s both; transform-origin: 50% 50%; transform-box: fill-box; }
  .js .collage__drop { animation: drop .6s var(--ease-out) both; transform-origin: center; transform-box: fill-box; }
  .js .collage__drop:nth-of-type(1) { animation-delay: 1.05s; }
  .js .collage__drop:nth-of-type(2) { animation-delay: 1.15s; }
  .js .collage__drop:nth-of-type(3) { animation-delay: 1.25s; }
  .js .collage__arrow { stroke-dasharray: 120; animation: draw .8s ease-out 1.3s both; }

  /* Moldura branca entra primeiro ("parede em branco"), depois a foto é rolada por dentro */
  .js .photo--main { animation: frame-main .9s var(--ease-out) .3s both; }
  .js .photo--side { animation: frame-side .9s var(--ease-out) .5s both; }
  .js .photo--main img { animation: roll 1s var(--ease-brush) .65s both, settle 1.8s var(--ease-out) .65s both; }
  .js .photo--side img { animation: roll 1s var(--ease-brush) .85s both, settle 1.8s var(--ease-out) .85s both; }
  .js .tagcard { animation: pop .7s var(--ease-out) 1s both; }

  /* Parallax suave no hero (valor --py vem do main.js) */
  .js .photo--main { translate: 0 calc(var(--py, 0) * -18px); }
  .js .photo--side { translate: 0 calc(var(--py, 0) * -40px); }
  .js .collage__blob { translate: 0 calc(var(--py, 0) * 10px); }

  /* ---------- Revelação ao rolar ---------- */
  .js [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="band"] { transform: translateY(28px) scale(.97); }
  .js [data-reveal="band"].is-in { transform: none; }

  /* Fotos: rolo de tinta de cima para baixo + leve zoom-out */
  .js img[data-roll] {
    clip-path: inset(0 0 100% 0);
    scale: 1.12;
    transition: clip-path 1s var(--ease-brush), scale 1.4s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger) + .15s);
  }
  .js .is-in img[data-roll] { clip-path: inset(0); scale: 1; }

  /* Etiquetas e marcações amarelas: pincelada */
  .js .tag, .js .paint {
    background-size: 0% 100%;
    transition: background-size .8s var(--ease-brush) .25s;
  }
  .js .is-in .tag, .js .is-in .paint { background-size: 100% 100%; }

  /* Checks entram com um "pop" no ícone */
  .js .checks li::before { scale: 0; rotate: -90deg; transition: scale .5s var(--ease-out), rotate .5s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .2s); }
  .js .checks li.is-in::before { scale: 1; rotate: 0deg; }

  /* Ícones dos cards e da faixa */
  .js .card .card__ic { scale: 0; transition: scale .6s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .55s); }
  .js .card.is-in .card__ic { scale: 1; }
  .js .stat svg { opacity: 0; rotate: -25deg; transition: opacity .6s ease, rotate .8s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .2s); }
  .js .stat.is-in svg { opacity: 1; rotate: 0deg; }

  /* Foto do bloco "Por que" e losango do CTA */
  .js .why__photo { transform: rotate(-4deg) translateY(24px); opacity: 0; transition: transform 1s var(--ease-out) .2s, opacity .8s ease .2s; }
  .js .why.is-in .why__photo { transform: rotate(2deg); opacity: 1; }
  .js .cta__diamond { transform: rotate(-30deg) scale(.6); transition: transform 1.2s var(--ease-out) .2s; }
  .js .cta.is-in .cta__diamond { transform: none; }

  /* Faixa zebrada do rodapé andando devagar */
  .ftr__stripe { animation: stripe 3s linear infinite; }

  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes brush { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes swipe { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
  @keyframes blob { from { opacity: 0; transform: scale(.82) rotate(-4deg); } to { opacity: 1; transform: none; } }
  @keyframes drop { 0% { opacity: 0; transform: translateY(-30px) scale(.4); } 70% { opacity: 1; transform: translateY(3px) scale(1.1); } 100% { opacity: 1; transform: none; } }
  @keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
  @keyframes frame-main { from { opacity: 0; transform: rotate(-7deg) translateY(36px); } to { opacity: 1; transform: rotate(-2deg); } }
  @keyframes frame-side { from { opacity: 0; transform: rotate(10deg) translateY(36px); } to { opacity: 1; transform: rotate(3deg); } }
  @keyframes roll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes settle { from { transform: scale(1.18); } to { transform: none; } }
  @keyframes pop { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 100% { opacity: 1; transform: none; } }
  @keyframes stripe { to { background-position: 62.2px 0; } }
}

@media (prefers-reduced-motion: no-preference) {
  .swipe-hint svg { animation: nudge 1.6s var(--ease-out) infinite; }
  @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .nav > a { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .4s var(--ease-out); }
  .nav.is-open > a { opacity: 1; transform: none; }
  .nav.is-open > a:nth-child(1) { transition-delay: .04s; }
  .nav.is-open > a:nth-child(2) { transition-delay: .08s; }
  .nav.is-open > a:nth-child(3) { transition-delay: .12s; }
  .nav.is-open > a:nth-child(4) { transition-delay: .16s; }
  .nav.is-open > a:nth-child(5) { transition-delay: .2s; }
  .nav.is-open > a:nth-child(6) { transition-delay: .26s; }
}