/* =====================================================================
   Camada de movimento cinematográfica (guia: docs/motion.md)
   Par deste arquivo: js/motion.js (GSAP + ScrollTrigger + SplitText em js/vendor).
   Princípio: o estado "parado" do site é o estado final. Sem JavaScript, sem
   estes dois arquivos ou com "reduzir movimento" ligado, o site é o de antes.
   Quase tudo aqui só vale com a classe .mx, que o motion.js põe no <html>.
   ===================================================================== */

/* ---------- Antes do JS rodar ----------
   Só título, texto e foto do hero começam escondidos, para não "piscar" antes da
   abertura. Os botões (e a barra fixa do celular) NUNCA esperam a animação: medido
   em 4G fraco, esconder os botões atrasava o "Pedir pelo WhatsApp" em ~2 s.
   Trava de segurança: se o motion.js não rodar em 2,5 s, a animação CSS abaixo
   revela tudo sozinha. Com .mx-off (JS desistiu), revela na hora. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not(.mx-off) .hero h1,
  html:not(.mx-off) .hero .lead,
  html:not(.mx-off) .hero-figure{visibility:hidden;animation:mx-failsafe 0s linear 2.5s forwards}
  /* Canais sobe como uma folha branca por cima do hero vermelho.
     Raio + sombra, sem borda (regra do design system: nunca as duas). */
  #canais{position:relative;z-index:1;margin-top:-28px;background:var(--surface);border-radius:28px 28px 0 0;box-shadow:0 -20px 40px -18px rgba(17,17,17,.26)}
}
@keyframes mx-failsafe{to{visibility:visible}}

/* ---------- Peças criadas pelo motion.js (só existem visualmente com .mx) ---------- */
.mx-progress,.mx-route,.mx-grupo-bg,.mx-tl-label{display:none}

/* Barra de leitura no topo da tela */
.mx .mx-progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Fotos: a moldura recorta (clip-path) e a foto se move dentro dela (zoom, parallax) */
.mx-media{overflow:hidden;border-radius:var(--r-card);isolation:isolate}
.mx-media img{border-radius:0}
.mx .mx-media img{will-change:transform}

/* Títulos quebrados em linhas: a máscara não pode cortar acento nem a perna do "g" */
.mx-line-mask{padding-block:.08em .14em;margin-block:-.08em -.14em}

/* Rede de segurança: nada que entra de lado cria rolagem horizontal no celular */
.mx main{overflow-x:clip}
.mx .header{will-change:transform}

/* ---------- Hero: o símbolo da marca gira e desce ao fundo ---------- */
.mx .hero::before{transform:translate3d(0,var(--sym-y,0px),0) rotate(var(--sym-r,0deg)) rotate(var(--sym-k,0deg)) scale(var(--sym-s,1));transform-origin:100% 0;will-change:transform}

/* ---------- Disk Lelê: a rota da entrega (Chame → Confirme → Receba) ---------- */
.mx .steps{position:relative;z-index:1}
.mx .steps .num{position:relative;text-align:center;background:var(--surface-sunken);box-shadow:0 0 0 6px var(--surface-sunken)}
.mx .mx-route{display:block;position:absolute;z-index:0;width:2px;background:var(--n-200);pointer-events:none}
.mx-route-fill{position:absolute;inset:0;background:var(--brand);transform-origin:50% 0;transform:scaleY(0)}
.mx-route-dot{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px rgba(227,6,19,.16)}

/* ---------- Pilares: o traço de cima se desenha ---------- */
.mx .pillars li{position:relative;border-top-color:transparent}
.mx .pillars li::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--n-900);transform-origin:0 50%;transform:scaleX(var(--line,1))}

/* ---------- Linha do tempo: a linha vermelha avança com a rolagem ---------- */
.mx .timeline ol::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--brand);transform-origin:50% 0;transform:scaleY(var(--tl-p,0));pointer-events:none}
@media (min-width:1100px){
  .mx .timeline ol::after{left:0;right:0;top:-2px;bottom:auto;width:auto;height:2px;transform-origin:0 50%;transform:scaleX(var(--tl-p,0))}
  /* Modo horizontal (classe posta pelo JS no desktop): a tela segura e os anos correm de lado */
  .mx-tl-h{overflow:hidden;padding-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 96px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 96px),transparent 100%)}
  .mx-tl-h ol{display:flex;width:max-content;gap:0;padding:36px 0 8px 40px}
  .mx-tl-h .mx-tl-label{display:block;margin:0 0 30px 40px;font-family:var(--font-brand);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
  .mx-tl-h li{flex:0 0 clamp(300px,27vw,380px);padding-right:48px}
  .mx-tl-h li::before{top:-43px}
  .mx-tl-h .num{font-size:clamp(72px,7vw,112px);margin-bottom:12px}
  .mx-tl-h p{font-size:18px;max-width:24ch}
}

/* ---------- Grupo Letícia: o degradê verde→roxo flui com a rolagem ----------
   Única seção onde o design system permite gradiente. */
.mx .grupo{position:relative;overflow:hidden;isolation:isolate}
.mx .mx-grupo-bg{display:block;position:absolute;top:0;bottom:0;left:0;width:200%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,var(--gl-green) 0%,var(--gl-teal) 19%,var(--gl-periwinkle) 34%,var(--gl-purple) 50%,var(--gl-periwinkle) 66%,var(--gl-teal) 81%,var(--gl-green) 100%)}