/* =========================================================
   Movimento do site (aprovado na cópia da home em 06/11/2026)
   Carregado junto com js/motion.js em todas as páginas.
   Sem JavaScript, as páginas ficam iguais ao layout aprovado.
   ========================================================= */
:root {
  --m-ease: cubic-bezier(.23, 1, .32, 1);
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Entradas ao rolar ---------- */
.m-on [data-m] {
  transition: opacity .8s var(--m-ease), transform 1s var(--m-ease);
  transition-delay: calc(var(--m-i, 0) * 70ms);
}
.m-on [data-m="rise"]:not(.m-in)  { opacity: 0; transform: translate3d(0, 38px, 0); }
.m-on [data-m="fade"]:not(.m-in)  { opacity: 0; transform: translate3d(0, 12px, 0); }
.m-on [data-m="grow"]:not(.m-in)  { opacity: 0; transform: scale(.93); }
.m-on [data-m="tilt"]:not(.m-in)  { opacity: 0; transform: translate3d(0, 56px, 0) rotate(-4deg); }
.m-on [data-m="slide"]:not(.m-in) { opacity: 0; transform: translate3d(-48px, 0, 0); }
.m-on [data-m="tilt"] { transform-origin: 50% 100%; }

/* ---------- Hero: chegada em sequência ---------- */
.m-on .hero__bg { animation: m-settle 2.6s var(--m-ease) both; }
.m-on .hero__content { position: relative; z-index: 2; }
/* a sequência começa junto com o título (main.js marca o título com .is-in; motion.js marca .m-go no mesmo quadro) */
.m-on .hero__content:not(.m-go) :is(.hero__lead, .hero__fruit, .btn-row > *) { opacity: 0; }
.m-on .hero__content:not(.m-go) .hero__rule { transform: scaleX(0); }
.m-on .m-go :is(.hero__lead, .hero__fruit, .btn-row > *) { animation: m-rise .9s var(--m-ease) both; }
.m-on .m-go .hero__lead { animation-delay: calc(var(--m-words, 8) * 90ms + 200ms); }
.m-on .hero__fruit { display: inline-block; }
.m-on .m-go .hero__fruit { animation-delay: calc(var(--m-words, 8) * 90ms + 420ms + var(--m-i) * 90ms); }
.m-on .hero__rule { transform-origin: 50% 50%; }
.m-on .m-go .hero__rule { animation: m-draw 1.1s var(--m-ease-io) both; animation-delay: calc(var(--m-words, 8) * 90ms + 900ms); }
.m-on .m-go .btn-row > * { animation-delay: calc(var(--m-words, 8) * 90ms + 1000ms + var(--m-i, 0) * 80ms); }
@keyframes m-settle { from { scale: 1.14; } to { scale: 1; } }
@keyframes m-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes m-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero: foto, brilho e texto se movem em velocidades diferentes */
.m-on .hero__bg img { translate: 0 calc(var(--hq, 0) * 14%); }
.m-on .hero__content { translate: 0 calc(var(--hq, 0) * -90px); opacity: calc(1 - var(--hq, 0) * 1.25); }
.m-haze {
  position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 78% 18%, rgba(255, 238, 205, .2), transparent 70%),
    radial-gradient(30% 26% at 12% 86%, rgba(181, 136, 226, .16), transparent 70%);
  translate: 0 calc(var(--hq, 0) * -60px);
  animation: m-breathe 9s ease-in-out infinite alternate;
}
@keyframes m-breathe { from { opacity: .7; } to { opacity: 1; } }

/* ---------- Banner das páginas internas e da notícia: a mesma chegada, mais curta ---------- */
.m-on .page-hero__bg { animation: m-settle 2.2s var(--m-ease) both; translate: 0 calc(var(--hq, 0) * 14%); }
.m-on .page-hero__content { position: relative; z-index: 2; translate: 0 calc(var(--hq, 0) * -60px); opacity: calc(1 - var(--hq, 0) * 1.25); }
.m-on .page-hero__content:not(.m-go) > :not(.page-hero__title) { opacity: 0; }
.m-on .page-hero__content.m-go > :not(.page-hero__title) { animation: m-rise .9s var(--m-ease) both; animation-delay: calc(var(--m-words, 4) * 90ms + 200ms); }
.m-on .page-hero__content.m-go > .crumbs { animation-delay: 0ms; }

/* ---------- O que é a Rota ---------- */
/* as peças giradas não podem empurrar a página para o lado */
.m-on :is(.about, .tree, .news) { overflow-x: clip; }
.m-on .about__brush { rotate: calc(var(--mp, 0) * 10deg); }
.m-on .about__man { translate: 0 calc(var(--mp, 0) * -34px); }
.m-on .about__cherry { translate: 0 calc(var(--mp, 0) * -70px); rotate: calc(var(--mp, 0) * 12deg); }

/* ---------- Vídeo: abre enquanto passa pela tela (pico) ---------- */
.m-on .video-band { clip-path: inset(calc((1 - var(--mv, 1)) * 9%) calc((1 - var(--mv, 1)) * 14%) round var(--raio)); }
.m-on .video-band__img { scale: calc(1.28 - var(--mv, 1) * .28); }
.m-on .video-band .play { translate: var(--mx, 0px) var(--my, 0px); }

/* ---------- Notícias, cooperativismo ---------- */
.m-on .feature__img { scale: 1.12; translate: 0 calc(var(--mp, 0) * -34px); }
.m-on .tree__photo { translate: 0 calc(var(--mp, 0) * -26px); }
.m-on .tree__seal { rotate: calc(var(--mp, 0) * -56deg); }
.m-on .tree__leaf { translate: 0 calc(var(--mp, 0) * -60px); rotate: calc(var(--mp, 0) * 24deg); }
.m-on .tree__berries { translate: 0 calc(var(--mp, 0) * -64px); }
.m-on .statement__flower { translate: 0 calc(var(--mp, 0) * -40px); }
.m-on .stat__icon { transition: transform .5s var(--m-ease); }
.m-on .stat.m-in .stat__icon { animation: m-pop .8s var(--m-ease) both; animation-delay: calc(var(--m-i, 0) * 70ms + 120ms); }
@keyframes m-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- Cabeçalho fixo que volta ao subir a página ---------- */
.m-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  height: 72px; padding: 0 20px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(10, 40, 3, .45);
  transform: translate3d(0, -110%, 0); transition: transform .45s var(--m-ease);
}
.m-bar.is-shown { transform: none; }
.m-bar__logo { justify-self: start; display: flex; }
.m-bar__logo img { width: 52px; height: 52px; }
.m-bar .mainnav { grid-column: 2; }
.m-bar__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.m-bar__end .btn { height: 46px; padding: 0 26px; }
.m-bar .menu-toggle { display: none; }

/* ---------- Assinatura: a rota que se desenha ---------- */
.m-route {
  position: fixed; left: 22px; top: 50%; z-index: 40;
  translate: 0 -50%;
  padding: 16px 9px; border-radius: 40px;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -16px rgba(10, 40, 3, .5);
  opacity: 0; transition: opacity .6s var(--m-ease);
}
.m-route.is-ready { opacity: 1; }
.m-route__track { position: relative; height: min(52vh, 420px); width: 18px; }
.m-route__trail, .m-route__fill { position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.m-route__trail { background: repeating-linear-gradient(to bottom, rgba(91, 140, 81, .55) 0 5px, transparent 5px 10px); }
.m-route__fill { background: var(--roxo); transform-origin: 50% 0; transform: scaleY(var(--mr, 0)); }
.m-route ol { list-style: none; margin: 0; padding: 0; }
.m-route li { position: absolute; left: 0; top: calc(var(--y) * 100%); translate: 0 -50%; }
.m-route a { position: relative; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.m-route__dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--verde); transition: transform .3s var(--m-ease), background-color .3s, box-shadow .3s; }
.m-route li.is-past .m-route__dot { background: var(--roxo); box-shadow: inset 0 0 0 2px var(--roxo); }
.m-route li.is-here .m-route__dot { transform: scale(1.5); background: #fff; box-shadow: inset 0 0 0 3px var(--roxo), 0 0 0 4px rgba(136, 62, 144, .18); }
.m-route__label {
  position: absolute; left: 30px; top: 50%; translate: 0 -50%;
  white-space: nowrap; padding: 6px 12px; border-radius: 100px;
  background: var(--roxo); color: #fff; font-size: 13px; font-weight: 800;
  opacity: 0; transform: translate3d(-6px, 0, 0); pointer-events: none;
  transition: opacity .18s var(--m-ease), transform .18s var(--m-ease);
}
.m-route a:hover .m-route__label, .m-route a:focus-visible .m-route__label { opacity: 1; transform: none; }
.m-route__berry {
  position: absolute; left: 2px; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b07ad1, var(--roxo) 60%, #5d2363);
  translate: 0 calc(var(--mr, 0) * min(52vh, 420px) - 7px);
  pointer-events: none;
}
.m-route__berry::after {
  content: ""; position: absolute; left: 6px; top: -5px; width: 7px; height: 5px;
  border-radius: 6px 0; background: var(--verde-claro); rotate: -20deg;
}

@media (max-width: 1199px) { .m-route { display: none; } }
@media (max-width: 1024px) {
  .m-bar { grid-template-columns: 1fr auto; height: 64px; }
  .m-bar .mainnav, .m-bar__end .btn { display: none; }
  .m-bar__end { grid-column: 2; }
  .m-bar .menu-toggle { display: block; }
  .m-bar__logo img { width: 46px; height: 46px; }
}
@media (max-width: 767px) {
  .m-on .video-band { clip-path: inset(calc((1 - var(--mv, 1)) * 6%) calc((1 - var(--mv, 1)) * 6%) round var(--raio)); }
}

/* ---------- Menos movimento: só esmaecimentos curtos ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-on [data-m] { transition: opacity .4s ease-out; transition-delay: 0s; }
  .m-on [data-m]:not(.m-in) { transform: none; }
  .m-on .hero__bg, .m-on .m-go :is(.hero__lead, .hero__fruit, .hero__rule, .btn-row > *),
  .m-haze, .m-on .stat.m-in .stat__icon, .m-on .page-hero__bg, .m-on .page-hero__content.m-go > * { animation: none; }
  .m-on .hero__bg img, .m-on .hero__content, .m-haze, .m-on .about__brush,
  .m-on .about__man, .m-on .about__cherry, .m-on .feature__img, .m-on .tree__photo, .m-on .tree__seal, .m-on .tree__leaf,
  .m-on .tree__berries, .m-on .video-band__img, .m-on .video-band .play,
  .m-on .page-hero__bg, .m-on .page-hero__content, .m-on .statement__flower { translate: none; rotate: none; scale: none; }
  .m-on .hero__content, .m-on .page-hero__content { opacity: 1; }
  .m-on .hero__content:not(.m-go) :is(.hero__lead, .hero__fruit, .btn-row > *),
  .m-on .page-hero__content:not(.m-go) > * { opacity: 1; }
  .m-on .hero__content:not(.m-go) .hero__rule { transform: none; }
  .m-on .video-band { clip-path: none; }
  .m-bar { transition: none; }
}