/* v3: a landing v1 com camada de movimento (Motion). Só transform/opacity/clip-path. */

/* Faixas de rolagem infinita */
.band{overflow:hidden;border-block:1px solid var(--line);background:var(--ink);color:var(--paper);user-select:none}
.band-track{display:flex;width:max-content;will-change:transform}
.band-set{display:flex;align-items:center;flex:none}
.band-set span{font:900 clamp(2rem,6.5vw,5.5rem)/1 var(--font-sans);letter-spacing:-.03em;text-transform:uppercase;padding:clamp(14px,2vw,26px) 0;white-space:nowrap}
.band-set i{flex:none;width:clamp(14px,2vw,26px);height:clamp(14px,2vw,26px);background:var(--acid);margin:0 clamp(22px,3.4vw,52px)}
.band-acid{background:var(--acid);color:var(--ink);border-color:var(--ink)}
.band-acid .band-set i{background:var(--ink)}
.band-outline .band-set span{color:transparent;-webkit-text-stroke:1.5px currentColor}

/* Palavras que sobem de dentro de uma máscara */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wm>span{display:inline-block}
.js .wm>span{transform:translateY(112%)}

/* Declaração: palavras acendem conforme a rolagem */
.js .statement .w{opacity:.5} /* piso 0.5: ink sobre paper = 3.4:1, mínimo de 3:1 para texto grande (1.4.3) */

/* Estados iniciais (removidos com movimento reduzido) */
.js [data-r]{opacity:0}
.js .bars i{transform:scaleY(0);transform-origin:bottom}
.js .work-card,.js .good .gimg{clip-path:inset(0 0 100% 0)}
.js .offer-row{border-bottom-color:transparent;position:relative}
.offer-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--ln,1))}
.js .offer-row{--ln:0}

/* Fundo da abertura: a grade deriva devagar */
@media (prefers-reduced-motion:no-preference){
  .hero-art::before{animation:drift 14s linear infinite}
  @keyframes drift{to{background-position:100px 100px}}
}

/* Produtos */
.goods-sec{background:var(--paper);color:var(--ink);padding:clamp(72px,10vw,150px) var(--g,clamp(20px,4vw,56px))}
.goods-sec .em{color:var(--ink)}
.goods3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);max-width:1360px;margin:0 auto}
.mcopy{display:grid;gap:20px;align-content:center;justify-items:start;padding-right:clamp(0px,2vw,32px)}
.mcopy p{font-size:1.0625rem;color:rgba(17,19,21,.8);max-width:36ch;margin:0}
.mcopy small{font-size:.8125rem;color:rgba(17,19,21,.66);max-width:40ch}
.good{display:grid;gap:12px;align-content:start;margin:0}
.gimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e6e6e0}
.gimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.gimg .logo{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;translate:-50% -50%;transform:var(--t,none);opacity:.95;filter:blur(.2px)}
.good figcaption{font:900 .9375rem/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase}
@media(hover:hover) and (pointer:fine){.good:hover .gimg img{transform:scale(1.05)}}
@media(max-width:900px){.goods3{grid-template-columns:repeat(2,minmax(0,1fr))}.mcopy{grid-column:1/-1;margin-bottom:12px}}

/* Celular: cartões "em breve" não estouram a largura */
.soon{grid-template-columns:minmax(0,1fr)}
@media(min-width:901px){.soon{grid-template-columns:repeat(2,minmax(0,1fr))}}
.soon-card{min-width:0}
.sprint>div{min-width:0}.sprint i{overflow-wrap:anywhere}
