/* Animações de scroll: cortina dor → solução, produtos amarrados ao scroll,
   cards empilhados nos diferenciais e scroll suave. Só entram com .js-motion
   (JS ativo e sem prefers-reduced-motion). */

html.smooth-scroll{scroll-behavior:auto}

/* 1. Dor presa na tela e solução subindo por cima */
.js-motion .pin-wrap{height:240vh;position:relative}
.js-motion .pin-wrap .pain{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.js-motion .pin-wrap .pain-content{padding-block:0;width:min(1240px,calc(100% - 112px));will-change:transform,opacity}
.js-motion .pin-wrap .pain-picture img{will-change:transform;transform-origin:center 60%}
.js-motion .pin-wrap .pain-dim{position:absolute;inset:0;z-index:-1;background:#1c0c00;opacity:0;pointer-events:none}
.js-motion .pin-wrap .pain-corner{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.js-motion .solution{position:relative;z-index:2;background:var(--cream);margin-top:-100vh;border-radius:44px 44px 0 0;box-shadow:0 -30px 70px rgba(28,12,0,.45)}

/* 2. Produtos seguindo o scroll */
.js-motion .product-bread img,.js-motion .product-fries img{will-change:transform,opacity}
.js-motion .own-label{will-change:transform,opacity;transform-origin:center}

/* 4. Cards empilhados (sticky exige que a seção não tenha overflow hidden) */
.js-motion .differences{overflow:visible}
.js-motion .benefits-grid{grid-template-columns:1fr;gap:0}
.js-motion .benefit{position:sticky;top:calc(28px + var(--i,0) * 18px);margin-bottom:26px;min-height:min(62vh,520px);
  box-shadow:0 -12px 40px rgba(28,12,0,.35);transform-origin:center top;will-change:transform,filter;transition:none}
.js-motion .benefit:hover{transform:none}
.js-motion .benefit:last-child{margin-bottom:0}
.js-motion .benefit h3{font-size:clamp(30px,3.2vw,44px)}
.js-motion .benefit p{font-size:16px;max-width:420px}
.js-motion .delivery-time{font-size:clamp(98px,11vw,150px)}
.js-motion .route-art{width:min(46%,520px);height:220px;bottom:24px}
.js-motion .bread-card-image{width:min(30%,300px);right:24px;top:30px}
.js-motion .service-visual{right:40px;bottom:36px;transform:scale(1.4);transform-origin:right bottom}
.js-motion .portfolio-tags>span{font-size:10px;padding:9px 13px}
.js-motion .benefits-grid .reveal:nth-child(even){transition-delay:0s}
.js-motion .benefits-grid:after{content:"";display:block;height:14vh}

@media (max-width:700px){
  .js-motion .pin-wrap{height:220vh}
  .js-motion .pin-wrap .pain-content{width:calc(100% - 40px)}
  .js-motion .solution{border-radius:28px 28px 0 0}
  .js-motion .benefit{top:calc(16px + var(--i,0) * 12px);min-height:min(60vh,440px);margin-bottom:18px}
  .js-motion .benefit h3{font-size:30px}
  .js-motion .delivery-time{font-size:88px}
  .js-motion .route-art{width:60%;height:150px;bottom:14px}
  .js-motion .bread-card-image{width:44%;right:-4px;top:auto;bottom:-10px}
  .js-motion .service-visual{transform:none}
  .js-motion .benefits-grid:after{height:8vh}
}
@media (max-width:1150px) and (min-width:701px){
  .js-motion .pin-wrap .pain-content{width:calc(100% - 72px)}
}
@media (max-width:900px) and (min-width:701px){
  .js-motion .pin-wrap .pain-content{width:calc(100% - 48px)}
}
@media (prefers-reduced-motion:reduce){
  .pin-wrap{height:auto}
  .solution{margin-top:0;border-radius:0;box-shadow:none}
}