/* wyn-motion.css — estilos da camada de movimento. Depende dos tokens de cor de cada página
   (--lime, --bg, --bg2, --line, --text, --muted). Nada aqui muda conteúdo ou espaçamento das seções. */

/* barra de progresso de leitura */
.wm-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--lime,#aaff00);z-index:90;pointer-events:none;will-change:transform}

/* título linha por linha */
[data-split]{visibility:hidden}
.wm-ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.wm-ln-i{display:block} /* will-change só durante a animação, o GSAP aplica */

/* faixa em laço: as pontas somem em degradê, para o texto não ser cortado no seco */
.wm-mq{overflow:hidden;white-space:nowrap;background:var(--lime,#aaff00);color:#070707;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.wm-mq-track{display:inline-flex;align-items:center;will-change:transform}
.wm-mq-track > span{display:inline-block;padding:0 18px;font-family:Inter,system-ui,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;line-height:46px;white-space:nowrap}
@keyframes wm-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* selo circular giratório */
.wm-seal{display:block;width:var(--seal,128px);height:var(--seal,128px);will-change:transform}
.wm-seal text{font-family:Inter,system-ui,sans-serif;font-size:9.6px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;fill:var(--lime,#aaff00)}

/* perspectiva */
.wm-stage{perspective:1200px;perspective-origin:50% 45%}
[data-tilt3d]{transform-style:preserve-3d}

/* trilho da linha do tempo */
.wm-track{position:relative}
.wm-track-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line,rgba(255,255,255,.09));overflow:hidden}
.wm-track-fill{position:absolute;inset:0;background:var(--lime,#aaff00);transform:scaleY(0);transform-origin:50% 0;will-change:transform}
[data-track-step]{transition:opacity .5s ease,color .5s ease}
[data-track-step]:not(.is-on){opacity:.42}
[data-track-step] .wm-step-n{color:var(--muted,#a3aa9e);transition:color .5s ease,transform .5s ease}
[data-track-step].is-on .wm-step-n{color:var(--lime,#aaff00)}

/* foto que ganha cor */
[data-grayscale]{filter:grayscale(1) contrast(1.06);transition:filter .85s cubic-bezier(.16,1,.3,1)}
[data-grayscale].is-color,[data-grayscale]:hover{filter:none}

/* moldura com canto cortado */
.wm-frame{position:relative;clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%)}
.wm-frame-edge{position:absolute;top:0;right:0;width:48px;height:48px;pointer-events:none}
.wm-frame-edge::before{content:"";position:absolute;top:0;right:0;width:48px;height:2px;
  background:var(--lime,#aaff00);transform:rotate(-45deg);transform-origin:100% 0}

/* borda animada do cartão de oferta: gira o ÂNGULO do degradê, não o elemento.
   Girar o ::before inteiro desenhava um retângulo rodando fora do cartão. */
@property --wm-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes wm-angle{to{--wm-angle:360deg}}
.wm-glow{position:relative;isolation:isolate}
.wm-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--wm-angle),transparent 0deg,var(--lime,#aaff00) 55deg,transparent 140deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;animation:wm-angle 8s linear infinite}
/* fora da tela, o kit põe wm-off e a animação congela (a de ângulo recalcula estilo a cada quadro) */
.wm-off,.wm-off::before,.wm-off::after{animation-play-state:paused!important}

/* selo com anel de texto girando e centro parado */
.wm-seal-wrap{position:relative;width:var(--seal,128px);height:var(--seal,128px);flex-shrink:0}
.wm-seal-wrap .wm-seal{position:absolute;inset:0;width:100%;height:100%}
.wm-seal-wrap text{letter-spacing:0}
.wm-seal-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;line-height:1}
.wm-seal-center b{font-family:Sora,system-ui,sans-serif;font-weight:800;color:var(--lime,#aaff00);font-size:calc(var(--seal,128px) * .27)}
.wm-seal-center span{margin-top:2px;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text,#f2f4ef)}
.wm-seal-center img{width:calc(var(--seal,128px) * .2);height:auto;display:block}

/* barra flutuante em pílula */
.wm-floatbar{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;border-radius:999px;background:rgba(13,15,12,.96);border:1px solid var(--line,rgba(255,255,255,.09));
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.wm-floatbar.is-on{opacity:1;transform:none;pointer-events:auto}
.wm-floatbar .wm-fb-txt{font-size:13px;color:var(--text,#f2f4ef);line-height:1.25;white-space:nowrap}
.wm-floatbar .wm-fb-txt b{display:block;font-weight:600}
.wm-floatbar .wm-fb-txt span{color:var(--muted,#a3aa9e);font-size:12px}
@media (max-width:760px){.wm-floatbar{display:none}}

/* botão com seta em círculo */
.wm-arrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:#070707;color:var(--lime,#aaff00);flex-shrink:0;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wm-arrow svg{width:12px;height:12px;display:block}
a:hover > .wm-arrow,button:hover > .wm-arrow{transform:translate(2px,-2px)}

/* grão: sem mix-blend-mode (obrigava repintar a tela inteira a cada quadro de rolagem),
   camada própria na GPU e desligado em tela de toque */
.wm-grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.035;will-change:transform;transform:translateZ(0);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>");
}
@media (hover:none){.wm-grain{display:none}}

/* Lenis: a rolagem suave do CSS briga com a do Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* com GSAP ativo, o .reveal é animado só por ele */
.wm-gsap .reveal{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .wm-mq-track,[data-spin],.wm-glow::before,[data-pausa]{animation:none!important}
  [data-split]{visibility:visible!important}
  .wm-track-fill{transform:scaleY(1)!important}
  [data-track-step]{opacity:1!important}
  .wm-progress{display:none}
}