/* MONOCASO — backpack scroll sequence. Усе під префіксом .mbs, глобальних стилів не чіпає */
.mbs{height:420vh;position:relative;background:#fff}
.mbs__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.mbs__canvas{width:min(608px,49.6vw);aspect-ratio:1/1;display:block;background:#fff}
.mbs__poster{position:absolute;width:min(608px,49.6vw);aspect-ratio:1/1;object-fit:contain;
  transition:opacity .4s ease}
.mbs.is-ready .mbs__poster{opacity:0;pointer-events:none}
.mbs__copy{position:absolute;left:max(7vw,calc(50% - 652px));top:50%;z-index:2;width:300px;
  transform:translateY(-50%);pointer-events:none;opacity:0;will-change:opacity,transform}
.mbs__copy:first-of-type{opacity:1}
.mbs__copy span{display:block;margin-bottom:13px;font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;opacity:.35}
.mbs__copy h2{margin:0 0 15px;font-size:clamp(30px,3.3vw,46px);line-height:.98;
  letter-spacing:-.042em;font-weight:600}
.mbs__copy p{margin:0;font-size:15px;line-height:1.55;opacity:1;color:#212529}
@media(max-width:820px){
  .mbs{height:370vh}
  .mbs__sticky{align-items:flex-start;padding-top:9vh}
  .mbs__canvas,.mbs__poster{width:94vw}
  .mbs__copy{left:24px;right:24px;top:auto;bottom:10vh;width:auto;transform:none}
  .mbs__copy h2{font-size:clamp(26px,7vw,34px)}
}
@media(prefers-reduced-motion:reduce){
  .mbs{height:auto}
  .mbs__sticky{position:static;height:auto;padding:60px 0;flex-direction:column;gap:30px}
  .mbs__canvas{display:none}
  .mbs__poster{position:static;opacity:1!important}
  .mbs__copy{position:static;opacity:1!important;transform:none!important;width:auto;padding:0 24px}
}
.mbs__copy p,.mbs__copy span{font-family:var(--mono-font)}