/*
 * Camada de microinterações da Home (TESTE) — 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, prop `motion`):
 *   - 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 */
  --m-zoom: 1.035;     /* zoom final do banner ativo */
}
/* mobile: movimentos mais leves */
@media (max-width: 800px) {
  html.motion-on { --m-dy: 8px; --m-dur: .55s; --m-stagger: 50ms; --m-zoom: 1.02; }
}
/* aparelho fraco / economia de dados: só aparece (fade), sem deslocar, sem zoom */
html.motion-on[data-motion="lite"] { --m-dy: 0px; --m-dur: .5s; --m-zoom: 1; }

/* ---------- 1 e 2. reveal on scroll + stagger ---------- */
html.motion-on :is(main .section-title, main .section-sub, main .brand-card, main .pillar-card, main .cta, main .bn-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-title, main .section-sub, main .brand-card, main .pillar-card, main .cta, main .bn-card):not(.m-in),
html.motion-on:not(.m-ready) main .accent-bar:not(.m-in),
html.motion-on:not(.m-ready) main .brand-card-logo:not(.m-in) { animation: m-failsafe .01s 4s forwards; }
html.motion-on :is(main .section-title, main .section-sub, main .brand-card, main .pillar-card, main .cta, main .bn-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; } }

/* ---------- 4. linha vermelha institucional: 0 → 100% da largura ---------- */
html.motion-on main .accent-bar { transform-origin: left center; }
html.motion-on main .accent-bar:not(.m-in) { transform: scaleX(0); }
html.motion-on main .accent-bar.m-in {
  animation: m-line .9s var(--m-ease) calc(var(--i, 0) * var(--m-stagger)) backwards;
}
@keyframes m-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 5. logos das marcas: aparecem em fade (sem varredura lateral) ---------- */
html.motion-on main .brand-card-logo:not(.m-in) { opacity: 0; }
html.motion-on main .brand-card-logo.m-in {
  animation: m-appear calc(var(--m-dur) + .25s) var(--m-ease) calc(var(--i, 0) * var(--m-stagger) + 120ms) backwards;
}
@keyframes m-appear { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 3. hover premium nos cards (só com mouse; teclado também) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.motion-on :is(main .brand-card, main .pillar-card) {
    transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease), border-color .3s var(--m-ease);
  }
  html.motion-on :is(main .brand-card, main .pillar-card):is(:hover, :focus-within) {
    transform: translate3d(0, -4px, 0) scale(1.012);
    box-shadow: 0 16px 34px rgba(15, 42, 74, .18);
  }
  html.motion-on main .pillar-card:is(:hover, :focus-within) { border-color: rgba(15, 42, 74, .28); }
  html.motion-on[data-motion="lite"] :is(main .brand-card, main .pillar-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 .brand-card a.btn, main .cta .btn, header .nav-cta) { position: relative; }
html.motion-on :is(main .brand-card a.btn, main .cta .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 .brand-card a.btn, main .cta .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: transform .32s var(--m-ease), 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(15, 42, 74, .9);
  box-shadow: 0 8px 24px rgba(6, 18, 36, .22);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
}
html.motion-on header.m-scrolled.nav-open { background-color: var(--navy); }
html.motion-on[data-motion="lite"] header.m-scrolled { background-color: var(--navy); -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: var(--navy); }
}

/* ---------- 7. carrossel principal: fade mais macio + zoom progressivo ---------- */
html.motion-on .hero-slide { transition: opacity .9s var(--m-ease), visibility 0s linear .9s; }
html.motion-on .hero-slide[data-active="true"] { transition: opacity .9s var(--m-ease); }
html.motion-on .hero-slide img {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0s linear .9s;   /* volta ao tamanho só depois do fade terminar (sem "pulo") */
}
/* `m-zoom` é colocada pelo JS depois do 1º frame, para o primeiro banner também dar o zoom */
html.motion-on.m-zoom .hero-slide[data-active="true"] img {
  transform: scale(var(--m-zoom));
  transition: transform 6.4s cubic-bezier(.2, .6, .3, 1);
  will-change: transform;
}

/* ---------- seção da arte "Desenvolvimento, produção e marcas…": entrada única (fade + sobe 18px) ---------- */
html.motion-on .hub-art:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); }
html.motion-on .hub-art.is-in:not(.is-ready) { transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1); }
html.motion-on:not(.m-ready) .hub-art:not(.is-in) { animation: m-failsafe .01s 4s forwards; }
html.motion-on[data-motion="lite"] .hub-art:not(.is-in) { transform: none; }

/* 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-title, main .section-sub, main .brand-card, main .pillar-card, main .cta, main .bn-card, main .brand-card-logo, main .accent-bar):not(.m-in) {
    opacity: 1 !important; clip-path: none !important; transform: none !important;
  }
}