/* Colours Pintura: animações.
   Ideia central: a sala está sendo pintada. Na ilustração do topo o rolo desce
   pintando a parede terracota e a lata pinga; as palavras em letra cursiva são
   "escritas" da esquerda para a direita e as ilustrações dos serviços entram
   com uma passada de rolo. Só roda com JS ativo e sem movimento reduzido. */

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

  /* ---------- Entrada do hero ---------- */
  .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: .4s; }
  .js [data-hero="4"] { animation-delay: .55s; }
  .js [data-hero="5"] { animation-delay: .7s; }
  .js .eyebrow__bar { animation: brush .6s var(--ease-paint) .25s both; }
  .js .hero__h [data-write] { animation: write .9s var(--ease-paint) .75s both; }

  /* Ilustração: mancha vinho, respingos, parede pintada pelo rolo, lata pingando */
  .js .hero__svg .blob { transform-box: fill-box; transform-origin: center; animation: blob 1s var(--ease-out) .1s both; }
  .js .hero__svg .splat { transform-box: fill-box; transform-origin: center; animation: pop .5s var(--ease-out) both; }
  .js .hero__svg .splat { animation-delay: .95s; }
  .js .hero__svg .wall-paint { animation: paint-down 1.2s cubic-bezier(.45, 0, .55, 1) .5s both; }
  .js .hero__svg .roller { transform-box: view-box; animation: roller-pass 2s cubic-bezier(.45, 0, .55, 1) .5s both, roll 3.2s ease-in-out 2.5s infinite; }
  .js .hero__svg .can { transform-box: fill-box; transform-origin: 50% 100%; animation: can-in .7s var(--ease-out) .9s both; }
  .js .hero__svg .drip { stroke-dasharray: 32; animation: drip 2.6s ease-in 1.8s infinite; }
  .js .badge--dark { animation: slide-in-left .8s var(--ease-out) 1.1s both; }
  .js .badge--quote { animation: slide-in-right .8s var(--ease-out) 1.3s both; }

  /* ---------- 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; }

  /* Palavras cursivas sendo escritas */
  .js .is-in [data-write], .js [data-write].is-in { animation: write .9s var(--ease-paint) .35s both; }
  .js [data-reveal] [data-write] { clip-path: inset(0 100% 0 0); }

  /* Ilustrações dos serviços: passada de rolo da esquerda para a direita */
  .js .card__svg { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-paint); transition-delay: calc(var(--i, 0) * var(--stagger) + .2s); }
  .js .card.is-in .card__svg { clip-path: inset(0); }
  .js .card .card__ic { scale: 0; transition: scale .55s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .8s); }
  .js .card.is-in .card__ic { scale: 1; }

  /* Ícones dos diferenciais e números dos passos */
  .js .perk .perk__ic { scale: .4; rotate: -40deg; transition: scale .6s var(--ease-out), rotate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .15s); }
  .js .perk.is-in .perk__ic { scale: 1; rotate: 0deg; }
  .js .step .step__n { scale: .3; transition: scale .6s var(--ease-out), background-color .4s ease, color .4s ease; transition-delay: calc(var(--i, 0) * 140ms + .1s); }
  .js .step.is-in .step__n { scale: 1; animation: fill-flash 1s ease calc(var(--i, 0) * 140ms + .5s) both; }

  /* Checks e luminária */
  .js .checks li::before { scale: 0; transition: scale .5s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) + .2s); }
  .js .checks li.is-in::before { scale: 1; }
  .js .why__svg .lamp { transform-box: view-box; transform-origin: 150px 0; }
  .js .why__art.is-in .why__svg .lamp { animation: sway 4s ease-in-out .6s infinite; }

  .swipe-hint svg { animation: nudge 1.6s var(--ease-out) 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 write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-20% -10% -20% 0); } }
  @keyframes blob { from { opacity: 0; transform: scale(.8) rotate(-6deg); } to { opacity: 1; transform: none; } }
  @keyframes pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
  @keyframes paint-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes roller-pass { 0% { transform: translateY(-40px); } 60% { transform: translateY(215px); } 100% { transform: none; } }
  @keyframes roll { 0%, 100% { transform: none; } 50% { transform: translateY(16px); } }
  @keyframes can-in { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes drip { 0% { stroke-dashoffset: 32; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -32; } }
  @keyframes slide-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  @keyframes slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  @keyframes fill-flash { 0%, 100% { background-color: transparent; color: var(--gold); } 40% { background-color: var(--gold); color: var(--wine-dark); } }
  @keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
  @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; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}