/* ==========================================================================
   DFELX — animations.css
   Um momento autoral (hero, ao carregar) + uma linguagem de suporte
   consistente para o resto da página (entrada ao rolar, index.html — ver
   DESIGN.md 4.30): mesma curva/duração em toda a página, nunca uma
   coreografia diferente por seção.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Controles persistentes do slider (setas/paginação, existem uma vez só,
     não por slide): entram uma única vez, ao carregar a página. */
  .hero-slider-controls,
  .hero-pagination {
    opacity: 0;
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .hero-slider-controls { animation-delay: 0.54s; }
  .hero-pagination { animation-delay: 0.6s; }

  /* Conteúdo de cada slide (kicker/título/subtítulo/CTA): existe um por
     slide, então some por padrão e só entra quando o Swiper marca aquele
     slide como ativo (classe alternada a cada troca de slide) — repete a
     entrada toda vez que o slide aparece, mesmo que não seja a 1ª vez. */
  .hero-kicker,
  .hero-title,
  .hero-subtitle,
  .hero-actions {
    opacity: 0;
  }

  .swiper-slide-active .hero-kicker,
  .swiper-slide-active .hero-title,
  .swiper-slide-active .hero-subtitle,
  .swiper-slide-active .hero-actions {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .swiper-slide-active .hero-kicker { animation-delay: 0.05s; }
  .swiper-slide-active .hero-title { animation-delay: 0.16s; }
  .swiper-slide-active .hero-subtitle { animation-delay: 0.3s; }
  .swiper-slide-active .hero-actions { animation-delay: 0.42s; }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-slider-controls,
  .hero-pagination {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Entrada de conteúdo ao rolar (index.html só — escopado por body.page-home)
   Fica escondido só dentro do media query "no-preference": sem JS ou com
   redução de movimento, o conteúdo já nasce visível (DESIGN.md 4.30).
   `main` exclui o rodapé de propósito — entrada ao rolar é para conteúdo,
   não para o rodapé.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  body.page-home main .row.gy-4 > [class*="col-"],
  body.page-home main .row.g-5 > [class*="col-"],
  body.page-home main .row.g-4 > [class*="col-"],
  body.page-home #cta-banner .cta-banner__row > *,
  body.page-home #produtos .featured-card,
  body.page-home #servicos .featured-card,
  body.page-home #treinamentos .featured-card,
  body.page-home #carreira .carreira__content,
  body.page-home #parceiros .parceiros__kicker {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.page-home main .row.gy-4 > [class*="col-"]:not(.is-visible),
  body.page-home main .row.g-5 > [class*="col-"]:not(.is-visible),
  body.page-home main .row.g-4 > [class*="col-"]:not(.is-visible),
  body.page-home #cta-banner .cta-banner__row > *:not(.is-visible),
  body.page-home #produtos .featured-card:not(.is-visible),
  body.page-home #servicos .featured-card:not(.is-visible),
  body.page-home #treinamentos .featured-card:not(.is-visible),
  body.page-home #carreira .carreira__content:not(.is-visible),
  body.page-home #parceiros .parceiros__kicker:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }

  /* Par kicker+heading / texto (row.gy-4, row.g-5) e o CTA banner (2 filhos) */
  body.page-home main .row.gy-4 > [class*="col-"]:nth-child(1),
  body.page-home main .row.g-5 > [class*="col-"]:nth-child(1),
  body.page-home #cta-banner .cta-banner__row > *:nth-child(1) {
    transition-delay: 0ms;
  }

  body.page-home main .row.gy-4 > [class*="col-"]:nth-child(2),
  body.page-home main .row.g-5 > [class*="col-"]:nth-child(2),
  body.page-home #cta-banner .cta-banner__row > *:nth-child(2) {
    transition-delay: 130ms;
  }

  /* Grades de cards (big numbers, atuação, loja, projetos, blog) —
     stagger com teto: do 6º item em diante, mesmo atraso do 6º. */
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(1) { transition-delay: 0ms; }
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(2) { transition-delay: 70ms; }
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(3) { transition-delay: 140ms; }
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(4) { transition-delay: 210ms; }
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(5) { transition-delay: 280ms; }
  body.page-home main .row.g-4 > [class*="col-"]:nth-child(n+6) { transition-delay: 350ms; }
}

/* ==========================================================================
   Seletor de quantidade (produto.html) — "tick" de contador mecânico a
   cada clique em +/-. DESIGN.md 4.31.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .qty-stepper__input--tick {
    animation: qty-tick 0.2s ease;
  }
}

@keyframes qty-tick {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}