/*
 * Camada de microinterações (mesma da Home do site Crowil) — só transform/opacity/clip-path,
 * nada que mexa em layout (zero CLS). Tudo fica atrás de `html.motion-on`, classe
 * que só é colocada pelo script de boot do <head> (Base.astro):
 *   - não é colocada com prefers-reduced-motion, nem com ?motion=off;
 *   - data-motion="lite" em aparelho fraco / economia de dados / ?motion=lite.
 * Como desligar: `const MOTION = false` em pages/index.astro (e publicar),
 * ou apagar este arquivo + motion.js. Para comparar na hora: acrescentar ?motion=off na URL.
 * A lista de seletores abaixo precisa ser a mesma de /js/motion.js.
 */

html.motion-on {
  --m-ease: cubic-bezier(.22, .61, .36, 1);
  --m-dy: 14px;        /* deslocamento vertical do reveal */
  --m-dur: .75s;
  --m-stagger: 70ms;   /* atraso entre itens de um mesmo grupo */
}
/* mobile: movimentos mais leves */
@media (max-width: 800px) {
  html.motion-on { --m-dy: 8px; --m-dur: .55s; --m-stagger: 50ms; }
}
/* aparelho fraco / economia de dados: só aparece (fade), sem deslocar, sem zoom */
html.motion-on[data-motion="lite"] { --m-dy: 0px; --m-dur: .5s; }

/* ---------- 1 e 2. reveal on scroll + stagger ---------- */
html.motion-on :is(main .section .eyebrow, main .section h2, main .section .lead, main .cards > .card, main .also-card, main .flavor-card, main .gloss-card):not(.m-in) { opacity: 0; }
/* plano B: só vale se o motion.js NUNCA rodar (ele coloca `m-ready` no <html> assim que começa) —
   aí tudo aparece sozinho em 4 s. Com o JS funcionando, nada aparece antes da hora. */
html.motion-on:not(.m-ready) :is(main .section .eyebrow, main .section h2, main .section .lead, main .cards > .card, main .also-card, main .flavor-card, main .gloss-card):not(.m-in),
html.motion-on:not(.m-ready) main .__never { animation: m-failsafe .01s 4s forwards; }
html.motion-on :is(main .section .eyebrow, main .section h2, main .section .lead, main .cards > .card, main .also-card, main .flavor-card, main .gloss-card).m-in {
  animation: m-rise var(--m-dur) var(--m-ease) calc(var(--i, 0) * var(--m-stagger)) backwards;
}
@keyframes m-rise {
  from { opacity: 0; transform: translate3d(0, var(--m-dy), 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes m-failsafe { to { opacity: 1; transform: none; clip-path: none; } }

/* ---------- 3. hover premium nos cards (só com mouse; teclado também) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.motion-on :is(main .cards > .card, main .also-card, main .flavor-card) {
    transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease), border-color .3s var(--m-ease);
  }
  html.motion-on :is(main .cards > .card, main .also-card, main .flavor-card):is(:hover, :focus-within) {
    transform: translate3d(0, -4px, 0) scale(1.012);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
  }
  html.motion-on[data-motion="lite"] :is(main .cards > .card, main .also-card, main .flavor-card):is(:hover, :focus-within) { transform: none; }
}

/* ---------- 8. botões/CTAs: seta que desliza ao passar o mouse ou focar ---------- */
html.motion-on :is(main .card a.btn, main .sell-block .btn, main .industria-block .btn, header .nav-cta) { position: relative; }
html.motion-on :is(main .card a.btn, main .sell-block .btn, main .industria-block .btn, header .nav-cta)::after {
  content: "";
  position: absolute; right: 9px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translate3d(-6px, -50%, 0) rotate(45deg);
  opacity: 0;
  transition: transform .3s var(--m-ease), opacity .25s var(--m-ease);
  pointer-events: none;
}
html.motion-on :is(main .card a.btn, main .sell-block .btn, main .industria-block .btn, header .nav-cta):is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
/* botão do topo no menu mobile aberto: sem seta (já ocupa a linha inteira) */
@media (max-width: 1040px) { html.motion-on header .nav-cta::after { display: none; } }

/* ---------- 9. header: transição suave ao rolar ---------- */
html.motion-on header {
  transition: background-color .35s var(--m-ease), box-shadow .35s var(--m-ease),
    -webkit-backdrop-filter .35s var(--m-ease), backdrop-filter .35s var(--m-ease);
}
html.motion-on header.m-scrolled {
  background-color: rgba(63,0,151, .9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
}
html.motion-on header.m-scrolled.nav-open { background-color: rgb(63,0,151); }
html.motion-on[data-motion="lite"] header.m-scrolled { background-color: rgb(63,0,151); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.motion-on header.m-scrolled { background-color: rgb(63,0,151); }
}

/* defesa extra: se a pessoa ligar "reduzir movimento" depois da página aberta */
@media (prefers-reduced-motion: reduce) {
  html.motion-on *, html.motion-on *::before, html.motion-on *::after {
    animation: none !important;
    transition: none !important;
  }
  html.motion-on :is(main .section .eyebrow, main .section h2, main .section .lead, main .cards > .card, main .also-card, main .flavor-card, main .gloss-card):not(.m-in) {
    opacity: 1 !important; clip-path: none !important; transform: none !important;
  }
}